@wise/dynamic-flow-client 5.16.1 → 5.17.2

package/build/main.js

@@ -472,7 +472,7 @@ var nl_default = {
   "dynamicFlows.ControlFeedback.type": "Onjuist type",
   "dynamicFlows.DownloadFeedback.failed": "Downloaden mislukt",
   "dynamicFlows.DownloadFeedback.started": "Downloaden...",
-  "dynamicFlows.DownloadFeedback.successful": "Download gelukt",
+  "dynamicFlows.DownloadFeedback.successful": "Downloaden gelukt",
   "dynamicFlows.DynamicParagraph.copied": "Naar klembord gekopieerd",
   "dynamicFlows.DynamicParagraph.copy": "Kopi\xEBren",
   "dynamicFlows.ErrorBoundary.errorAlert": "Er is iets misgegaan.",
@@ -552,7 +552,7 @@ var pt_default = {
   "dynamicFlows.ControlFeedback.type": "Tipo incorreto",
   "dynamicFlows.DownloadFeedback.failed": "Falha no envio",
   "dynamicFlows.DownloadFeedback.started": "Baixando...",
-  "dynamicFlows.DownloadFeedback.successful": "Download successful",
+  "dynamicFlows.DownloadFeedback.successful": "Download realizado",
   "dynamicFlows.DynamicParagraph.copied": "Copiado",
   "dynamicFlows.DynamicParagraph.copy": "Copiar",
   "dynamicFlows.ErrorBoundary.errorAlert": "Algo deu errado.",
@@ -632,7 +632,7 @@ var ru_default = {
   "dynamicFlows.ControlFeedback.type": "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0442\u0438\u043F",
   "dynamicFlows.DownloadFeedback.failed": "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043A\u0430\u0447\u0430\u0442\u044C",
   "dynamicFlows.DownloadFeedback.started": "\u0421\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435...",
-  "dynamicFlows.DownloadFeedback.successful": "Download successful",
+  "dynamicFlows.DownloadFeedback.successful": "\u0421\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u043E",
   "dynamicFlows.DynamicParagraph.copied": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
   "dynamicFlows.DynamicParagraph.copy": "\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
   "dynamicFlows.ErrorBoundary.errorAlert": "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A.",
@@ -672,7 +672,7 @@ var th_default = {
   "dynamicFlows.ControlFeedback.type": "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
   "dynamicFlows.DownloadFeedback.failed": "\u0E14\u0E32\u0E27\u0E19\u0E4C\u0E42\u0E2B\u0E25\u0E14\u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27",
   "dynamicFlows.DownloadFeedback.started": "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E32\u0E27\u0E19\u0E4C\u0E42\u0E2B\u0E25\u0E14...",
-  "dynamicFlows.DownloadFeedback.successful": "Download successful",
+  "dynamicFlows.DownloadFeedback.successful": "\u0E14\u0E32\u0E27\u0E19\u0E4C\u0E42\u0E2B\u0E25\u0E14\u0E40\u0E23\u0E35\u0E22\u0E1A\u0E23\u0E49\u0E2D\u0E22\u0E41\u0E25\u0E49\u0E27",
   "dynamicFlows.DynamicParagraph.copied": "\u0E04\u0E31\u0E14\u0E25\u0E2D\u0E01\u0E44\u0E1B\u0E22\u0E31\u0E07\u0E04\u0E25\u0E34\u0E1B\u0E1A\u0E2D\u0E23\u0E4C\u0E14",
   "dynamicFlows.DynamicParagraph.copy": "\u0E04\u0E31\u0E14\u0E25\u0E2D\u0E01",
   "dynamicFlows.ErrorBoundary.errorAlert": "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E1A\u0E32\u0E07\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E02\u0E36\u0E49\u0E19",
@@ -712,7 +712,7 @@ var tr_default = {
   "dynamicFlows.ControlFeedback.type": "Ge\xE7ersiz se\xE7im",
   "dynamicFlows.DownloadFeedback.failed": "\u0130ndirme ba\u015Far\u0131s\u0131z",
   "dynamicFlows.DownloadFeedback.started": "\u0130ndiriliyor...",
-  "dynamicFlows.DownloadFeedback.successful": "Download successful",
+  "dynamicFlows.DownloadFeedback.successful": "\u0130ndirme ba\u015Far\u0131l\u0131",
   "dynamicFlows.DynamicParagraph.copied": "Panoya kopyaland\u0131",
   "dynamicFlows.DynamicParagraph.copy": "Kopyala",
   "dynamicFlows.ErrorBoundary.errorAlert": "Bir sorun olu\u015Ftu.",
@@ -751,8 +751,8 @@ var zh_CN_default = {
   "dynamicFlows.ControlFeedback.required": "\u8BF7\u586B\u5199\u6B64\u5B57\u6BB5\u3002",
   "dynamicFlows.ControlFeedback.type": "\u7C7B\u578B\u9519\u8BEF",
   "dynamicFlows.DownloadFeedback.failed": "\u4E0B\u8F7D\u5931\u8D25",
-  "dynamicFlows.DownloadFeedback.started": "\u6B63\u5728\u4E0B\u8F7D...",
-  "dynamicFlows.DownloadFeedback.successful": "Download successful",
+  "dynamicFlows.DownloadFeedback.started": "\u6B63\u5728\u4E0B\u8F7D\u2026\u2026",
+  "dynamicFlows.DownloadFeedback.successful": "\u4E0B\u8F7D\u6210\u529F",
   "dynamicFlows.DynamicParagraph.copied": "\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F",
   "dynamicFlows.DynamicParagraph.copy": "\u590D\u5236",
   "dynamicFlows.ErrorBoundary.errorAlert": "\u51FA\u9519\u4E86\u3002",
@@ -762,14 +762,14 @@ var zh_CN_default = {
   "dynamicFlows.ExternalConfirmation.open": "\u5728\u65B0\u6807\u7B7E\u9875\u4E2D\u6253\u5F00",
   "dynamicFlows.ExternalConfirmation.title": "\u8BF7\u786E\u8BA4",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8BE5\u6587\u4EF6\u592A\u5927\u3002\u8BF7\u4E0A\u4F20\u4E00\u4E2A\u66F4\u5C0F\u7684\u6587\u4EF6\u3002",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "\u62B1\u6B49\uFF0C\u4E0D\u652F\u6301\u8BE5\u6587\u4EF6\u683C\u5F0F\u3002\u8BF7\u4E0A\u4F20\u5176\u4ED6\u6587\u4EF6\u3002",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "\u62B1\u6B49\uFF0C\u7CFB\u7EDF\u6682\u4E0D\u652F\u6301\u8BE5\u6587\u4EF6\u683C\u5F0F\u3002\u8BF7\u4E0A\u4F20\u5176\u4ED6\u6587\u4EF6\u3002",
   "dynamicFlows.Help.ariaLabel": "\u70B9\u51FB\u6B64\u5904\u83B7\u53D6\u66F4\u591A\u4FE1\u606F\u3002",
   "dynamicFlows.MultiSelect.summary": "{first} \u548C\u5176\u4ED6 {count} \u4E2A",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8BE5\u6587\u4EF6\u592A\u5927\u3002\u8BF7\u4E0A\u4F20\u4E00\u4E2A\u66F4\u5C0F\u7684\u6587\u4EF6\u3002",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "\u8BF7\u4E0A\u4F20\u4E0D\u8D85\u8FC7 {maxItems} \u4E2A\u6587\u4EF6\u3002",
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u8BF7\u4E0A\u4F20\u81F3\u5C11 {minItems} \u4E2A\u6587\u4EF6\u3002",
   "dynamicFlows.PersistAsyncSchema.genericError": "\u51FA\u9519\u4E86\uFF0C\u8BF7\u91CD\u8BD5\u3002",
-  "dynamicFlows.SearchLayout.loading": "\u6B63\u5728\u52A0\u8F7D\u2026"
+  "dynamicFlows.SearchLayout.loading": "\u6B63\u5728\u52A0\u8F7D\u2026\u2026"
 };
 
 // src/i18n/zh_HK.json
@@ -1049,7 +1049,7 @@ var getInputUpdateFunction = (onComponentUpdate) => {
 // src/domain/components/RootDomainComponent.ts
 var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, requestCache) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  const rootComponent = {
+  const component = {
     type: "root",
     kind: "step",
     uid: "root",
@@ -1057,107 +1057,104 @@ var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, req
     stepStack: [],
     backConfig,
     requestCache,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     dismissAllModals() {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.dismissAllModals();
+      (_a = component.getStep()) == null ? void 0 : _a.dismissAllModals();
     },
     dismissModal() {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.dismissModal();
+      (_a = component.getStep()) == null ? void 0 : _a.dismissModal();
     },
     showModal(modal) {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.showModal(modal);
+      (_a = component.getStep()) == null ? void 0 : _a.showModal(modal);
     },
     getChildren() {
-      const step = this.getStep();
+      const step = component.getStep();
       return step ? [step, ...step.getModals()] : [];
     },
     getLocalValue() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.getLocalValue()) != null ? _b : null;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.getLocalValue()) != null ? _b : null;
     },
     async getSubmittableValue() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.getSubmittableValue()) != null ? _b : null;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.getSubmittableValue()) != null ? _b : null;
     },
     getSubmittableValueSync() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.getSubmittableValueSync()) != null ? _b : null;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.getSubmittableValueSync()) != null ? _b : null;
     },
     validate() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.validate()) != null ? _b : false;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.validate()) != null ? _b : false;
     },
     setLoadingState(loadingState) {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.setLoadingState(loadingState);
+      (_a = component.getStep()) == null ? void 0 : _a.setLoadingState(loadingState);
     },
     getLoadingState() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.loadingState) != null ? _b : "initial";
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.loadingState) != null ? _b : "initial";
     },
     getSchemaComponents() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.schemaComponents) != null ? _b : [];
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.schemaComponents) != null ? _b : [];
     },
     getTrackEvent() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.trackEvent) != null ? _b : null;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.trackEvent) != null ? _b : null;
     },
     isBusy() {
-      const loadingState = this.getLoadingState();
+      const loadingState = component.getLoadingState();
       return loadingState === "submitting" || loadingState === "refreshing";
     },
     hasStep() {
-      return Boolean(this.stepStack.length > 0);
+      return Boolean(component.stepStack.length > 0);
     },
     getStep() {
       var _a;
-      return (_a = this.stepStack[this.stepStack.length - 1]) != null ? _a : null;
+      return (_a = component.stepStack[component.stepStack.length - 1]) != null ? _a : null;
     },
     addSubflow(subflow) {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.addSubflow(subflow);
+      (_a = component.getStep()) == null ? void 0 : _a.addSubflow(subflow);
     },
     closeSubflow() {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.closeSubflow();
+      (_a = component.getStep()) == null ? void 0 : _a.closeSubflow();
     },
     getSubflow() {
       var _a, _b;
-      return (_b = (_a = this.getStep()) == null ? void 0 : _a.subflow) != null ? _b : null;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.subflow) != null ? _b : null;
     },
     start() {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.start();
+      (_a = component.getStep()) == null ? void 0 : _a.start();
     },
     stop() {
       var _a;
-      (_a = this.getStep()) == null ? void 0 : _a.stop();
+      (_a = component.getStep()) == null ? void 0 : _a.stop();
     },
     updateStep(stepComponent) {
       var _a;
-      this.closeSubflow();
-      const shouldScroll = shouldScrollOnStepUpdate(stepComponent, this.getStep());
-      this._update((draft) => {
+      component.closeSubflow();
+      const shouldScroll = shouldScrollOnStepUpdate(stepComponent, component.getStep());
+      update(component, (draft) => {
         draft.stepStack = draft.stepStack.slice(0, -1);
         draft.stepStack.push(stepComponent);
       });
       if (shouldScroll) {
         scrollToTop == null ? void 0 : scrollToTop("smooth");
       }
-      (_a = this.getStep()) == null ? void 0 : _a.start();
+      (_a = component.getStep()) == null ? void 0 : _a.start();
     },
     pushStep(stepComponent) {
       var _a;
-      this.closeSubflow();
-      const previousStep = this.getStep();
+      component.closeSubflow();
+      const previousStep = component.getStep();
       const previousStepHasPolling = previousStep == null ? void 0 : previousStep.step.polling;
-      this._update((draft) => {
+      update(component, (draft) => {
         switch (stepComponent.stackBehavior) {
           case "remove-previous":
           case "replace-current":
@@ -1174,41 +1171,41 @@ var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, req
         }
       });
       if (previousStep != null) {
-        (_a = this.getStep()) == null ? void 0 : _a.start();
+        (_a = component.getStep()) == null ? void 0 : _a.start();
         scrollToTop == null ? void 0 : scrollToTop("instant");
       }
     },
     clearStack() {
-      const currentStep = this.getStep();
+      const currentStep = component.getStep();
       if (currentStep) {
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.stepStack = [currentStep];
         });
       }
     },
     getRefreshUrl() {
       var _a, _b, _c, _d;
-      return (_d = (_c = (_a = this.getStep()) == null ? void 0 : _a.step.refreshUrl) != null ? _c : (_b = this.getStep()) == null ? void 0 : _b.step.refreshFormUrl) != null ? _d : null;
+      return (_d = (_c = (_a = component.getStep()) == null ? void 0 : _a.step.refreshUrl) != null ? _c : (_b = component.getStep()) == null ? void 0 : _b.step.refreshFormUrl) != null ? _d : null;
     },
     navigateBack() {
       var _a;
-      this.closeSubflow();
-      if (this.stepStack.length === 1) {
+      component.closeSubflow();
+      if (component.stepStack.length === 1) {
         return;
       }
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.stepStack = draft.stepStack.slice(0, -1);
       });
-      (_a = this.getStep()) == null ? void 0 : _a.start();
+      (_a = component.getStep()) == null ? void 0 : _a.start();
     },
     canPerformBack() {
       var _a, _b;
-      const navigation = (_a = this.getStep()) == null ? void 0 : _a.step.navigation;
+      const navigation = (_a = component.getStep()) == null ? void 0 : _a.step.navigation;
       const stepHasBehavior = Boolean((_b = navigation == null ? void 0 : navigation.back) != null ? _b : navigation == null ? void 0 : navigation.backButton);
-      return this.backConfig.isFlowCancellable || this.stepStack.length > 1 && this.backConfig.isNativeBackEnabled || stepHasBehavior;
+      return component.backConfig.isFlowCancellable || component.stepStack.length > 1 && component.backConfig.isNativeBackEnabled || stepHasBehavior;
     }
   };
-  return rootComponent;
+  return component;
 };
 var shouldScrollOnStepUpdate = (newStep, currentStep) => {
   if (!currentStep) {
@@ -1217,6 +1214,15 @@ var shouldScrollOnStepUpdate = (newStep, currentStep) => {
   return newStep.error != null && newStep.error !== currentStep.error;
 };
 
+// src/domain/features/events.ts
+var trackBehaviorTriggered = (trackEvent, behavior) => {
+  if (behavior.track) {
+    trackEvent("Behavior Triggered", __spreadProps(__spreadValues({}, behavior.analytics), {
+      behaviorType: behavior.type
+    }));
+  }
+};
+
 // src/domain/features/prefetch/request-cache.ts
 var makeRequestCacheWithParent = (parent) => {
   const map = /* @__PURE__ */ new Map();
@@ -1267,36 +1273,33 @@ var makeRequestCacheKey = (requestParams) => {
 };
 
 // src/domain/components/ModalComponent.ts
-var createModalContentComponent = (modalProps, onComponentUpdate) => {
+var createModalContentComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  const modalContentComponent = __spreadProps(__spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "modal",
     kind: "layout",
     open: true
-  }, modalProps), {
-    _update(updateFn) {
-      update(this, updateFn);
-    },
+  }, props), {
     getChildren() {
-      return this.components;
+      return component.components;
     },
     close() {
-      update(this, (draft) => {
+      update(component, (draft) => {
         draft.open = false;
       });
     }
   });
-  return modalContentComponent;
+  return component;
 };
 
 // src/domain/components/utils/getRandomId.ts
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // src/domain/components/AlertComponent.ts
-var createAlertComponent = (alertProps) => __spreadValues({
+var createAlertComponent = (props) => __spreadValues({
   type: "alert",
   kind: "layout"
-}, alertProps);
+}, props);
 
 // src/domain/mappers/utils/behavior-utils.ts
 var getDomainLayerBehavior = ({ action, behavior: specBehavior }, stepActions, registerSubmissionBehavior) => {
@@ -1310,29 +1313,31 @@ var getDomainLayerBehavior = ({ action, behavior: specBehavior }, stepActions, r
     registerSubmissionBehavior == null ? void 0 : registerSubmissionBehavior(behavior);
     return behavior;
   }
-  return { type: "none" };
+  return { type: "none", track: false };
 };
 var normaliseBehavior = (behavior, stepActions) => {
   if ("type" in behavior) {
     if (behavior.type === "subflow") {
       return __spreadProps(__spreadValues({}, behavior), {
+        track: true,
         onCompletion: behavior.onCompletion ? normaliseBehavior(behavior.onCompletion, stepActions) : void 0,
         onError: behavior.onError ? normaliseBehavior(behavior.onError, stepActions) : void 0
       });
     }
-    return behavior;
+    return __spreadProps(__spreadValues({}, behavior), { track: true });
   }
   if ("action" in behavior && behavior.action) {
     return actionToBehavior(behavior.action, stepActions);
   }
   if ("link" in behavior && behavior.link) {
-    return { type: "link", url: behavior.link.url };
+    return { type: "link", url: behavior.link.url, track: true };
   }
-  return { type: "none" };
+  return { type: "none", track: false };
 };
 var actionToBehavior = (action, stepActions) => ({
   type: "action",
-  action: inlineAction(action, stepActions)
+  action: inlineAction(action, stepActions),
+  track: false
 });
 var inlineAction = (action, stepActions = []) => action.$ref ? __spreadValues(__spreadValues({}, getActionByReference(action.$ref, stepActions)), action) : action;
 var getActionByReference = ($ref, actions = []) => {
@@ -1343,6 +1348,30 @@ var getActionByReference = ($ref, actions = []) => {
   return action;
 };
 
+// src/domain/mappers/utils/getHrefWithTracking.ts
+var getHrefWithTracking = ({
+  behavior,
+  onBehavior,
+  trackEvent
+}) => {
+  if (behavior.type === "link" && behavior.url) {
+    return () => ({
+      href: behavior.url,
+      target: "_blank",
+      onClick: () => {
+        trackEvent("Behavior Triggered", __spreadProps(__spreadValues({}, behavior.analytics), {
+          behaviorType: behavior.type
+        }));
+      }
+    });
+  }
+  return () => ({
+    onClick: () => {
+      void onBehavior(behavior);
+    }
+  });
+};
+
 // src/domain/mappers/utils/legacy-utils.ts
 var mapLegacyContext = (context) => {
   switch (context) {
@@ -1400,15 +1429,17 @@ function getDomainLayerCallToAction(cta, mapperProps) {
   if (!cta) {
     return void 0;
   }
-  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
+  const { step, onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
   const stepActions = (_a = step.actions) != null ? _a : [];
   const behavior = getDomainLayerBehavior(cta, stepActions, registerSubmissionBehavior);
+  const isLink = behavior.type === "link";
   return {
     type: behavior.type,
     title: (_b = cta.title) != null ? _b : "",
     context: cta.context ? mapLegacyContext(cta.context) : void 0,
     accessibilityDescription: cta.accessibilityDescription,
-    href: behavior.type === "link" ? behavior.url : void 0,
+    href: isLink ? behavior.url : void 0,
+    hrefWithTracking: getHrefWithTracking({ behavior, onBehavior, trackEvent }),
     onClick: () => {
       void onBehavior(behavior);
     }
@@ -1439,11 +1470,11 @@ var alertLayoutToComponent = (uid, {
 };
 
 // src/domain/components/BoxComponent.ts
-var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
+var createBoxComponent = (props) => __spreadProps(__spreadValues({}, props), {
   type: "box",
   kind: "layout",
   getChildren() {
-    return this.components;
+    return props.components;
   }
 });
 
@@ -1470,10 +1501,10 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
 });
 
 // src/domain/components/ButtonComponent.ts
-var createButtonComponent = (buttonProps) => __spreadValues({
+var createButtonComponent = (props) => __spreadValues({
   type: "button",
   kind: "layout"
-}, buttonProps);
+}, props);
 
 // src/domain/mappers/utils/image.ts
 var mapSpecImage = (image) => {
@@ -1557,7 +1588,7 @@ var buttonLayoutToComponentWithAction = (uid, button, mapperProps) => {
   const { action } = button;
   const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : {};
   const onClick = () => {
-    void onBehavior({ type: "action", action: inlinedAction });
+    void onBehavior({ type: "action", action: inlinedAction, track: false });
   };
   return createButtonComponent({
     uid,
@@ -1599,11 +1630,11 @@ var getButtonContext = ({ context, action }) => {
 };
 
 // src/domain/components/ColumnsComponent.ts
-var createColumnsComponent = (columnsProps) => __spreadProps(__spreadValues({}, columnsProps), {
+var createColumnsComponent = (props) => __spreadProps(__spreadValues({}, props), {
   type: "columns",
   kind: "layout",
   getChildren() {
-    return [...this.startComponents, ...this.endComponents];
+    return [...props.startComponents, ...props.endComponents];
   }
 });
 
@@ -1629,10 +1660,10 @@ var columnsLayoutToComponent = (uid, { control, left, right, bias, margin, analy
 });
 
 // src/domain/components/DecisionComponent.ts
-var createDecisionComponent = (decisionProps) => __spreadValues({
+var createDecisionComponent = (props) => __spreadValues({
   type: "decision",
   kind: "layout"
-}, decisionProps);
+}, props);
 
 // src/domain/mappers/utils/tags-utils.ts
 var mapTags = ({ tag, tags }) => tags != null ? tags : tag != null ? [tag] : void 0;
@@ -1645,12 +1676,18 @@ var mapInlineAlert = (alert) => {
   } : void 0;
 };
 var mapAdditionalInfo = (info, mapperProps) => {
-  const { onBehavior, registerSubmissionBehavior } = mapperProps;
+  const { onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
   if (info) {
     const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+    const isLink = behavior.type === "link";
     return {
       text: info.text,
-      href: behavior.type === "link" ? behavior.url : void 0,
+      href: isLink ? behavior.url : void 0,
+      hrefWithTracking: getHrefWithTracking({
+        behavior,
+        onBehavior,
+        trackEvent
+      }),
       accessibilityDescription: info.accessibilityDescription,
       onClick: behavior.type === "none" ? void 0 : () => {
         void onBehavior(behavior);
@@ -1685,14 +1722,16 @@ var decisionLayoutToComponent = (uid, {
 });
 var mapOption = (option, mapperProps) => {
   var _a, _b;
-  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
+  const { step, onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
   const behavior = getDomainLayerBehavior(option, (_a = step.actions) != null ? _a : [], registerSubmissionBehavior);
+  const isLink = behavior.type === "link";
   return __spreadProps(__spreadValues({}, option), {
     disabled: (_b = option.disabled) != null ? _b : false,
-    href: behavior.type === "link" ? behavior.url : void 0,
+    href: isLink ? behavior.url : void 0,
     media: getDomainLayerMedia(option),
     inlineAlert: mapInlineAlert(option.inlineAlert),
     tags: mapTags(option),
+    hrefWithTracking: getHrefWithTracking({ behavior, onBehavior, trackEvent }),
     onClick: () => {
       void onBehavior(behavior);
     }
@@ -1700,10 +1739,10 @@ var mapOption = (option, mapperProps) => {
 };
 
 // src/domain/components/StatusListComponent.ts
-var createStatusListComponent = (statusListProps) => __spreadValues({
+var createStatusListComponent = (props) => __spreadValues({
   type: "status-list",
   kind: "layout"
-}, statusListProps);
+}, props);
 
 // src/domain/mappers/layout/deprecatedListLayoutToComponent.ts
 var isDeprecatedListLayout = (layout) => {
@@ -1746,11 +1785,11 @@ var createDividerComponent = (props) => __spreadValues({
 var dividerLayoutToComponent = (uid, { control, margin, analyticsId, tags }) => createDividerComponent({ uid, analyticsId, control, margin: margin != null ? margin : "md", tags });
 
 // src/domain/components/FormComponent.ts
-var createFormComponent = (formProps) => __spreadProps(__spreadValues({}, formProps), {
+var createFormComponent = (props) => __spreadProps(__spreadValues({}, props), {
   type: "form",
   kind: "layout",
   getChildren() {
-    return [this.schemaComponent];
+    return [props.schemaComponent];
   }
 });
 
@@ -1779,10 +1818,10 @@ var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, co
 };
 
 // src/domain/components/HeadingComponent.ts
-var createHeadingComponent = (headingProps) => __spreadValues({
+var createHeadingComponent = (props) => __spreadValues({
   type: "heading",
   kind: "layout"
-}, headingProps);
+}, props);
 
 // src/domain/mappers/layout/headingLayoutToComponent.ts
 var headingLayoutToComponent = (uid, { analyticsId, align, margin, size, control, tags, text }) => createHeadingComponent({
@@ -1797,10 +1836,10 @@ var headingLayoutToComponent = (uid, { analyticsId, align, margin, size, control
 });
 
 // src/domain/components/ImageComponent.ts
-var createImageComponent = (imageProps) => __spreadValues({
+var createImageComponent = (props) => __spreadValues({
   type: "image",
   kind: "layout"
-}, imageProps);
+}, props);
 
 // src/domain/mappers/layout/imageLayoutToComponent.ts
 var imageLayoutToComponent = (uid, {
@@ -1832,10 +1871,10 @@ var imageLayoutToComponent = (uid, {
 };
 
 // src/domain/components/MarkdownComponent.ts
-var createMarkdownComponent = (markdownProps) => __spreadValues({
+var createMarkdownComponent = (props) => __spreadValues({
   type: "markdown",
   kind: "layout"
-}, markdownProps);
+}, props);
 
 // src/domain/mappers/layout/infoLayoutToComponent.ts
 var infoLayoutToComponent = (uid, { analyticsId, align, control, margin, markdown: content, tags }) => createMarkdownComponent({
@@ -1850,10 +1889,10 @@ var infoLayoutToComponent = (uid, { analyticsId, align, control, margin, markdow
 });
 
 // src/domain/components/InstructionsComponent.ts
-var createInstructionsComponent = (instructionsProps) => __spreadValues({
+var createInstructionsComponent = (props) => __spreadValues({
   type: "instructions",
   kind: "layout"
-}, instructionsProps);
+}, props);
 
 // src/domain/mappers/layout/instructionsLayoutToComponent.ts
 var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin, tags, title }) => createInstructionsComponent({
@@ -1870,10 +1909,10 @@ var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin,
 });
 
 // src/domain/components/ListComponent.ts
-var createListComponent = (listProps) => __spreadValues({
+var createListComponent = (props) => __spreadValues({
   type: "list",
   kind: "layout"
-}, listProps);
+}, props);
 
 // src/domain/mappers/layout/listLayoutToComponent.ts
 var listLayoutToComponent = (uid, { analyticsId, callToAction, control, items, margin, tags, title }, mapperProps) => {
@@ -1931,10 +1970,10 @@ var mapSupportingValues = (item) => {
 };
 
 // src/domain/components/LoadingIndicatorComponent.ts
-var createLoadingIndicatorComponent = (loadingIndicatorProps) => __spreadValues({
+var createLoadingIndicatorComponent = (props) => __spreadValues({
   type: "loading-indicator",
   kind: "layout"
-}, loadingIndicatorProps);
+}, props);
 
 // src/domain/mappers/layout/loadingIndicatorLayoutToComponent.ts
 var loadingIndicatorLayoutToComponent = (uid, { analyticsId, control, margin, size, tags }) => createLoadingIndicatorComponent({
@@ -1985,12 +2024,12 @@ var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media,
 });
 
 // src/domain/components/ModalLayoutComponent.ts
-var createModalComponent = (modalProps) => __spreadProps(__spreadValues({
+var createModalComponent = (props) => __spreadProps(__spreadValues({
   type: "modal-layout",
   kind: "layout"
-}, modalProps), {
+}, props), {
   getChildren() {
-    return this.content.components;
+    return props.content.components;
   }
 });
 
@@ -2014,10 +2053,10 @@ var modalLayoutToComponent = (uid, { analyticsId, content, control, margin, tags
 };
 
 // src/domain/components/ParagraphComponent.ts
-var createParagraphComponent = (paragraphProps) => __spreadValues({
+var createParagraphComponent = (props) => __spreadValues({
   type: "paragraph",
   kind: "layout"
-}, paragraphProps);
+}, props);
 
 // src/domain/mappers/layout/paragraphLayoutToComponent.ts
 var paragraphLayoutToComponent = (uid, { analyticsId, align, control, margin, size, tags, text }) => createParagraphComponent({
@@ -2032,10 +2071,10 @@ var paragraphLayoutToComponent = (uid, { analyticsId, align, control, margin, si
 });
 
 // src/domain/components/ProgressComponent.ts
-var createProgressComponent = (progressProps) => __spreadValues({
+var createProgressComponent = (props) => __spreadValues({
   type: "progress",
   kind: "layout"
-}, progressProps);
+}, props);
 
 // src/domain/mappers/layout/progressLayoutToComponent.ts
 var progressLayoutToComponent = (uid, {
@@ -2064,10 +2103,10 @@ var progressLayoutToComponent = (uid, {
 });
 
 // src/domain/components/ReviewComponent.ts
-var createReviewComponent = (reviewProps) => __spreadValues({
+var createReviewComponent = (props) => __spreadValues({
   type: "review",
   kind: "layout"
-}, reviewProps);
+}, props);
 
 // src/domain/mappers/layout/reviewLayoutToComponent.ts
 var reviewLayoutToComponent = (uid, {
@@ -2099,12 +2138,15 @@ var getCallToAction = ({
     return getDomainLayerCallToAction(callToAction, mapperProps);
   }
   if (action == null ? void 0 : action.title) {
+    const behavior = { type: "action", action, track: true };
+    const { onBehavior, trackEvent } = mapperProps;
     return {
       type: "action",
       title: action.title,
       onClick: () => {
-        void mapperProps.onBehavior({ type: "action", action });
-      }
+        void onBehavior(behavior);
+      },
+      hrefWithTracking: getHrefWithTracking({ behavior, onBehavior, trackEvent })
     };
   }
   return void 0;
@@ -2141,7 +2183,7 @@ var debounce = (callback, waitMs) => {
   let timeoutId = null;
   let lastArgs = null;
   const clearTimer = () => {
-    if (timeoutId) {
+    if (timeoutId !== null) {
       clearTimeout(timeoutId);
       timeoutId = null;
     }
@@ -2174,8 +2216,8 @@ var debounce = (callback, waitMs) => {
 
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
-var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = searchProps;
+var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate) => {
+  const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = props;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2219,16 +2261,13 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     title,
     isLoading: false,
     query: "",
-    _update(updateFn) {
-      update(this, updateFn);
-    },
-    onChange(query) {
+    setQuery(query) {
       if (query.trim()) {
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.query = query;
           draft.isLoading = true;
         });
-        debouncedSearch(this, query.trim());
+        debouncedSearch(component, query.trim());
       } else {
         abortController.abort();
         debouncedSearch.cancel();
@@ -2240,15 +2279,15 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
         });
       }
     },
-    onSelect({ type, value }) {
+    selectResult({ type, value }) {
       if (type === "action") {
-        void onBehavior({ type: "action", action: value });
+        void onBehavior({ type: "action", action: value, track: false });
       } else {
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.query = value.query;
           draft.isLoading = true;
         });
-        search(this, value.query, {
+        search(component, value.query, {
           method: value.method,
           param: value.param,
           url: value.url
@@ -2399,15 +2438,13 @@ var emptyInitialState = {
 };
 
 // src/domain/components/SectionComponent.ts
-var createSectionComponent = (props) => {
-  return __spreadProps(__spreadValues({}, props), {
-    type: "section",
-    kind: "layout",
-    getChildren() {
-      return this.components;
-    }
-  });
-};
+var createSectionComponent = (props) => __spreadProps(__spreadValues({}, props), {
+  type: "section",
+  kind: "layout",
+  getChildren() {
+    return props.components;
+  }
+});
 
 // src/domain/mappers/layout/sectionLayoutToComponent.ts
 var sectionLayoutToComponent = (uid, { analyticsId, control, title, components, callToAction, margin, tags }, mapperProps, schemaComponents) => {
@@ -2440,7 +2477,7 @@ var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin, t
 });
 
 // src/domain/components/TabsComponent.ts
-var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
+var createTabsComponent = (props) => __spreadProps(__spreadValues({}, props), {
   type: "tabs",
   kind: "layout"
 });
@@ -2468,19 +2505,19 @@ var mapTabs = (tabs, uid, mapperProps, schemaComponents) => tabs.map(({ componen
 }));
 
 // src/domain/components/UpsellComponent.ts
-var createUpsellComponent = (upsellProps, onComponentUpdate) => {
+var createUpsellComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  const _a = upsellProps, { onDismiss: propsOnDismiss } = _a, restProps = __objRest(_a, ["onDismiss"]);
+  const _a = props, { dismiss } = _a, restProps = __objRest(_a, ["dismiss"]);
   const component = __spreadProps(__spreadValues({
     type: "upsell",
     kind: "layout"
   }, restProps), {
     visible: true,
-    onDismiss: propsOnDismiss ? () => {
+    dismiss: dismiss ? () => {
       update(component, (draft) => {
         draft.visible = false;
       });
-      propsOnDismiss();
+      dismiss();
     } : void 0
   });
   return component;
@@ -2499,7 +2536,7 @@ var upsellLayoutToComponent = (uid, { analyticsId, callToAction, control, margin
       media: getDomainLayerMedia({ media }),
       tags,
       text,
-      onDismiss: onDismiss ? () => {
+      dismiss: onDismiss ? () => {
         const { url, method } = onDismiss;
         const body = method === "GET" ? void 0 : JSON.stringify(onDismiss.body);
         void mapperProps.httpClient(url, { method, body }).catch(() => {
@@ -2581,26 +2618,27 @@ var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents)
 // src/domain/components/step/ExternalConfirmationComponent.ts
 var createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  return {
+  const component = {
     type: "external-confirmation",
     kind: "layout",
     uid,
     url,
     status: "initial",
     open() {
-      if (this.status === "initial" || this.status === "failure") {
-        const success = onLink(this.url);
-        update(this, (draft) => {
+      if (component.status === "initial" || component.status === "failure") {
+        const success = onLink(component.url);
+        update(component, (draft) => {
           draft.status = success ? "success" : "failure";
         });
       }
     },
     onCancel() {
-      update(this, (draft) => {
+      update(component, (draft) => {
         draft.status = "dismissed";
       });
     }
   };
+  return component;
 };
 
 // src/utils/recursiveMerge.ts
@@ -2650,8 +2688,26 @@ var getSubmittableDataSync = (components) => components.map((component) => compo
 var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => recursiveMerge(acc, value), null);
 
 // src/domain/components/step/StepDomainComponent.ts
-var createStepComponent = (stepProps) => {
-  const _a = stepProps, { uid, stepPolling, stepRefreshAfter, stepPrefetch, onComponentUpdate, onLoad } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "stepPrefetch", "onComponentUpdate", "onLoad"]);
+var createStepComponent = (props) => {
+  const _a = props, {
+    uid,
+    stepPolling,
+    stepRefreshAfter,
+    stepPrefetch,
+    features,
+    logEvent,
+    onComponentUpdate,
+    onLoad
+  } = _a, rest = __objRest(_a, [
+    "uid",
+    "stepPolling",
+    "stepRefreshAfter",
+    "stepPrefetch",
+    "features",
+    "logEvent",
+    "onComponentUpdate",
+    "onLoad"
+  ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const component = __spreadProps(__spreadValues({
     uid
@@ -2664,78 +2720,73 @@ var createStepComponent = (stepProps) => {
     subflow: null,
     dismissModal() {
       var _a2;
-      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
+      (_a2 = component.modals.at(-1)) == null ? void 0 : _a2.close();
     },
     dismissAllModals() {
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
       });
     },
     showModal(modal) {
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.modals = [...draft.modals, modal];
       });
     },
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     getChildren() {
-      return this.externalConfirmation ? [...this.layoutComponents, this.externalConfirmation] : this.layoutComponents;
+      return component.externalConfirmation ? [...component.layoutComponents, component.externalConfirmation] : component.layoutComponents;
     },
     getModals() {
-      return this.modals;
+      return component.modals;
     },
     async getSubmittableValue() {
-      return getSubmittableData(this.schemaComponents);
+      return getSubmittableData(component.schemaComponents);
     },
     getSubmittableValueSync() {
-      return getSubmittableDataSync(this.schemaComponents);
+      return getSubmittableDataSync(component.schemaComponents);
     },
     getLocalValue() {
-      return getLocalValues(this.schemaComponents);
+      return getLocalValues(component.schemaComponents);
     },
     validate() {
-      return this.schemaComponents.every(
-        (inputComponent) => {
-          var _a2;
-          return this.referencedSchemaIds.includes((_a2 = inputComponent.schemaId) != null ? _a2 : "") ? inputComponent.validate() : true;
-        }
-      );
+      const isStrict = features.isEnabled("validateUnreferencedSchemas");
+      return component.schemaComponents.map(
+        (inputComponent) => validateInputComponent(component, inputComponent, isStrict, logEvent)
+      ).every(Boolean);
     },
     setLoadingState(loadingState) {
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.loadingState = loadingState;
       });
     },
     addSubflow(subflow) {
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.subflow = subflow;
       });
     },
     closeSubflow() {
-      if (!this.subflow) {
+      if (!component.subflow) {
         return;
       }
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.subflow = null;
       });
     },
     start() {
-      if (this.state === "initial") {
+      if (component.state === "initial") {
         onLoad == null ? void 0 : onLoad();
       }
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.state = "started";
       });
       stepPolling == null ? void 0 : stepPolling.start();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
-      stepPrefetch.start(this.getSubmittableValueSync());
+      stepPrefetch.start(component.getSubmittableValueSync());
     },
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
       stepPrefetch.stop();
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.state = "stopped";
         draft.modals = [];
       });
@@ -2743,6 +2794,22 @@ var createStepComponent = (stepProps) => {
   });
   return component;
 };
+var validateInputComponent = (component, inputComponent, isStrict, logEvent) => {
+  var _a;
+  const isSchemaReferenced = component.referencedSchemaIds.includes((_a = inputComponent.schemaId) != null ? _a : "");
+  const isValid = inputComponent.validate();
+  if (!isSchemaReferenced && !isValid) {
+    logEvent(
+      isStrict ? "error" : "warning",
+      isStrict ? "Unreferenced schema does not pass validation. This blocks submission. You must fix your step." : "Unreferenced schema does not pass validation. This blocks submission on iOS and Android, and soon it will on web. You should fix your step.",
+      {
+        unreferencedSchemaId: inputComponent.schemaId,
+        componentUid: component.uid
+      }
+    );
+  }
+  return isSchemaReferenced || isStrict ? isValid : true;
+};
 
 // src/domain/features/polling/getStepPolling.ts
 var getStepPolling = ({
@@ -2945,7 +3012,7 @@ var executeRequest = async (props) => {
       url,
       {
         method,
-        body: body ? JSON.stringify(body) : void 0,
+        body: body != null ? JSON.stringify(body) : void 0,
         headers: { "Content-Type": "application/json" }
       }
     ],
@@ -2981,7 +3048,8 @@ var executeRequest = async (props) => {
         type: "behavior",
         behavior: {
           type: "action",
-          action: responseBody.action
+          action: responseBody.action,
+          track: false
         }
       };
     }
@@ -2992,7 +3060,8 @@ var executeRequest = async (props) => {
         behavior: __spreadProps(__spreadValues({}, responseBody), {
           type: "subflow",
           onCompletion: responseBody.onCompletion ? normaliseBehavior(responseBody.onCompletion, []) : void 0,
-          onError: responseBody.onError ? normaliseBehavior(responseBody.onError, []) : void 0
+          onError: responseBody.onError ? normaliseBehavior(responseBody.onError, []) : void 0,
+          track: false
         })
       } : {
         type: "error",
@@ -3001,7 +3070,7 @@ var executeRequest = async (props) => {
     }
     case "modal": {
       assertModalResponseBody(responseBody);
-      return !isInitial ? { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal" }) } : {
+      return !isInitial ? { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal", track: false }) } : {
         type: "error",
         body: { errors: { error: "Cannot show modal without a current step" } }
       };
@@ -3163,7 +3232,7 @@ var getStepRefreshAfter = ({
   const start = () => {
     const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
     timeout = setTimeout(() => {
-      void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" } });
+      void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" }, track: false });
     }, timeLeft);
   };
   return {
@@ -3316,8 +3385,8 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
 var getDebouncedComponentValidationAsync = (update, performValidationAsync) => debounce(getComponentValidationAsync(update, performValidationAsync), 1e3);
 
 // src/domain/components/NumberInputComponent.ts
-var createNumberInputComponent = (numberInputProps, onComponentUpdate) => {
-  const _a = numberInputProps, {
+var createNumberInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     checks,
@@ -3337,32 +3406,31 @@ var createNumberInputComponent = (numberInputProps, onComponentUpdate) => {
     "summariser"
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
+  const onValueChangeDebounced = debounce(onValueChange, 1e3);
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const numberComponent = __spreadValues({
+  const component = __spreadValues({
     type: "number",
     kind: "input",
     uid,
     id,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
-      const isValid = this.validate();
+      const isValid = component.validate();
       performOnChange == null ? void 0 : performOnChange.flush();
       if (isValid) {
         void (onPersistAsync == null ? void 0 : onPersistAsync().catch(() => {
         }));
         validateAsync == null ? void 0 : validateAsync.flush();
       }
+      onValueChangeDebounced.flush();
     },
     onFocus() {
     },
     // Noop
-    onChange(updatedValue) {
-      const prevValue = this.value;
-      this._update((draft) => {
+    setValue(updatedValue) {
+      const prevValue = component.value;
+      update(component, (draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -3370,32 +3438,32 @@ var createNumberInputComponent = (numberInputProps, onComponentUpdate) => {
       performOnChange == null ? void 0 : performOnChange(prevValue, updatedValue);
       const isValid = getValidationErrors(updatedValue).length === 0;
       if (isValid) {
-        validateAsync == null ? void 0 : validateAsync(this, updatedValue);
+        validateAsync == null ? void 0 : validateAsync(component, updatedValue);
       }
-      onValueChange();
+      onValueChangeDebounced();
     },
     async getSubmittableValue() {
-      return this.getSubmittableValueSync();
+      return component.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
       var _a2;
-      return (_a2 = this.getLocalValue()) != null ? _a2 : null;
+      return (_a2 = component.getLocalValue()) != null ? _a2 : null;
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0;
     }
   }, rest);
-  return numberComponent;
+  return component;
 };
 
 // src/domain/features/schema-on-change/getSchemaOnChange.ts
@@ -3427,7 +3495,8 @@ var getBehaviorFromSchemaRefreshStepOnChange = (schema) => {
     const behavior = {
       type: "refresh",
       analytics: { schema: (_c = analyticsId != null ? analyticsId : $id) != null ? _c : "" },
-      url: refreshUrl != null ? refreshUrl : refreshFormUrl
+      url: refreshUrl != null ? refreshUrl : refreshFormUrl,
+      track: false
     };
     return behavior;
   }
@@ -3564,11 +3633,14 @@ var getRequiredCheck = (required, messageFunctions) => (value) => {
   if (isArray(value) && value.length === 0) {
     return messageFunctions.required();
   }
-  if (value === "") {
-    return messageFunctions.required();
-  }
   return isNullish(value) ? messageFunctions.required() : null;
 };
+var getStringRequiredCheck = (required, messageFunctions) => (value) => {
+  if (!required) {
+    return null;
+  }
+  return isNullish(value) || value === "" ? messageFunctions.required() : null;
+};
 var getValidDateCheck = (required, messageFunctions) => (value) => {
   if (required && !isValidDate(value)) {
     return messageFunctions.required();
@@ -3830,9 +3902,16 @@ var schemaHasPlaceholder = (schema) => Boolean("placeholder" in schema && schema
 
 // src/domain/mappers/schema/numberSchemaToComponent.ts
 var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, model, localValue, required = false, onPersistAsync } = schemaMapperProps;
+  const {
+    schema,
+    model,
+    localValue,
+    required = false,
+    onPersistAsync,
+    onValueChange
+  } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate, onBehavior } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -3883,7 +3962,7 @@ var isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.form
 var isSchemaWithPersistAsync = (schema) => "persistAsync" in schema && !isNullish(schema.persistAsync);
 
 // src/domain/components/AllOfComponent.ts
-var createAllOfComponent = (allOfProps) => {
+var createAllOfComponent = (props) => {
   const {
     uid,
     schemaId,
@@ -3897,8 +3976,8 @@ var createAllOfComponent = (allOfProps) => {
     media,
     title,
     tags
-  } = allOfProps;
-  return {
+  } = props;
+  const component = {
     type: "all-of",
     kind: "input",
     uid,
@@ -3914,29 +3993,30 @@ var createAllOfComponent = (allOfProps) => {
     title,
     tags,
     getChildren() {
-      return this.components;
+      return component.components;
     },
     getSummary() {
-      return summariseFromChildren(this.getChildren());
+      return summariseFromChildren(component.getChildren());
     },
     async getSubmittableValue() {
-      return getSubmittableData(this.components);
+      return getSubmittableData(component.components);
     },
     getSubmittableValueSync() {
-      return getSubmittableDataSync(this.components);
+      return getSubmittableDataSync(component.components);
     },
     getLocalValue() {
-      return getLocalValues(this.components);
+      return getLocalValues(component.components);
     },
     validate() {
-      return hidden ? true : validateComponents(this.getChildren());
+      return hidden ? true : validateComponents(component.getChildren());
     }
   };
+  return component;
 };
 
 // src/domain/mappers/schema/allOfSchemaToComponent.ts
 var allOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { uid, schema, localValue, model, required, validationErrors } = schemaMapperProps;
+  const { uid, schema, localValue, model, required, validationErrors, onValueChange } = schemaMapperProps;
   const { allOf } = schema;
   const components = allOf.map(
     (childSchema, index) => mapSchemaToComponent(
@@ -3946,7 +4026,8 @@ var allOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
         model,
         localValue,
         required,
-        validationErrors
+        validationErrors,
+        onValueChange
       },
       mapperProps
     )
@@ -3957,8 +4038,8 @@ var allOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/components/RepeatableComponent.ts
-var createRepeatableComponent = (repeatableProps, onComponentUpdate) => {
-  const _a = repeatableProps, {
+var createRepeatableComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     schemaId,
     analyticsId,
@@ -3981,7 +4062,7 @@ var createRepeatableComponent = (repeatableProps, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
-  const repeatableComponent = __spreadProps(__spreadValues({
+  const component = __spreadProps(__spreadValues({
     uid,
     schemaId,
     analyticsId,
@@ -3996,37 +4077,34 @@ var createRepeatableComponent = (repeatableProps, onComponentUpdate) => {
       media: summary == null ? void 0 : summary.defaultMedia
     }
   }, componentProps), {
-    _update(updateFn) {
-      update(this, updateFn);
-    },
-    onEdit(itemIndex) {
-      this._update((draft) => {
+    editComponent(itemIndex) {
+      update(component, (draft) => {
         draft.editableComponent = createEditableComponent(
           draft.components[itemIndex].getLocalValue()
         );
         draft.editableIndex = itemIndex;
       });
     },
-    onAdd() {
-      this._update((draft) => {
+    addComponent() {
+      update(component, (draft) => {
         draft.editableComponent = createEditableComponent(null);
         draft.editableIndex = null;
         draft.errors = [];
       });
     },
-    onSave() {
+    saveComponent() {
       var _a2;
-      const isValid = (_a2 = this.editableComponent) == null ? void 0 : _a2.validate();
+      const isValid = (_a2 = component.editableComponent) == null ? void 0 : _a2.validate();
       if (!isValid) {
         return false;
       }
-      this._update((draft) => {
+      update(component, (draft) => {
         if (draft.editableComponent === null) {
           return;
         }
         if (draft.editableIndex === null) {
           const newComponent = __spreadValues({}, draft.editableComponent);
-          draft.components = [...this.components, newComponent];
+          draft.components = [...component.components, newComponent];
         } else {
           draft.components[draft.editableIndex] = __spreadProps(__spreadValues({}, draft.editableComponent), {
             uid: draft.components[draft.editableIndex].uid
@@ -4038,8 +4116,8 @@ var createRepeatableComponent = (repeatableProps, onComponentUpdate) => {
       onValueChange();
       return true;
     },
-    onRemove() {
-      this._update((draft) => {
+    removeComponent() {
+      update(component, (draft) => {
         if (draft.editableIndex === null) {
           return;
         }
@@ -4050,30 +4128,32 @@ var createRepeatableComponent = (repeatableProps, onComponentUpdate) => {
       onValueChange();
     },
     getChildren() {
-      return this.editableComponent !== null ? [...this.components, this.editableComponent] : this.components;
+      return component.editableComponent !== null ? [...component.components, component.editableComponent] : component.components;
     },
     async getSubmittableValue() {
-      return Promise.all(this.components.map(async (component) => component.getSubmittableValue()));
+      return Promise.all(
+        component.components.map(async (childComponent) => childComponent.getSubmittableValue())
+      );
     },
     getSubmittableValueSync() {
-      return this.components.map((component) => component.getSubmittableValueSync());
+      return component.components.map((childComponent) => childComponent.getSubmittableValueSync());
     },
     getSummary() {
       return summariser(null);
     },
     getLocalValue() {
-      return this.components.map((component) => component.getLocalValue());
+      return component.components.map((childComponent) => childComponent.getLocalValue());
     },
     validate() {
-      const messages = getValidationErrors(this.getLocalValue());
-      const childComponentsValid = validateComponents(this.getChildren());
-      this._update((draft) => {
+      const messages = getValidationErrors(component.getLocalValue());
+      const childComponentsValid = validateComponents(component.getChildren());
+      update(component, (draft) => {
         draft.errors = messages;
       });
       return messages.length === 0 && childComponentsValid;
     }
   });
-  return repeatableComponent;
+  return component;
 };
 
 // src/domain/mappers/schema/arraySchemaToComponent/arraySchemaToRepeatableComponent.ts
@@ -4085,7 +4165,8 @@ var arraySchemaToRepeatableComponent = (schemaMapperProps, mapperProps) => {
     schema,
     model: initialModel,
     required = false,
-    validationErrors
+    validationErrors,
+    onValueChange
   } = schemaMapperProps;
   const { items, addItemTitle, editItemTitle, maxItems, minItems, summary } = schema;
   const value = isArray(localValue) ? localValue : [];
@@ -4097,7 +4178,8 @@ var arraySchemaToRepeatableComponent = (schemaMapperProps, mapperProps) => {
         model: item,
         localValue: value == null ? void 0 : value[index],
         // TODO tests for this
-        validationErrors
+        validationErrors,
+        onValueChange
       },
       mapperProps
     )
@@ -4109,11 +4191,11 @@ var arraySchemaToRepeatableComponent = (schemaMapperProps, mapperProps) => {
       localValue: editableValue,
       model: localValueToJsonElement(editableValue),
       validationErrors: void 0,
-      required: true
+      required: true,
+      onValueChange
     },
     mapperProps
   );
-  const { onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(schema.validationMessages);
   return createRepeatableComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
@@ -4223,8 +4305,8 @@ var base64ToBytes = (base64) => {
 };
 
 // src/domain/components/MultiUploadInputComponent.ts
-var createMultiUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
-  const _a = uploadInputProps, {
+var createMultiUploadInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     checks,
@@ -4247,77 +4329,74 @@ var createMultiUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
   const persist = performPersistAsync ? getComponentMultiPersistAsync(update, performPersistAsync) : void 0;
-  const uploadComponent = __spreadValues({
+  const component = __spreadValues({
     type: "multi-upload",
     kind: "input",
     uid,
     id,
     format,
     files: [],
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
-      this.validate();
+      component.validate();
     },
     onFocus() {
     },
     // Noop
-    async onRemoveFile(index) {
+    async removeFile(index) {
       var _a2;
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.value.splice(index, 1);
         draft.files.splice(index, 1);
       });
       if (persist) {
-        (_a2 = this.persistedState[index]) == null ? void 0 : _a2.abortController.abort();
-        this._update((draft) => {
+        (_a2 = component.persistedState[index]) == null ? void 0 : _a2.abortController.abort();
+        update(component, (draft) => {
           draft.persistedState.splice(index, 1);
         });
       }
     },
-    async onInsertFile(index, file) {
+    async insertFile(index, file) {
       const fileErrors = getFileValidationErrors(file);
       const fileId = getRandomId();
       const base64Value = format === "base64" ? await toBase64(file) : null;
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.value.splice(index, 0, file);
         draft.files.splice(index, 0, { file, id: fileId, errors: fileErrors, base64Value });
         draft.errors = [];
       });
       if (persist) {
-        await persist(this, index, format === "blob" ? file : base64Value);
+        await persist(component, index, format === "blob" ? file : base64Value);
       }
       onValueChange();
       return fileId;
     },
     async getSubmittableValue() {
       if (persist) {
-        return Promise.all(this.persistedState.map(async ({ submission }) => submission));
+        return Promise.all(component.persistedState.map(async ({ submission }) => submission));
       }
-      return this.files.map(({ base64Value }) => base64Value);
+      return component.files.map(({ base64Value }) => base64Value);
     },
     getSubmittableValueSync() {
       if (persist) {
-        return this.persistedState.map(({ lastResponse }) => lastResponse);
+        return component.persistedState.map(({ lastResponse }) => lastResponse);
       }
-      return this.files.map(({ base64Value }) => base64Value);
+      return component.files.map(({ base64Value }) => base64Value);
     },
     getSummary() {
-      return summariser(this.getLocalValue().map(({ name }) => name));
+      return summariser(component.getLocalValue().map(({ name }) => name));
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
-      const errorMsgs = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errorMsgs = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errorMsgs;
       });
-      return errorMsgs.length === 0 && this.files.every(({ errors }) => errors.length === 0);
+      return errorMsgs.length === 0 && component.files.every(({ errors }) => errors.length === 0);
     }
   }, rest);
-  return uploadComponent;
+  return component;
 };
 
 // src/domain/features/persistAsync/getInitialPersistedState.ts
@@ -4400,7 +4479,7 @@ var schemaHasValidationMessages = (schema) => Boolean("validationMessages" in sc
 var arraySchemaToMultiUploadComponent = (schemaMapperProps, mapperProps) => {
   var _a;
   const { getErrorMessageFunctions } = mapperProps;
-  const { localValue, model, schema, required = false } = schemaMapperProps;
+  const { localValue, model, schema, required = false, onValueChange } = schemaMapperProps;
   const uploadSchema = getUploadSchema(schema.items);
   const { accepts, cameraConfig, maxSize } = uploadSchema;
   const { minItems, maxItems, title, validationMessages } = schema;
@@ -4421,7 +4500,6 @@ var arraySchemaToMultiUploadComponent = (schemaMapperProps, mapperProps) => {
     persistAsyncConfig,
     schema: __spreadProps(__spreadValues({}, uploadSchema), { hidden: (_a = schema.hidden) != null ? _a : uploadSchema.hidden, alert: schema.alert })
   });
-  const { onValueChange } = mapperProps;
   const performPersistAsync = persistAsyncConfig ? getPerformPersistAsyncFn(combinedSchemaProps.schema, persistAsyncConfig, mapperProps) : void 0;
   const value = performPersistAsync ? getValueForPersistAsync(localValue) : [];
   const persistedState = performPersistAsync && isArray(model) ? model.map((itemModel) => getInitialPersistedState(null, itemModel)) : [];
@@ -4471,8 +4549,8 @@ var getPersistAsyncConfig = (schema) => {
 var getValueForPersistAsync = (localValue) => isArray(localValue) && localValue.every(isFile) ? localValue : [];
 
 // src/domain/components/MultiSelectInputComponent.ts
-var createMultiSelectComponent = (multiSelectProps, onComponentUpdate) => {
-  const _a = multiSelectProps, {
+var createMultiSelectComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     checks,
     options,
@@ -4503,21 +4581,18 @@ var createMultiSelectComponent = (multiSelectProps, onComponentUpdate) => {
     selectedIndices,
     value: null
   }, rest), {
-    _update(updateFn) {
-      update(this, updateFn);
-    },
-    onSelect(indices) {
-      this._update((draft) => {
+    selectIndices(indices) {
+      update(component, (draft) => {
         draft.selectedIndices = indices;
         draft.errors = [];
       });
       void (schemaOnChange == null ? void 0 : schemaOnChange());
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
-      if (this.validate()) {
-        validateAsync == null ? void 0 : validateAsync(this, this.getLocalValue()).catch(() => {
+      if (component.validate()) {
+        validateAsync == null ? void 0 : validateAsync(component, component.getLocalValue()).catch(() => {
         });
       }
       onValueChange();
@@ -4530,17 +4605,17 @@ var createMultiSelectComponent = (multiSelectProps, onComponentUpdate) => {
     // Noop
     getLocalValue() {
       var _a2, _b;
-      return (_b = (_a2 = this.getSelectedChildren()) == null ? void 0 : _a2.map((child) => child.getLocalValue())) != null ? _b : null;
+      return (_b = (_a2 = component.getSelectedChildren()) == null ? void 0 : _a2.map((child) => child.getLocalValue())) != null ? _b : null;
     },
     validate() {
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0;
     },
     async getSubmittableValue() {
-      const selected = this.getSelectedChildren();
+      const selected = component.getSelectedChildren();
       if (selected) {
         return Promise.all(selected.map(async (child) => child.getSubmittableValue()));
       }
@@ -4548,14 +4623,14 @@ var createMultiSelectComponent = (multiSelectProps, onComponentUpdate) => {
     },
     getSubmittableValueSync() {
       var _a2, _b;
-      return (_b = (_a2 = this.getSelectedChildren()) == null ? void 0 : _a2.map((child) => child.getSubmittableValueSync())) != null ? _b : null;
+      return (_b = (_a2 = component.getSelectedChildren()) == null ? void 0 : _a2.map((child) => child.getSubmittableValueSync())) != null ? _b : null;
     },
     getSummary: () => ({}),
     getChildren() {
-      return this.children;
+      return component.children;
     },
     getSelectedChildren() {
-      return this.selectedIndices.map((i) => this.children[i]);
+      return component.selectedIndices.map((i) => component.children[i]);
     }
   });
   return component;
@@ -4575,7 +4650,8 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
     schema,
     model,
     required = false,
-    validationErrors: initialError
+    validationErrors: initialError,
+    onValueChange
   } = schemaMapperProps;
   const initialModel = model != null ? model : null;
   const options = schema.items.oneOf.map((childSchema, index) => {
@@ -4599,14 +4675,15 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
           model: initialModel,
           localValue,
           validationErrors: initialError,
-          required
+          required,
+          onValueChange
         },
         mapperProps
       )
     };
   });
   const { maxItems, minItems, title, validationMessages } = schema;
-  const { getErrorMessageFunctions, onBehavior, onValueChange, onComponentUpdate } = mapperProps;
+  const { getErrorMessageFunctions, onBehavior, onComponentUpdate } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -4637,7 +4714,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/components/TupleComponent.ts
-var createTupleComponent = (tupleProps) => {
+var createTupleComponent = (props) => {
   const {
     uid,
     schemaId,
@@ -4652,8 +4729,8 @@ var createTupleComponent = (tupleProps) => {
     summariser,
     title,
     tags
-  } = tupleProps;
-  return {
+  } = props;
+  const component = {
     type: "tuple",
     kind: "input",
     uid,
@@ -4669,26 +4746,27 @@ var createTupleComponent = (tupleProps) => {
     title,
     tags,
     getChildren() {
-      return this.components;
+      return component.components;
     },
     async getSubmittableValue() {
-      return Promise.all(this.components.map(async (child) => child.getSubmittableValue()));
+      return Promise.all(component.components.map(async (child) => child.getSubmittableValue()));
     },
     getSubmittableValueSync() {
-      return this.components.map((child) => child.getSubmittableValueSync());
+      return component.components.map((child) => child.getSubmittableValueSync());
     },
     getSummary() {
-      const summary = summariser(this.getLocalValue());
-      const childSummary = summariseFromChildren(this.getChildren());
+      const summary = summariser(component.getLocalValue());
+      const childSummary = summariseFromChildren(component.getChildren());
       return mergeSummaries(summary, childSummary);
     },
     getLocalValue() {
-      return this.components.map((child) => child.getLocalValue());
+      return component.components.map((child) => child.getLocalValue());
     },
     validate() {
-      return hidden ? true : validateComponents(this.getChildren());
+      return hidden ? true : validateComponents(component.getChildren());
     }
   };
+  return component;
 };
 
 // src/domain/mappers/schema/arraySchemaToComponent/arraySchemaToTupleComponent.ts
@@ -4699,7 +4777,8 @@ var arraySchemaToTupleComponent = (schemaMapperProps, mapperProps) => {
     schema,
     model: initialModel,
     required = false,
-    validationErrors
+    validationErrors,
+    onValueChange
   } = schemaMapperProps;
   const { items } = schema;
   const components = items.map(
@@ -4712,7 +4791,8 @@ var arraySchemaToTupleComponent = (schemaMapperProps, mapperProps) => {
           model: isArray(initialModel) ? (_a = initialModel[index]) != null ? _a : null : null,
           localValue: isArray(localValue) ? (_b = localValue[index]) != null ? _b : null : null,
           validationErrors: isArray(validationErrors) ? validationErrors[index] : void 0,
-          required
+          required,
+          onValueChange
         },
         mapperProps
       );
@@ -4743,8 +4823,8 @@ var isPersistAsyncWithUploadSchema = (schema) => isSchemaWithPersistAsync(schema
 var isArraySchemaListWithMultiSelect = (schema) => isArrayListSchema(schema) && "oneOf" in schema.items && schema.items.oneOf.every(isConstSchema);
 
 // src/domain/components/UploadInputComponent.ts
-var createUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
-  const _a = uploadInputProps, {
+var createUploadInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     checks,
@@ -4767,7 +4847,7 @@ var createUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
-  const uploadComponent = __spreadValues({
+  const component = __spreadValues({
     type: "upload",
     kind: "input",
     uid,
@@ -4775,18 +4855,15 @@ var createUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
     format,
     value,
     base64Value: null,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
-      this.validate();
+      component.validate();
     },
     onFocus() {
     },
     // Noop
-    async onUpload(updatedValue) {
-      const base64Value = this.format === "base64" && updatedValue ? await toBase64(updatedValue) : null;
-      this._update((draft) => {
+    async setValue(updatedValue) {
+      const base64Value = component.format === "base64" && updatedValue ? await toBase64(updatedValue) : null;
+      update(component, (draft) => {
         draft.errors = [];
         draft.value = updatedValue;
         draft.base64Value = base64Value;
@@ -4794,57 +4871,61 @@ var createUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
       void (schemaOnChange == null ? void 0 : schemaOnChange());
       onValueChange();
       await (onPersistAsync == null ? void 0 : onPersistAsync().catch((e) => {
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.value = null;
         });
         throw e;
       }));
     },
     async getSubmittableValue() {
-      const file = this.getLocalValue();
-      if (this.format === "base64" && file) {
+      const file = component.getLocalValue();
+      if (component.format === "base64" && file) {
         return toBase64(file);
       }
       return null;
     },
     getSubmittableValueSync() {
-      return this.base64Value;
+      return component.base64Value;
     },
     getSummary() {
       var _a2, _b;
-      return summariser((_b = (_a2 = this.getLocalValue()) == null ? void 0 : _a2.name) != null ? _b : null);
+      return summariser((_b = (_a2 = component.getLocalValue()) == null ? void 0 : _a2.name) != null ? _b : null);
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0;
     }
   }, rest);
   if (format === "base64" && value && !onPersistAsync) {
-    void initialiseBase64Value(uploadComponent);
-  }
-  return uploadComponent;
-};
-var initialiseBase64Value = async (uploadComponent) => {
-  const { format, value } = uploadComponent;
-  const base64Value = format === "base64" && value ? await toBase64(value) : null;
-  if (base64Value) {
-    uploadComponent._update((draft) => {
-      draft.base64Value = base64Value;
+    void toBase64(value).then((base64Value) => {
+      if (base64Value) {
+        update(component, (draft) => {
+          draft.base64Value = base64Value;
+        });
+      }
     });
   }
+  return component;
 };
 
 // src/domain/mappers/schema/blobSchemaToComponent.ts
 var blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
+  const {
+    schema,
+    localValue,
+    model,
+    required = false,
+    onPersistAsync,
+    onValueChange
+  } = schemaMapperProps;
   const { accepts, cameraConfig, maxSize, source, validationMessages } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const validLocalValue = isFile(localValue) ? localValue : null;
   const value = onPersistAsync && model !== null ? validLocalValue : null;
@@ -4866,8 +4947,8 @@ var blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/components/BooleanInputComponent.ts
-var createBooleanInputComponent = (booleanInputProps, onComponentUpdate) => {
-  const _a = booleanInputProps, {
+var createBooleanInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     value,
@@ -4888,56 +4969,53 @@ var createBooleanInputComponent = (booleanInputProps, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
-  const booleanComponent = __spreadValues({
+  const component = __spreadValues({
     type: "boolean",
     kind: "input",
     uid,
     id,
     autoComplete: "",
     value,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
     },
     // Noop
     onFocus() {
     },
     // Noop
-    onChange(updatedValue) {
-      this._update((draft) => {
+    setValue(updatedValue) {
+      update(component, (draft) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
       void (schemaOnChange == null ? void 0 : schemaOnChange());
       void (onPersistAsync == null ? void 0 : onPersistAsync().catch(() => {
       }));
-      validateAsync == null ? void 0 : validateAsync(this, this.getLocalValue()).catch(() => {
+      validateAsync == null ? void 0 : validateAsync(component, component.getLocalValue()).catch(() => {
       });
       onValueChange();
     },
     async getSubmittableValue() {
-      return this.getSubmittableValueSync();
+      return component.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      return this.getLocalValue();
+      return component.getLocalValue();
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate: () => true
   }, rest);
-  return booleanComponent;
+  return component;
 };
 
 // src/domain/mappers/schema/booleanSchemaToComponent.ts
 var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, onPersistAsync } = schemaMapperProps;
+  const { schema, localValue, model, onPersistAsync, onValueChange } = schemaMapperProps;
   const { default: defaultValue, additionalText, inlineAlert, supportingValues } = schema;
-  const { onComponentUpdate, onBehavior, onValueChange } = mapperProps;
+  const { onComponentUpdate, onBehavior } = mapperProps;
   const schemaOnChange = getSchemaOnChange(schema, onBehavior);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -4971,8 +5049,8 @@ var getValidModel = (model, defaultValue) => {
 };
 
 // src/domain/components/ConstComponent.ts
-var createConstComponent = (hiddenProps) => {
-  const { uid, schemaId, analyticsId, value, summary, layout, hidden, tags } = hiddenProps;
+var createConstComponent = (props) => {
+  const { uid, schemaId, analyticsId, value, summary, layout, hidden, tags } = props;
   return {
     type: "const",
     kind: "input",
@@ -5015,8 +5093,8 @@ var getConstLayout = (uid, mapperProps, layout, alert) => {
 };
 
 // src/domain/components/IntegerInputComponent.ts
-var createIntegerInputComponent = (integerInputProps, onComponentUpdate) => {
-  const _a = integerInputProps, {
+var createIntegerInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     checks,
@@ -5038,33 +5116,32 @@ var createIntegerInputComponent = (integerInputProps, onComponentUpdate) => {
     "summariser"
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
+  const onValueChangeDebounced = debounce(onValueChange, 1e3);
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const integerComponent = __spreadValues({
+  const component = __spreadValues({
     type: "integer",
     kind: "input",
     uid,
     id,
     value,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
-      const isValid = this.validate();
+      const isValid = component.validate();
       performOnChange == null ? void 0 : performOnChange.flush();
       if (isValid) {
         void (onPersistAsync == null ? void 0 : onPersistAsync().catch(() => {
         }));
         validateAsync == null ? void 0 : validateAsync.flush();
       }
+      onValueChangeDebounced.flush();
     },
     onFocus() {
     },
     // Noop
-    onChange(updatedValue) {
-      const prevValue = this.value;
-      this._update((draft) => {
+    setValue(updatedValue) {
+      const prevValue = component.value;
+      update(component, (draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -5072,39 +5149,46 @@ var createIntegerInputComponent = (integerInputProps, onComponentUpdate) => {
       performOnChange == null ? void 0 : performOnChange(prevValue, updatedValue);
       const isValid = getValidationErrors(updatedValue).length === 0;
       if (isValid) {
-        validateAsync == null ? void 0 : validateAsync(this, updatedValue);
+        validateAsync == null ? void 0 : validateAsync(component, updatedValue);
       }
-      onValueChange();
+      onValueChangeDebounced();
     },
     async getSubmittableValue() {
-      return this.getSubmittableValueSync();
+      return component.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
       var _a2;
-      return (_a2 = this.getLocalValue()) != null ? _a2 : null;
+      return (_a2 = component.getLocalValue()) != null ? _a2 : null;
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0;
     }
   }, rest);
-  return integerComponent;
+  return component;
 };
 
 // src/domain/mappers/schema/integerSchemaToComponent.ts
 var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
+  const {
+    schema,
+    localValue,
+    model,
+    required = false,
+    onPersistAsync,
+    onValueChange
+  } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate, onBehavior } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -5155,7 +5239,7 @@ var createFormattedValueComponent = (props, onComponentUpdate) => {
     schemaOnChange
   } = props;
   const update = getInputUpdateFunction(onComponentUpdate);
-  return {
+  const component = {
     type: "formatted-value",
     kind: "input",
     uid,
@@ -5173,27 +5257,28 @@ var createFormattedValueComponent = (props, onComponentUpdate) => {
     tags,
     value,
     async getSubmittableValue() {
-      return this.getSubmittableValueSync();
+      return component.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      return this.getLocalValue();
+      return component.getLocalValue();
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
       return true;
     },
-    onChange(newValue) {
-      update(this, (draft) => {
+    setValue(newValue) {
+      update(component, (draft) => {
         draft.value = newValue;
       });
       void (schemaOnChange == null ? void 0 : schemaOnChange());
     }
   };
+  return component;
 };
 
 // src/domain/mappers/schema/objectSchemaToComponent/objectSchemaToFormattedValueComponent.ts
@@ -5212,8 +5297,8 @@ var objectSchemaToFormattedValueComponent = (schemaMapperProps, mapperProps) =>
 };
 
 // src/domain/components/MoneyInputComponent.ts
-var createMoneyInputComponent = (moneyInputProps, onComponentUpdate) => {
-  const _a = moneyInputProps, {
+var createMoneyInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     id,
     uid,
     schemaId,
@@ -5254,7 +5339,7 @@ var createMoneyInputComponent = (moneyInputProps, onComponentUpdate) => {
   ]);
   const getValidationErrors = getLocalValueValidator(checks);
   const update = getInputUpdateFunction(onComponentUpdate);
-  const moneyComponent = __spreadValues({
+  const component = __spreadValues({
     type: "money-input",
     kind: "input",
     id,
@@ -5273,9 +5358,6 @@ var createMoneyInputComponent = (moneyInputProps, onComponentUpdate) => {
       [amountKey]: amountComponent.getLocalValue(),
       [currencyKey]: currencyComponent.getLocalValue()
     },
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     components: {
       amount: amountComponent,
       currency: currencyComponent
@@ -5299,11 +5381,11 @@ var createMoneyInputComponent = (moneyInputProps, onComponentUpdate) => {
       }, extraValues);
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     validate() {
       const errors = getValidationErrors(amountComponent.getLocalValue());
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return amountComponent.validate() && currencyComponent.validate() && errors.length === 0;
@@ -5314,11 +5396,11 @@ var createMoneyInputComponent = (moneyInputProps, onComponentUpdate) => {
     onFocus() {
     }
   }, rest);
-  return moneyComponent;
+  return component;
 };
 
 // src/domain/components/ObjectComponent.ts
-var createObjectComponent = (objectProps) => {
+var createObjectComponent = (props) => {
   const {
     uid,
     schemaId,
@@ -5334,8 +5416,8 @@ var createObjectComponent = (objectProps) => {
     summariser,
     title,
     tags
-  } = objectProps;
-  return {
+  } = props;
+  const component = {
     type: "object",
     kind: "input",
     uid,
@@ -5351,12 +5433,12 @@ var createObjectComponent = (objectProps) => {
     title,
     tags,
     getChildren() {
-      return displayOrder.map((propName) => this.componentMap[propName]);
+      return displayOrder.map((propName) => component.componentMap[propName]);
     },
     async getSubmittableValue() {
       return Promise.all(
         displayOrder.map(
-          async (propName) => this.componentMap[propName].getSubmittableValue().then((value) => ({ value, propName }))
+          async (propName) => component.componentMap[propName].getSubmittableValue().then((value) => ({ value, propName }))
         )
       ).then(
         (values) => values.reduce(
@@ -5368,24 +5450,25 @@ var createObjectComponent = (objectProps) => {
     getSubmittableValueSync() {
       return mergeChildrenValues(
         displayOrder,
-        (propName) => this.componentMap[propName].getSubmittableValueSync()
+        (propName) => component.componentMap[propName].getSubmittableValueSync()
       );
     },
     getSummary() {
-      const summary = summariser(this.getLocalValue());
-      const childSummary = summariseFromChildren(this.getChildren());
+      const summary = summariser(component.getLocalValue());
+      const childSummary = summariseFromChildren(component.getChildren());
       return mergeSummaries(summary, childSummary);
     },
     getLocalValue() {
       return mergeChildrenValues(
         displayOrder,
-        (propName) => this.componentMap[propName].getLocalValue()
+        (propName) => component.componentMap[propName].getLocalValue()
       );
     },
     validate() {
-      return hidden ? true : validateComponents(this.getChildren());
+      return hidden ? true : validateComponents(component.getChildren());
     }
   };
+  return component;
 };
 var mergeChildrenValues = (displayOrder, getComponentValue) => displayOrder.reduce((acc, propName) => {
   const componentValue = getComponentValue(propName);
@@ -5427,7 +5510,7 @@ var objectSchemaToObjectComponent = (schemaMapperProps, mapperProps) => {
   }));
 };
 var createComponentMap = (schemaMapperProps, mapperProps, uidPrefix) => {
-  const { uid, localValue, schema, model, validationErrors } = schemaMapperProps;
+  const { uid, localValue, schema, model, validationErrors, onValueChange } = schemaMapperProps;
   const { $id, displayOrder, properties, required } = schema;
   const initialReducerValue = {};
   return displayOrder.reduce((acc, propName) => {
@@ -5444,7 +5527,8 @@ var createComponentMap = (schemaMapperProps, mapperProps, uidPrefix) => {
           model: isObjectModel(model) ? model[propName] : null,
           localValue: isObjectLocalValue(localValue) ? localValue[propName] : null,
           required: (_a = required == null ? void 0 : required.includes(propName)) != null ? _a : false,
-          validationErrors: isObject(validationErrors) ? validationErrors[propName] : void 0
+          validationErrors: isObject(validationErrors) ? validationErrors[propName] : void 0,
+          onValueChange
         },
         mapperProps
       )
@@ -5571,8 +5655,8 @@ var isPartialModelMatch = (localModel, incomingModel) => {
 var nonNullishKeys = (model) => Object.keys(model).filter((key) => !isNullish(model[key]));
 
 // src/domain/components/SelectInputComponent.ts
-var createSelectInputComponent = (selectProps, onComponentUpdate) => {
-  const _a = selectProps, { uid, checks, initialModel, options, schemaOnChange, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "checks", "initialModel", "options", "schemaOnChange", "onValueChange", "summariser"]);
+var createSelectInputComponent = (props, onComponentUpdate) => {
+  const _a = props, { uid, checks, initialModel, options, schemaOnChange, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "checks", "initialModel", "options", "schemaOnChange", "onValueChange", "summariser"]);
   const children = options.map((option) => option.component);
   const matchingOptions = options.map(
     (option) => isPartialModelMatch(option.component.getSubmittableValueSync(), initialModel)
@@ -5589,54 +5673,51 @@ var createSelectInputComponent = (selectProps, onComponentUpdate) => {
     selectedIndex,
     value: null
   }, rest), {
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     getChildren() {
-      return this.children;
+      return component.children;
     },
     getSelectedChild() {
-      return this.selectedIndex !== null ? this.children[this.selectedIndex] : null;
+      return component.selectedIndex !== null ? component.children[component.selectedIndex] : null;
     },
     async getSubmittableValue() {
       var _a2, _b;
-      return (_b = await ((_a2 = this.getSelectedChild()) == null ? void 0 : _a2.getSubmittableValue())) != null ? _b : null;
+      return (_b = await ((_a2 = component.getSelectedChild()) == null ? void 0 : _a2.getSubmittableValue())) != null ? _b : null;
     },
     getSubmittableValueSync() {
       var _a2, _b;
-      return (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.getSubmittableValueSync()) != null ? _b : null;
+      return (_b = (_a2 = component.getSelectedChild()) == null ? void 0 : _a2.getSubmittableValueSync()) != null ? _b : null;
     },
     getSummary() {
       var _a2, _b;
-      return (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.getSummary()) != null ? _b : {};
+      return (_b = (_a2 = component.getSelectedChild()) == null ? void 0 : _a2.getSummary()) != null ? _b : {};
     },
     getLocalValue() {
       var _a2, _b;
-      return (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.getLocalValue()) != null ? _b : null;
+      return (_b = (_a2 = component.getSelectedChild()) == null ? void 0 : _a2.getLocalValue()) != null ? _b : null;
     },
     onBlur() {
-      this.validate();
+      component.validate();
     },
     onFocus() {
     },
     // noop
-    onSelect(updatedIndex) {
-      if (updatedIndex === this.selectedIndex) {
+    selectIndex(updatedIndex) {
+      if (updatedIndex === component.selectedIndex) {
         return;
       }
       if (updatedIndex !== null) {
-        selectProps.trackEvent("OneOf Option Selected", {
-          schema: this.analyticsId,
-          selectedOption: this.children[updatedIndex].analyticsId
+        props.trackEvent("OneOf Option Selected", {
+          schema: component.analyticsId,
+          selectedOption: component.children[updatedIndex].analyticsId
         });
-        if (this.analyticsId) {
-          selectProps.trackEvent("OneOf Selected", {
-            oneOfId: this.analyticsId,
-            schemaId: this.children[updatedIndex].analyticsId
+        if (component.analyticsId) {
+          props.trackEvent("OneOf Selected", {
+            oneOfId: component.analyticsId,
+            schemaId: component.children[updatedIndex].analyticsId
           });
         }
       }
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.errors = [];
         draft.selectedIndex = updatedIndex;
       });
@@ -5645,9 +5726,9 @@ var createSelectInputComponent = (selectProps, onComponentUpdate) => {
     },
     validate() {
       var _a2, _b;
-      const validChild = (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.validate()) != null ? _b : true;
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const validChild = (_b = (_a2 = component.getSelectedChild()) == null ? void 0 : _a2.validate()) != null ? _b : true;
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0 && validChild;
@@ -5665,7 +5746,8 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schema,
     model,
     validationErrors: initialError,
-    required = false
+    required = false,
+    onValueChange
   } = schemaMapperProps;
   const initialModel = (_a = model != null ? model : schema.default) != null ? _a : null;
   const options = schema.oneOf.map((childSchema, index) => {
@@ -5700,13 +5782,14 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
           model: initialModel,
           localValue,
           validationErrors: initialError,
-          required
+          required,
+          onValueChange
         },
         mapperProps
       )
     };
   });
-  const { getErrorMessageFunctions, onComponentUpdate, trackEvent, onBehavior, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate, trackEvent, onBehavior } = mapperProps;
   const { validationMessages } = schema;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   return createSelectInputComponent(
@@ -5743,15 +5826,24 @@ var isExactLocalValueMatch = (valueA, valueB) => {
 
 // src/domain/components/PersistAsyncComponent.ts
 var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, onComponentUpdate) => {
-  const { uid, analyticsId, schemaId, component, hidden, model, localValue, tags } = props;
+  const {
+    uid,
+    analyticsId,
+    schemaId,
+    component: childComponent,
+    hidden,
+    model,
+    localValue,
+    tags
+  } = props;
   const update = getInputUpdateFunction(onComponentUpdate);
-  const paComponent = {
+  const component = {
     type: "persist-async",
     kind: "input",
     uid,
     analyticsId,
     schemaId,
-    component,
+    component: childComponent,
     hidden,
     status: "idle",
     lastSubmitted: model != null ? localValue != null ? localValue : null : null,
@@ -5760,33 +5852,30 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, o
     abortController: new AbortController(),
     errors: [],
     tags,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     validate() {
-      return this.component.validate();
+      return component.component.validate();
     },
     getLocalValue() {
-      return this.component.getLocalValue();
+      return component.component.getLocalValue();
     },
     async getSubmittableValue() {
-      return this.persist();
+      return component.persist();
     },
     getSubmittableValueSync() {
-      return this.lastResponse;
+      return component.lastResponse;
     },
     getSummary() {
-      return this.component.getSummary();
+      return component.component.getSummary();
     },
     async persist() {
-      const childLocalValue = this.component.getLocalValue();
-      if (isExactLocalValueMatch(childLocalValue, this.lastSubmitted)) {
-        return this.submission;
+      const childLocalValue = component.component.getLocalValue();
+      if (isExactLocalValueMatch(childLocalValue, component.lastSubmitted)) {
+        return component.submission;
       }
-      const newAbortController = abortAndResetController(this.abortController);
+      const newAbortController = abortAndResetController(component.abortController);
       if (childLocalValue == null || childLocalValue === "") {
         const resolvedNull = Promise.resolve(null);
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.abortController = newAbortController;
           draft.lastResponse = null;
           draft.lastSubmitted = childLocalValue;
@@ -5799,7 +5888,7 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, o
       }
       const { signal } = newAbortController;
       const newSubmission = performPersistAsync({ value: childLocalValue, signal }).then((token) => {
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.lastResponse = token;
           draft.errors = [];
           draft.status = "success";
@@ -5810,18 +5899,18 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, o
         if (error instanceof DOMException && error.name === "AbortError") {
           return null;
         }
-        this._update((draft) => {
+        update(component, (draft) => {
           draft.lastResponse = null;
           draft.lastSubmitted = null;
           draft.submission = Promise.resolve(null);
           draft.status = "error";
-          if (this.component.type !== "upload") {
+          if (component.component.type !== "upload") {
             draft.errors = error instanceof Error ? [error.message] : [];
           }
         });
         throw error;
       });
-      this._update((draft) => {
+      update(component, (draft) => {
         draft.abortController = newAbortController;
         draft.lastSubmitted = childLocalValue;
         draft.lastResponse = null;
@@ -5832,7 +5921,7 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, o
       return newSubmission;
     }
   };
-  return paComponent;
+  return component;
 };
 
 // src/domain/mappers/schema/persistAsyncSchemaToComponent.ts
@@ -5871,8 +5960,8 @@ var persistAsyncSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/components/DateInputComponent.ts
-var createDateInputComponent = (textInputProps, onComponentUpdate) => {
-  const _a = textInputProps, {
+var createDateInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     checks,
@@ -5896,28 +5985,25 @@ var createDateInputComponent = (textInputProps, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
-  const dateInputComponent = __spreadValues({
+  const component = __spreadValues({
     type: "date",
     kind: "input",
     uid,
     id,
     value,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
-      const isValid = this.validate();
+      const isValid = component.validate();
       if (isValid) {
-        validateAsync == null ? void 0 : validateAsync(this, this.getLocalValue()).catch(() => {
+        validateAsync == null ? void 0 : validateAsync(component, component.getLocalValue()).catch(() => {
         });
       }
     },
     onFocus() {
     },
     // Noop
-    onChange(updatedValue) {
-      const prevValue = this.value;
-      this._update((draft) => {
+    setValue(updatedValue) {
+      const prevValue = component.value;
+      update(component, (draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -5932,29 +6018,29 @@ var createDateInputComponent = (textInputProps, onComponentUpdate) => {
       }
     },
     async getSubmittableValue() {
-      return this.getSubmittableValueSync();
+      return component.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      if (isValidDate(this.getLocalValue())) {
-        return this.getLocalValue();
+      if (isValidDate(component.getLocalValue())) {
+        return component.getLocalValue();
       }
       return null;
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0;
     }
   }, rest);
-  return dateInputComponent;
+  return component;
 };
 
 // src/domain/mappers/utils/suggestions-utils.ts
@@ -5981,7 +6067,14 @@ var mapStringSchemaSuggestions = (suggestions, logEvent) => {
 // src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToDateInputComponent.ts
 var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
   var _a;
-  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
+  const {
+    schema,
+    localValue,
+    model,
+    required = false,
+    onPersistAsync,
+    onValueChange
+  } = schemaMapperProps;
   const {
     autocompleteHint,
     default: defaultValue,
@@ -5989,7 +6082,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     maximum: maximumDate,
     suggestions
   } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate, onBehavior } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(schema.validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -6002,7 +6095,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       autoComplete: getAutocompleteString(autocompleteHint),
       checks: schema.hidden ? [] : [
-        getRequiredCheck(required, errorMessageFunctions),
+        getStringRequiredCheck(required, errorMessageFunctions),
         getValidDateCheck(required, errorMessageFunctions),
         getAboveMaximumDateCheck(schema, errorMessageFunctions),
         getBelowMinimumDateCheck(schema, errorMessageFunctions)
@@ -6038,9 +6131,9 @@ var getValidDate = (model) => {
 // src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToUploadInputComponent.ts
 var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
   var _a;
-  const { schema, localValue, model, required = false } = schemaMapperProps;
+  const { schema, localValue, model, required = false, onValueChange } = schemaMapperProps;
   const { accepts, autocompleteHint, cameraConfig, hidden, maxSize, source, validationMessages } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate, onBehavior } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const validLocalValue = isFile(localValue) ? localValue : null;
   const value = (_a = getFileFromModel(model)) != null ? _a : validLocalValue;
@@ -6068,8 +6161,8 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
 var getFileFromModel = (model) => isString(model) ? base64dataUrltoFile(model, "") : null;
 
 // src/domain/components/TextInputComponent.ts
-var createTextInputComponent = (textInputProps, onComponentUpdate) => {
-  const _a = textInputProps, {
+var createTextInputComponent = (props, onComponentUpdate) => {
+  const _a = props, {
     uid,
     id,
     checks,
@@ -6091,33 +6184,32 @@ var createTextInputComponent = (textInputProps, onComponentUpdate) => {
     "value"
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
+  const onValueChangeDebounced = debounce(onValueChange, 1e3);
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const inputComponent = __spreadValues({
+  const component = __spreadValues({
     type: "text",
     kind: "input",
     uid,
     id,
     value,
-    _update(updateFn) {
-      update(this, updateFn);
-    },
     onBlur() {
-      const isValid = this.validate();
+      const isValid = component.validate();
       performOnChange == null ? void 0 : performOnChange.flush();
       if (isValid) {
         void (onPersistAsync == null ? void 0 : onPersistAsync().catch(() => {
         }));
         validateAsync == null ? void 0 : validateAsync.flush();
       }
+      onValueChangeDebounced.flush();
     },
     onFocus() {
     },
     // Noop
-    onChange(updatedValue) {
-      const prevValue = this.value;
-      this._update((draft) => {
+    setValue(updatedValue) {
+      const prevValue = component.value;
+      update(component, (draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -6125,39 +6217,46 @@ var createTextInputComponent = (textInputProps, onComponentUpdate) => {
       performOnChange == null ? void 0 : performOnChange(prevValue, updatedValue);
       const isValid = getValidationErrors(updatedValue).length === 0;
       if (isValid) {
-        validateAsync == null ? void 0 : validateAsync(this, updatedValue);
+        validateAsync == null ? void 0 : validateAsync(component, updatedValue);
       }
       if (!updatedValue) {
         validateAsync == null ? void 0 : validateAsync.cancel();
       }
-      onValueChange();
+      onValueChangeDebounced();
     },
     async getSubmittableValue() {
-      return this.getSubmittableValueSync();
+      return component.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      return this.getLocalValue() || null;
+      return component.getLocalValue() || null;
     },
     getSummary() {
-      return summariser(this.getLocalValue());
+      return summariser(component.getLocalValue());
     },
     getLocalValue() {
-      return this.value;
+      return component.value;
     },
     validate() {
-      const errors = getValidationErrors(this.getLocalValue());
-      this._update((draft) => {
+      const errors = getValidationErrors(component.getLocalValue());
+      update(component, (draft) => {
         draft.errors = errors;
       });
       return errors.length === 0;
     }
   }, rest);
-  return inputComponent;
+  return component;
 };
 
 // src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToTextInputComponent.ts
 var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
+  const {
+    schema,
+    localValue,
+    model,
+    required = false,
+    onPersistAsync,
+    onValueChange
+  } = schemaMapperProps;
   const {
     autocapitalization,
     autocompleteHint,
@@ -6171,7 +6270,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
     suggestions,
     validationMessages
   } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange, logEvent } = mapperProps;
+  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, logEvent } = mapperProps;
   const controlForLegacyFormat = getControlForLegacyFormat(format);
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
@@ -6186,7 +6285,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
       autocapitalization,
       autoComplete: getAutocompleteString(autocompleteHint),
       checks: schema.hidden ? [] : [
-        getRequiredCheck(required, errorMessageFunctions),
+        getStringRequiredCheck(required, errorMessageFunctions),
         getAboveMaxLengthCheck(schema, errorMessageFunctions),
         getBelowMinLengthCheck(schema, errorMessageFunctions),
         getNotAdheringToPatternCheck(schema, errorMessageFunctions, { logEvent })
@@ -6285,6 +6384,8 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/mappers/mapStepSchemas.ts
+var noop2 = () => {
+};
 var mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
   return step.schemas.map(
     (schema, i) => {
@@ -6297,7 +6398,8 @@ var mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
           model: (_a = step.model) != null ? _a : null,
           localValue: stepLocalValue,
           validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
-          required: true
+          required: true,
+          onValueChange: noop2
         },
         mapperProps
       );
@@ -6476,8 +6578,10 @@ var mapStepToComponent = (_a) => {
     stepPrefetch,
     step,
     referencedSchemaIds,
+    features,
     onComponentUpdate,
     trackEvent,
+    logEvent,
     onBehavior,
     onLoad: stepOnLoad
   });
@@ -6493,7 +6597,7 @@ var getReferencedSchemaId = (step) => {
 var mapBackNavigation = (navigation, onBehavior, isNativeBackEnabled) => {
   var _a;
   const backNavigation = (_a = navigation == null ? void 0 : navigation.back) != null ? _a : navigation == null ? void 0 : navigation.backButton;
-  const backBehavior = { type: "back", action: backNavigation == null ? void 0 : backNavigation.action };
+  const backBehavior = { type: "back", action: backNavigation == null ? void 0 : backNavigation.action, track: false };
   return backNavigation || isNativeBackEnabled ? {
     title: backNavigation == null ? void 0 : backNavigation.title,
     onClick: () => {
@@ -6709,10 +6813,10 @@ var executePoll = async (props) => {
         }
         case "modal": {
           assertModalResponseBody(body);
-          return { type: "behavior", behavior: __spreadValues({ type: "modal" }, body) };
+          return { type: "behavior", behavior: __spreadProps(__spreadValues({ type: "modal" }, body), { track: false }) };
         }
         case "no-op": {
-          return { type: "behavior", behavior: { type: "none" } };
+          return { type: "behavior", behavior: { type: "none", track: false } };
         }
         case "subflow": {
           assertSubflowResponseBody(body);
@@ -6737,7 +6841,8 @@ var executePoll = async (props) => {
 };
 var actionResponseBodyToBehavior = (body) => ({
   type: "non-merging-action",
-  action: body.action
+  action: body.action,
+  track: false
 });
 
 // src/controller/executeRefresh.ts
@@ -6792,36 +6897,30 @@ var executeRefresh = async (props) => {
 };
 
 // src/domain/components/SubflowComponent.ts
-var createSubflowComponent = (subflowProps, onComponentUpdate) => {
-  switch (subflowProps.subflowType) {
+var createSubflowComponent = (props, onComponentUpdate) => {
+  switch (props.subflowType) {
     case "dynamic":
-      return createDynamicSubflowComponent(subflowProps, onComponentUpdate);
+      return createDynamicSubflowComponent(props, onComponentUpdate);
     case "native":
-      return createNativeSubflowComponent(subflowProps);
+      return createNativeSubflowComponent(props);
   }
 };
-var createDynamicSubflowComponent = (subflowProps, onComponentUpdate) => {
+var createDynamicSubflowComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  const subflowComponent = __spreadProps(__spreadValues({
+  return __spreadValues({
     uid: `subflow-dynamic-${getRandomId()}`,
     type: "subflow",
     subflowType: "dynamic",
     kind: "layout"
-  }, subflowProps), {
-    _update(updateFn) {
-      update(this, updateFn);
-    }
-  });
-  return subflowComponent;
+  }, props);
 };
-var createNativeSubflowComponent = (subflowProps) => {
-  const subflowComponent = __spreadValues({
+var createNativeSubflowComponent = (props) => {
+  return __spreadValues({
     uid: `subflow-native-${getRandomId()}`,
     type: "subflow",
     subflowType: "native",
     kind: "layout"
-  }, subflowProps);
-  return subflowComponent;
+  }, props);
 };
 
 // src/controller/executeSubflow.ts
@@ -6969,8 +7068,7 @@ var createFlowController = (props) => {
     onNotification,
     onError,
     onEvent,
-    onLog,
-    onValueChange
+    onLog
   } = props;
   const httpClient = getHttpClientWithCapabilities(props.httpClient, nativeSubflowHandlers);
   const rootComponent = createRootDomainComponent(
@@ -7011,8 +7109,7 @@ var createFlowController = (props) => {
     httpClient,
     onBehavior,
     onLink,
-    onPoll,
-    onValueChange
+    onPoll
   });
   const createStepComponent2 = (newStep, etag, localValue) => {
     rootComponent.stop();
@@ -7075,6 +7172,7 @@ var createFlowController = (props) => {
   };
   const onBehavior = async (behavior) => {
     var _a;
+    trackBehaviorTriggered(trackEvent, behavior);
     switch (behavior.type) {
       case "download": {
         try {
@@ -7335,6 +7433,7 @@ var createFlowController = (props) => {
     switch (command.type) {
       case "replace-step":
         createStep(command.step, command.etag);
+        trackCoreEvent("Step Shown", { isFirstStep: false });
         return true;
       case "behavior":
         void onBehavior(command.behavior);
@@ -7677,6 +7776,28 @@ var formatDateOptions = {
   dateStyle: "long"
 };
 
+// src/renderers/mappers/utils/mapCallToAction.ts
+var mapCallToAction = (_a) => {
+  var _b = _a, {
+    hrefWithTracking
+  } = _b, cta = __objRest(_b, [
+    "hrefWithTracking"
+  ]);
+  return __spreadProps(__spreadValues({}, cta), {
+    getAnchorProps: hrefWithTracking
+  });
+};
+var mapCallToActionOptional = (cta) => cta ? mapCallToAction(cta) : void 0;
+var mapAdditionalInfo2 = (info) => {
+  if (info) {
+    const _a = info, { hrefWithTracking } = _a, rest = __objRest(_a, ["hrefWithTracking"]);
+    return __spreadProps(__spreadValues({}, rest), {
+      getAnchorProps: hrefWithTracking
+    });
+  }
+  return void 0;
+};
+
 // src/renderers/mappers/utils/pick.ts
 function pick(obj, ...keys) {
   const result = {};
@@ -7687,18 +7808,9 @@ function pick(obj, ...keys) {
 }
 
 // src/renderers/mappers/alertComponentToProps.ts
-var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(
-  component,
-  "uid",
-  "analyticsId",
-  "type",
-  "callToAction",
-  "context",
-  "control",
-  "margin",
-  "markdown",
-  "tags"
-)), rendererMapperProps);
+var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "context", "control", "margin", "markdown", "tags")), {
+  callToAction: mapCallToActionOptional(component.callToAction)
+}), rendererMapperProps);
 
 // src/renderers/mappers/allOfComponentToProps.ts
 var allOfComponentToProps = (component, rendererMapperProps) => {
@@ -7750,48 +7862,32 @@ var getValidationState = (errors, validationAsyncState) => {
 // src/renderers/mappers/utils/inputComponentToProps.ts
 var inputComponentToProps = (component, type) => {
   var _a;
-  const {
-    uid,
-    analyticsId,
-    control,
-    description,
-    disabled,
-    errors,
-    help,
-    id,
-    media,
-    placeholder,
-    required,
-    title,
-    tags,
-    validationAsyncState,
-    inlineAlert,
-    onBlur,
-    onFocus
-  } = component;
+  const { errors, validationAsyncState } = component;
   const { messages } = validationAsyncState != null ? validationAsyncState : {};
-  return {
-    uid,
-    analyticsId,
+  return __spreadProps(__spreadValues({}, pick(
+    component,
+    "uid",
+    "analyticsId",
+    "control",
+    "description",
+    "disabled",
+    "help",
+    "id",
+    "media",
+    "placeholder",
+    "required",
+    "title",
+    "tags",
+    "inlineAlert",
+    "onBlur",
+    "onFocus"
+  )), {
     type,
-    control,
-    description,
-    disabled,
     error: (_a = messages == null ? void 0 : messages.error) != null ? _a : errors == null ? void 0 : errors[0],
-    help,
-    id,
-    media,
-    placeholder,
-    required,
-    title,
-    tags,
     value: component.getLocalValue(),
     validationState: getValidationState(errors, validationAsyncState),
-    inlineAlert,
-    fieldLoadingState: getFieldLoadingState(component),
-    onBlur: onBlur.bind(component),
-    onFocus: onFocus.bind(component)
-  };
+    fieldLoadingState: getFieldLoadingState(component)
+  });
 };
 var getFieldLoadingState = (component) => {
   const { validationAsyncState } = component;
@@ -7804,12 +7900,9 @@ var getFieldLoadingState = (component) => {
 // src/renderers/mappers/booleanInputComponentToProps.ts
 var booleanInputComponentToProps = (component, rendererMapperProps) => {
   var _a;
-  return __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-checkbox")), rendererMapperProps), {
-    additionalText: component.additionalText,
-    supportingValues: component.supportingValues,
-    inlineAlert: component.inlineAlert,
-    value: (_a = component.value) != null ? _a : false,
-    onChange: component.onChange.bind(component)
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-checkbox")), rendererMapperProps), pick(component, "additionalText", "supportingValues", "inlineAlert")), {
+    onChange: component.setValue,
+    value: (_a = component.value) != null ? _a : false
   });
 };
 
@@ -7858,30 +7951,14 @@ var buttonComponentToProps = (component, rendererMapperProps) => {
 };
 
 // src/renderers/mappers/columnsComponentToProps.ts
-var columnsComponentToProps = ({
-  uid,
-  analyticsId,
-  bias,
-  control,
-  margin,
-  tags,
-  startComponents,
-  endComponents
-}, rendererMapperProps) => {
-  const startChildrenProps = startComponents.map(
+var columnsComponentToProps = (component, rendererMapperProps) => {
+  const startChildrenProps = component.startComponents.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  const endChildrenProps = endComponents.map(
+  const endChildrenProps = component.endComponents.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  return __spreadProps(__spreadValues({}, rendererMapperProps), {
-    uid,
-    analyticsId,
-    type: "columns",
-    bias,
-    control,
-    margin,
-    tags,
+  return __spreadProps(__spreadValues(__spreadValues({}, rendererMapperProps), pick(component, "uid", "analyticsId", "type", "bias", "control", "margin", "tags")), {
     startChildren: startChildrenProps.map(rendererMapperProps.render),
     endChildren: endChildrenProps.map(rendererMapperProps.render),
     startChildrenProps,
@@ -7905,29 +7982,24 @@ var constComponentToProps = (component, rendererMapperProps) => {
 // src/renderers/mappers/containerComponentToProps.ts
 var containerComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadValues({
-    type: "container",
-    uid: component.uid,
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(component, "type", "uid")), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
-  }, rendererMapperProps);
+  }), rendererMapperProps);
 };
 
 // src/renderers/mappers/dateInputComponentToProps.ts
-var dateInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-date")), rendererMapperProps), {
-  autoComplete: component.autoComplete,
-  minimumDate: component.minimumDate,
-  maximumDate: component.maximumDate,
-  suggestions: component.suggestions,
-  onChange: component.onChange.bind(component)
+var dateInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-date")), rendererMapperProps), pick(component, "autoComplete", "minimumDate", "maximumDate", "suggestions")), {
+  onChange: component.setValue
 });
 
 // src/renderers/mappers/decisionComponentToProps.ts
 var decisionComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "title", "tags")), rendererMapperProps), {
   options: component.options.map((_a) => {
-    var _b = _a, { disabled } = _b, rest = __objRest(_b, ["disabled"]);
-    return __spreadProps(__spreadValues({}, rest), {
-      disabled: disabled || rendererMapperProps.stepLoadingState !== "idle"
+    var _b = _a, { disabled } = _b, option = __objRest(_b, ["disabled"]);
+    return __spreadProps(__spreadValues({}, option), {
+      disabled: disabled || rendererMapperProps.stepLoadingState !== "idle",
+      getAnchorProps: option.hrefWithTracking
     });
   })
 });
@@ -7937,14 +8009,11 @@ var dividerComponentToProps = (component, rendererMapperProps) => __spreadValues
 
 // src/renderers/mappers/externalComponentToProps.ts
 var externalComponentToProps = (component, rendererMapperProps) => {
-  return __spreadValues({
-    type: "external-confirmation",
-    uid: component.uid,
-    url: component.url,
-    visible: component.status === "failure",
-    open: component.open.bind(component),
-    onCancel: component.onCancel.bind(component)
-  }, rendererMapperProps);
+  return __spreadValues(__spreadProps(__spreadValues({
+    type: "external-confirmation"
+  }, pick(component, "uid", "url", "open", "onCancel")), {
+    visible: component.status === "failure"
+  }), rendererMapperProps);
 };
 
 // src/renderers/mappers/formattedValueComponentToProps.ts
@@ -7965,25 +8034,18 @@ var formattedValueComponentToProps = (component, rendererMapperProps) => {
     // for now, we don't want to pass `value` down to the renderer to avoid the "WhateverComponent".
     // 'value',
   )), {
-    validationState: getValidationState(component.errors, void 0),
-    onChange: component.onChange.bind(component)
+    onChange: component.setValue,
+    validationState: getValidationState(component.errors, void 0)
   }), rendererMapperProps);
 };
 
 // src/renderers/mappers/formComponentToProps.ts
 var formComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  const { uid, analyticsId, control, margin, tags } = component;
-  return __spreadValues({
-    uid,
-    analyticsId,
-    type: "form",
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), {
     children: childrenProps.map(rendererMapperProps.render),
-    childrenProps,
-    control,
-    margin,
-    tags
-  }, rendererMapperProps);
+    childrenProps
+  }), rendererMapperProps);
 };
 
 // src/renderers/mappers/headingComponentToProps.ts
@@ -8016,26 +8078,18 @@ var imageComponentToProps = (component, rendererMapperProps) => __spreadProps(__
 var instructionsComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "items", "margin", "title", "tags")), rendererMapperProps);
 
 // src/renderers/mappers/integerInputComponentToProps.ts
-var integerInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-integer")), rendererMapperProps), {
-  autoComplete: component.autoComplete,
-  maximum: component.maximum,
-  minimum: component.minimum,
-  onChange: component.onChange.bind(component)
+var integerInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-integer")), rendererMapperProps), pick(component, "autoComplete", "maximum", "minimum")), {
+  onChange: component.setValue
 });
 
 // src/renderers/mappers/listComponentToProps.ts
-var listComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(
-  component,
-  "uid",
-  "analyticsId",
-  "type",
-  "callToAction",
-  "control",
-  "items",
-  "margin",
-  "title",
-  "tags"
-)), rendererMapperProps);
+var listComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "title", "tags")), {
+  callToAction: mapCallToActionOptional(component.callToAction),
+  items: component.items.map((item) => __spreadProps(__spreadValues({}, item), {
+    callToAction: mapCallToActionOptional(item.callToAction),
+    additionalInfo: mapAdditionalInfo2(item.additionalInfo)
+  }))
+}), rendererMapperProps);
 
 // src/renderers/mappers/loadingIndicatorComponentToProps.ts
 var loadingIndicatorComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "size", "tags")), rendererMapperProps);
@@ -8059,39 +8113,25 @@ var mediaComponentToProps = (component, rendererMapperProps) => __spreadValues(_
 
 // src/renderers/mappers/modalComponentToProps.ts
 var modalComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, open, tags, title, close } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadValues({
-    uid,
-    analyticsId,
-    type: "modal",
-    open,
-    tags,
-    title,
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "open", "tags", "title")), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps,
-    onClose: close.bind(component)
-  }, rendererMapperProps);
+    onClose: component.close
+  }), rendererMapperProps);
 };
 
 // src/renderers/mappers/modalLayoutComponentToProps.ts
 var modalLayoutComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, content, control, margin, tags, trigger } = component;
+  const { content } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadValues({
-    uid,
-    analyticsId,
-    type: "modal-layout",
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "trigger")), {
     content: {
       children: childrenProps.map(rendererMapperProps.render),
       childrenProps,
       title: content.title
-    },
-    control,
-    margin,
-    tags,
-    trigger
-  }, rendererMapperProps);
+    }
+  }), rendererMapperProps);
 };
 
 // src/renderers/mappers/moneyInputComponentToProps.ts
@@ -8118,8 +8158,8 @@ var moneyInputComponentToProps = (component, rendererMapperProps) => {
   return __spreadValues(__spreadProps(__spreadValues({}, inputComponentToProps(component, "money-input")), {
     amountValue: amountComponent.getLocalValue(),
     selectedCurrencyIndex: currencyComponent.selectedIndex,
-    onAmountChange: amountComponent.onChange.bind(amountComponent),
-    onCurrencyChange: currencyComponent.onSelect.bind(currencyComponent),
+    onAmountChange: amountComponent.setValue,
+    onCurrencyChange: currencyComponent.selectIndex,
     placeholder: amountComponent.placeholder,
     currencies,
     validationState
@@ -8151,47 +8191,42 @@ var selectInputOptionsToProps = (options, children, rendererMapperProps) => {
 
 // src/renderers/mappers/multiSelectComponentToProps.ts
 var multiSelectInputComponentToProps = (component, rendererMapperProps) => {
-  const { autoComplete, maxItems, minItems, selectedIndices, onSelect } = component;
   const _a = inputComponentToProps(component, "input-multi-select"), { required, value } = _a, props = __objRest(_a, ["required", "value"]);
   const options = selectInputOptionsToProps(
     component.options,
     component.getChildren(),
     rendererMapperProps
   );
-  return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
-    autoComplete,
-    maxItems,
-    minItems,
-    options,
-    selectedIndices,
-    onSelect: onSelect.bind(component)
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), rendererMapperProps), pick(component, "autoComplete", "maxItems", "minItems", "selectedIndices")), {
+    onSelect: component.selectIndices,
+    options
   });
 };
 
 // src/renderers/mappers/multiUploadInputComponentToProps.ts
 var multiUploadInputComponentToProps = (component, rendererMapperProps) => {
-  const { accepts, cameraConfig, files, maxSize, minItems, maxItems, source, uploadLabel } = component;
-  return __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-upload-multi")), rendererMapperProps), {
-    accepts,
-    cameraConfig,
-    maxSize,
-    minItems,
-    maxItems,
-    source,
-    uploadLabel,
+  const { files } = component;
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-upload-multi")), rendererMapperProps), pick(
+    component,
+    "accepts",
+    "cameraConfig",
+    "maxSize",
+    "minItems",
+    "maxItems",
+    "source",
+    "uploadLabel"
+  )), {
     value: files.map((file) => __spreadProps(__spreadValues({}, file), {
       validationState: mapErrorsToValidationState(file.errors)
     })),
-    onInsertFile: component.onInsertFile.bind(component),
-    onRemoveFile: component.onRemoveFile.bind(component)
+    onInsertFile: component.insertFile,
+    onRemoveFile: component.removeFile
   });
 };
 
 // src/renderers/mappers/numberInputComponentToProps.ts
-var numberInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-number")), rendererMapperProps), {
-  maximum: component.maximum,
-  minimum: component.minimum,
-  onChange: component.onChange.bind(component)
+var numberInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-number")), rendererMapperProps), pick(component, "maximum", "minimum")), {
+  onChange: component.setValue
 });
 
 // src/renderers/mappers/objectComponentToProps.ts
@@ -8256,27 +8291,7 @@ var progressComponentToProps = (component, rendererMapperProps) => __spreadValue
 
 // src/renderers/mappers/repeatableComponentToProps.ts
 var repeatableComponentToProps = (component, rendererMapperProps) => {
-  const {
-    uid,
-    analyticsId,
-    addItemTitle,
-    control,
-    components,
-    description,
-    editableComponent,
-    editItemTitle,
-    errors,
-    maxItems,
-    media,
-    minItems,
-    summaryDefaults,
-    title = "",
-    tags,
-    onEdit,
-    onAdd,
-    onSave,
-    onRemove
-  } = component;
+  const { components, editableComponent, errors, summaryDefaults, title = "" } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   const editableItemProps = editableComponent ? componentToRendererProps(editableComponent, rendererMapperProps) : null;
   const getSummary = (componentSummary) => {
@@ -8290,75 +8305,63 @@ var repeatableComponentToProps = (component, rendererMapperProps) => {
   const itemProps = components.map((childComponent) => __spreadProps(__spreadValues({}, getSummary(childComponent.getSummary())), {
     id: `${childComponent.uid}-summary`
   }));
-  return __spreadValues({
-    uid,
-    analyticsId,
+  return __spreadValues(__spreadProps(__spreadValues({
     type: "repeatable",
+    title
+  }, pick(
+    component,
+    "control",
+    "description",
+    "media",
+    "tags",
+    "uid",
+    "analyticsId",
+    "editItemTitle",
+    "addItemTitle",
+    "maxItems",
+    "minItems"
+  )), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps,
-    addItemTitle,
-    control,
-    description,
     editableItem: rendererMapperProps.render(editableItemProps),
     editableItemProps,
-    editItemTitle,
     items: itemProps,
-    maxItems,
-    media,
-    minItems,
-    title,
-    tags,
     validationState: mapErrorsToValidationState(errors),
-    onAdd: onAdd.bind(component),
-    onEdit: onEdit.bind(component),
-    onSave: onSave.bind(component),
-    onRemove: onRemove.bind(component)
-  }, rendererMapperProps);
+    onAdd: component.addComponent,
+    onEdit: component.editComponent,
+    onRemove: component.removeComponent,
+    onSave: component.saveComponent
+  }), rendererMapperProps);
 };
 
 // src/renderers/mappers/reviewComponentToProps.ts
-var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(
-  component,
-  "uid",
-  "analyticsId",
-  "type",
-  "callToAction",
-  "control",
-  "fields",
-  "margin",
-  "title",
-  "tags"
-)), rendererMapperProps);
+var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "title", "tags")), {
+  callToAction: mapCallToActionOptional(component.callToAction),
+  fields: component.fields.map((field) => __spreadProps(__spreadValues({}, field), {
+    callToAction: mapCallToActionOptional(field.callToAction),
+    additionalInfo: mapAdditionalInfo2(field.additionalInfo)
+  }))
+}), rendererMapperProps);
 
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
-  const { uid, control, emptyMessage, error, hint, isLoading, margin, query, title, tags } = component;
-  const onChange = component.onChange.bind(component);
-  const onSelect = component.onSelect.bind(component);
+  const { uid, emptyMessage, error, query, setQuery, selectResult } = component;
   const state = getSearchState({
     emptyMessage,
     error,
-    isLoading,
+    isLoading: component.isLoading,
     query,
     state: component.state,
     rendererMapperProps,
-    onChange,
-    onSelect
+    setQuery,
+    selectResult
   });
-  return __spreadValues({
-    uid,
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "control", "hint", "isLoading", "margin", "query", "title", "tags")), {
+    onChange: setQuery,
     type: "search",
     id: uid,
-    control,
-    hint,
-    isLoading,
-    margin,
-    query,
-    state,
-    title,
-    tags,
-    onChange
-  }, rendererMapperProps);
+    state
+  }), rendererMapperProps);
 };
 var getSearchState = ({
   emptyMessage,
@@ -8367,14 +8370,14 @@ var getSearchState = ({
   query,
   state,
   rendererMapperProps,
-  onChange,
-  onSelect
+  setQuery,
+  selectResult
 }) => {
   if (isLoading) {
     return { type: "pending" };
   }
   if (error) {
-    return { type: "error", onRetry: () => onChange(query) };
+    return { type: "error", onRetry: () => setQuery(query) };
   }
   if (!state) {
     return { type: "noResults", message: emptyMessage };
@@ -8401,7 +8404,7 @@ var getSearchState = ({
         id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
         image: mapSpecImage(result.image),
         media: getDomainLayerMedia(result),
-        onClick: () => onSelect(result)
+        onClick: () => selectResult(result)
       });
     })
   };
@@ -8412,17 +8415,9 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.components.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(
-    component,
-    "uid",
-    "analyticsId",
-    "type",
-    "title",
-    "margin",
-    "control",
-    "callToAction",
-    "tags"
-  )), rendererMapperProps), {
+  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "title", "margin", "control", "tags")), {
+    callToAction: mapCallToActionOptional(component.callToAction)
+  }), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
   });
@@ -8431,7 +8426,7 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
 // src/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
   var _b;
-  const { autoComplete, selectedIndex, onSelect } = component;
+  const { autoComplete, selectedIndex, selectIndex } = component;
   const selectedChild = component.getSelectedChild();
   const childrenProps = selectedChild ? componentToRendererProps(selectedChild, rendererMapperProps) : null;
   const _a = inputComponentToProps(component, "input-select"), { value } = _a, props = __objRest(_a, ["value"]);
@@ -8443,7 +8438,7 @@ var selectInputComponentToProps = (component, rendererMapperProps) => {
   if (options.length === 1 && ((_b = options[0].childrenProps) == null ? void 0 : _b.type) === "form-section") {
     if (selectedIndex == null) {
       rendererMapperProps.trackEvent("OneOf Option Selected - Auto-select single-option", {});
-      onSelect.bind(component)(0);
+      selectIndex(0);
     }
     return options[0].childrenProps;
   }
@@ -8451,14 +8446,18 @@ var selectInputComponentToProps = (component, rendererMapperProps) => {
     autoComplete,
     options,
     selectedIndex,
-    onSelect: onSelect.bind(component),
+    onSelect: component.selectIndex,
     children: rendererMapperProps.render(childrenProps),
     childrenProps
   });
 };
 
 // src/renderers/mappers/statusListComponentToProps.ts
-var statusListComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "items", "margin", "title", "tags")), rendererMapperProps);
+var statusListComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "title", "tags")), {
+  items: component.items.map((item) => __spreadProps(__spreadValues({}, item), {
+    callToAction: mapCallToActionOptional(item.callToAction)
+  }))
+}), rendererMapperProps);
 
 // src/renderers/mappers/tabsComponentToProps.ts
 var tabsComponentToProps = (component, rendererMapperProps) => {
@@ -8477,15 +8476,17 @@ var tabsComponentToProps = (component, rendererMapperProps) => {
 };
 
 // src/renderers/mappers/textInputComponentToProps.ts
-var textInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-text")), rendererMapperProps), {
-  autoComplete: component.autoComplete,
-  autoCapitalize: component == null ? void 0 : component.autocapitalization,
-  displayFormat: component.displayFormat,
-  maxLength: component.maxLength,
-  minLength: component.minLength,
-  pattern: component.pattern,
-  suggestions: component.suggestions,
-  onChange: component.onChange.bind(component)
+var textInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-text")), rendererMapperProps), pick(
+  component,
+  "autoComplete",
+  "displayFormat",
+  "maxLength",
+  "minLength",
+  "pattern",
+  "suggestions"
+)), {
+  onChange: component.setValue,
+  autoCapitalize: component == null ? void 0 : component.autocapitalization
 });
 
 // src/renderers/mappers/tupleComponentToProps.ts
@@ -8511,30 +8512,15 @@ var tupleComponentToProps = (component, rendererMapperProps) => {
 
 // src/renderers/mappers/uploadInputComponentToProps.ts
 var uploadInputComponentToProps = (component, rendererMapperProps) => {
-  const { accepts, cameraConfig, maxSize, source } = component;
-  return __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-upload")), rendererMapperProps), {
-    cameraConfig,
-    source,
-    accepts,
-    maxSize,
-    onUpload: component.onUpload.bind(component)
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-upload")), rendererMapperProps), pick(component, "accepts", "cameraConfig", "maxSize", "source")), {
+    onUpload: component.setValue
   });
 };
 
 // src/renderers/mappers/upsellComponentToProps.ts
-var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(
-  component,
-  "uid",
-  "analyticsId",
-  "type",
-  "callToAction",
-  "control",
-  "margin",
-  "media",
-  "tags",
-  "text"
-)), {
-  onDismiss: component.onDismiss ? component.onDismiss.bind(component) : void 0
+var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "media", "tags", "text")), {
+  callToAction: mapCallToAction(component.callToAction),
+  onDismiss: component.dismiss
 }), rendererMapperProps);
 
 // src/renderers/mappers/componentToRendererProps.ts
@@ -8691,7 +8677,7 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     footer: footerProps.map(rendererMapperProps.render),
     footerProps,
     __onAction: (action) => {
-      void onBehavior({ type: "action", action });
+      void onBehavior({ type: "action", action, track: false });
     }
   }, restMapperProps);
 };
@@ -8734,27 +8720,33 @@ var subflowComponentToRendererProps = (subflow, rendererMapperProps, nativeSubfl
   }
 };
 var dynamicSubflowComponentToRendererProps = (component, rendererMapperProps) => {
-  return __spreadValues(__spreadProps(__spreadValues({
-    uid: component.uid,
+  return __spreadValues(__spreadValues({
     type: "subflow-dynamic"
-  }, pick(component, "requestCache", "presentation", "initialRequest")), {
-    onCancellation: component.onCancellation.bind(component),
-    onCompletion: component.onCompletion.bind(component),
-    onError: component.onError.bind(component),
-    onEvent: component.onEvent.bind(component)
-  }), rendererMapperProps);
+  }, pick(
+    component,
+    "uid",
+    "requestCache",
+    "presentation",
+    "initialRequest",
+    "onCancellation",
+    "onCompletion",
+    "onError",
+    "onEvent"
+  )), rendererMapperProps);
 };
 var nativeSubflowComponentToRendererProps = (component, rendererMapperProps) => {
-  return __spreadValues({
-    uid: component.uid,
-    type: "subflow-native",
-    id: component.id,
-    payload: component.payload,
-    onCancellation: component.onCancellation.bind(component),
-    onCompletion: component.onCompletion.bind(component),
-    onError: component.onError.bind(component),
-    onEvent: component.onEvent.bind(component)
-  }, rendererMapperProps);
+  return __spreadValues(__spreadValues({
+    type: "subflow-native"
+  }, pick(
+    component,
+    "uid",
+    "id",
+    "payload",
+    "onCancellation",
+    "onCompletion",
+    "onError",
+    "onEvent"
+  )), rendererMapperProps);
 };
 
 // src/renderers/mappers/rootComponentToProps.ts
@@ -8832,8 +8824,6 @@ function useStableCallback(handler) {
 // src/useDynamicFlow.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var className = "dynamic-flow";
-var noop2 = () => {
-};
 function useDynamicFlow(props) {
   var _a, _b;
   const { flowId, renderers } = props;
@@ -8855,7 +8845,6 @@ function useDynamicFlow(props) {
   const onError = useStableCallback(props.onError);
   const onEvent = useStableCallback(props.onEvent);
   const onLog = useStableCallback(props.onLog);
-  const onValueChange = noop2;
   const { formatMessage, locale } = (0, import_react_intl8.useIntl)();
   const getErrorMessageFunctions = (0, import_react3.useMemo)(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
@@ -8877,7 +8866,6 @@ function useDynamicFlow(props) {
     onError,
     onEvent,
     onLog,
-    onValueChange,
     scrollToTop
   }));
   const render = (0, import_react3.useMemo)(
@@ -9031,7 +9019,8 @@ var eventNames = [
   "Native Subflow Triggered",
   "Native Subflow Succeeded",
   "Native Subflow Failed",
-  "Native Subflow Cancelled"
+  "Native Subflow Cancelled",
+  "Behavior Triggered"
 ];
 
 // src/renderers/subflow/getDynamicSubflowRenderer.tsx