@wise/dynamic-flow-client 4.8.7 → 4.9.0-exp-modal-renderer-8e5c27a

package/build/main.mjs

@@ -1038,7 +1038,7 @@ function findRendererPropsByType(root, type, predicate = () => true) {
   ];
 }
 var isType = (node, type) => node.type === type;
-function getChildren(node) {
+var getChildren = (node) => {
   switch (node.type) {
     case "root":
     case "box":
@@ -1046,12 +1046,12 @@ function getChildren(node) {
     case "form":
     case "form-section":
     case "step":
-    case "modal-content":
+    case "modal":
     case "section":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
-    case "modal":
+    case "modal-layout":
       return node.content.childrenProps;
     case "repeatable":
       return node.editableItemProps ? [node.editableItemProps] : [];
@@ -1085,7 +1085,7 @@ function getChildren(node) {
     case "external-confirmation":
       return [];
   }
-}
+};
 
 // src/revamp/renderers/CoreRootRenderer.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1472,14 +1472,30 @@ var loadingIndicatorComponentToProps = (component, rendererMapperProps) => __spr
 // src/revamp/renderers/mappers/markdownComponentToProps.ts
 var markdownComponentToProps = (control, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(control, "uid", "analyticsId", "type", "align", "margin", "content", "control")), rendererMapperProps);
 
-// src/revamp/renderers/mappers/modalComponentToProps.ts
-var modalComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, content, control, margin, trigger } = component;
+// src/revamp/renderers/mappers/modalContentComponentToProps.ts
+var modalContentComponentToProps = (component, rendererMapperProps) => {
+  const { uid, analyticsId, open, title, close } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   return __spreadValues({
     uid,
     analyticsId,
     type: "modal",
+    open,
+    title,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    onClose: close.bind(component)
+  }, rendererMapperProps);
+};
+
+// src/revamp/renderers/mappers/modalLayoutComponentToProps.ts
+var modalLayoutComponentToProps = (component, rendererMapperProps) => {
+  const { uid, analyticsId, content, control, margin, trigger } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  return __spreadValues({
+    uid,
+    analyticsId,
+    type: "modal-layout",
     content: {
       children: childrenProps.map(rendererMapperProps.render),
       childrenProps,
@@ -1491,22 +1507,6 @@ var modalComponentToProps = (component, rendererMapperProps) => {
   }, rendererMapperProps);
 };
 
-// src/revamp/renderers/mappers/modalContentComponentToProps.ts
-var modalContentComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, open, title, close } = component;
-  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadValues({
-    uid,
-    analyticsId,
-    type: "modal-content",
-    open,
-    title,
-    children: childrenProps.map(rendererMapperProps.render),
-    childrenProps,
-    onClose: close.bind(component)
-  }, rendererMapperProps);
-};
-
 // src/revamp/renderers/mappers/multiSelectComponentToProps.ts
 var multiSelectInputComponentToProps = (component, rendererMapperProps) => {
   const { autoComplete, maxItems, minItems, options, selectedIndices, onSelect } = component;
@@ -1757,6 +1757,22 @@ var selectInputComponentToProps = (component, rendererMapperProps) => {
 // src/revamp/renderers/mappers/statusListComponentToProps.ts
 var statusListComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "items", "margin", "title")), rendererMapperProps);
 
+// src/revamp/renderers/mappers/tabsComponentToProps.ts
+var tabsComponentToProps = (component, rendererMapperProps) => {
+  const tabs = component.tabs.map(({ components, tag, title }) => {
+    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return {
+      title,
+      tag,
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    };
+  });
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin")), rendererMapperProps), {
+    tabs
+  });
+};
+
 // src/revamp/renderers/mappers/textInputComponentToProps.ts
 var textInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-text")), rendererMapperProps), {
   autoComplete: component.autoComplete,
@@ -1801,27 +1817,15 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
-// src/revamp/renderers/mappers/tabsComponentToProps.ts
-var tabsComponentToProps = (component, rendererMapperProps) => {
-  const tabs = component.tabs.map(({ components, tag, title }) => {
-    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
-    return {
-      title,
-      tag,
-      childrenProps,
-      children: childrenProps.map(rendererMapperProps.render)
-    };
-  });
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin")), rendererMapperProps), {
-    tabs
-  });
-};
-
 // src/revamp/renderers/mappers/componentToRendererProps.ts
-var componentToRendererProps = (component, rendererMapperProps) => {
+var componentToRendererProps = (component, mapperProps) => {
   if (isHiddenComponent(component)) {
     return hiddenComponentToProps(component);
   }
+  const trackEventWithLayoutId = (eventName, properties) => mapperProps.trackEvent(eventName, __spreadValues({
+    layoutId: component.analyticsId
+  }, properties));
+  const rendererMapperProps = component.kind === "layout" ? __spreadProps(__spreadValues({}, mapperProps), { trackEvent: trackEventWithLayoutId }) : mapperProps;
   const componentProps = getComponentProps(component, rendererMapperProps);
   const alertProps = getComponentAlertProps(component, rendererMapperProps);
   if (alertProps) {
@@ -1881,9 +1885,9 @@ var getComponentProps = (component, rendererMapperProps) => {
       return loadingIndicatorComponentToProps(component, rendererMapperProps);
     case "markdown":
       return markdownComponentToProps(component, rendererMapperProps);
+    case "modal-layout":
+      return modalLayoutComponentToProps(component, rendererMapperProps);
     case "modal":
-      return modalComponentToProps(component, rendererMapperProps);
-    case "modal-content":
       return modalContentComponentToProps(component, rendererMapperProps);
     case "multi-select":
       return multiSelectInputComponentToProps(component, rendererMapperProps);
@@ -1946,6 +1950,7 @@ var createRootDomainComponent = (updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
   const rootComponent = {
     type: "root",
+    kind: "step",
     uid: "root",
     stepComponent: null,
     _update(updateFn) {
@@ -2008,11 +2013,12 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
-// src/revamp/domain/components/ModalContentComponent.ts
+// src/revamp/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
   const modalContentComponent = __spreadProps(__spreadValues({
-    type: "modal-content",
+    type: "modal",
+    kind: "layout",
     open: true
   }, modalProps), {
     _update(updateFn) {
@@ -2035,7 +2041,8 @@ var getRandomId = () => Math.random().toString(36).substring(2);
 
 // src/revamp/domain/components/AlertComponent.ts
 var createAlertComponent = (alertProps) => __spreadValues({
-  type: "alert"
+  type: "alert",
+  kind: "layout"
 }, alertProps);
 
 // src/revamp/domain/mappers/utils/behavior-utils.ts
@@ -2187,6 +2194,7 @@ var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context =
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
   type: "box",
+  kind: "layout",
   getChildren() {
     return this.components;
   }
@@ -2207,7 +2215,8 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin =
 
 // src/revamp/domain/components/ButtonComponent.ts
 var createButtonComponent = (buttonProps) => __spreadValues({
-  type: "button"
+  type: "button",
+  kind: "layout"
 }, buttonProps);
 
 // src/revamp/domain/mappers/layout/buttonLayoutToComponent.ts
@@ -2290,6 +2299,7 @@ var getButtonContext = ({ context, action }) => {
 // src/revamp/domain/components/ColumnsComponent.ts
 var createColumnsComponent = (columnsProps) => __spreadProps(__spreadValues({}, columnsProps), {
   type: "columns",
+  kind: "layout",
   getChildren() {
     return [...this.startComponents, ...this.endComponents];
   }
@@ -2317,7 +2327,8 @@ var columnsLayoutToComponent = (uid, { control, left, right, bias = "none", marg
 
 // src/revamp/domain/components/DecisionComponent.ts
 var createDecisionComponent = (decisionProps) => __spreadValues({
-  type: "decision"
+  type: "decision",
+  kind: "layout"
 }, decisionProps);
 
 // src/revamp/domain/mappers/utils/utils.ts
@@ -2378,7 +2389,8 @@ var mapOption = (option, onBehavior, stepActions = []) => {
 
 // src/revamp/domain/components/StatusListComponent.ts
 var createStatusListComponent = (statusListProps) => __spreadValues({
-  type: "status-list"
+  type: "status-list",
+  kind: "layout"
 }, statusListProps);
 
 // src/revamp/domain/mappers/layout/deprecatedListLayoutToComponent.ts
@@ -2416,7 +2428,8 @@ var mapLegacyStatus = (status) => {
 
 // src/revamp/domain/components/DividerComponent.ts
 var createDividerComponent = (props) => __spreadValues({
-  type: "divider"
+  type: "divider",
+  kind: "layout"
 }, props);
 
 // src/revamp/domain/mappers/layout/dividerLayoutToComponent.ts
@@ -2425,6 +2438,7 @@ var dividerLayoutToComponent = (uid, { control, margin = "md", analyticsId }) =>
 // src/revamp/domain/components/FormComponent.ts
 var createFormComponent = (formProps) => __spreadProps(__spreadValues({}, formProps), {
   type: "form",
+  kind: "layout",
   getChildren() {
     return [this.schemaComponent];
   }
@@ -2455,7 +2469,8 @@ var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, co
 
 // src/revamp/domain/components/HeadingComponent.ts
 var createHeadingComponent = (headingProps) => __spreadValues({
-  type: "heading"
+  type: "heading",
+  kind: "layout"
 }, headingProps);
 
 // src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
@@ -2471,7 +2486,8 @@ var headingLayoutToComponent = (uid, { analyticsId, align = "left", margin = "md
 
 // src/revamp/domain/components/ImageComponent.ts
 var createImageComponent = (imageProps) => __spreadValues({
-  type: "image"
+  type: "image",
+  kind: "layout"
 }, imageProps);
 
 // src/revamp/domain/mappers/layout/imageLayoutToComponent.ts
@@ -2503,7 +2519,8 @@ var imageLayoutToComponent = (uid, {
 
 // src/revamp/domain/components/MarkdownComponent.ts
 var createMarkdownComponent = (markdownProps) => __spreadValues({
-  type: "markdown"
+  type: "markdown",
+  kind: "layout"
 }, markdownProps);
 
 // src/revamp/domain/mappers/layout/infoLayoutToComponent.ts
@@ -2518,7 +2535,8 @@ var infoLayoutToComponent = (uid, { analyticsId, align = "left", control, margin
 
 // src/revamp/domain/components/InstructionsComponent.ts
 var createInstructionsComponent = (instructionsProps) => __spreadValues({
-  type: "instructions"
+  type: "instructions",
+  kind: "layout"
 }, instructionsProps);
 
 // src/revamp/domain/mappers/layout/instructionsLayoutToComponent.ts
@@ -2535,7 +2553,8 @@ var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin
 
 // src/revamp/domain/components/ListComponent.ts
 var createListComponent = (listProps) => __spreadValues({
-  type: "list"
+  type: "list",
+  kind: "layout"
 }, listProps);
 
 // src/revamp/domain/mappers/layout/listLayoutToComponent.ts
@@ -2573,7 +2592,8 @@ var mapSupportingValues = (item) => {
 
 // src/revamp/domain/components/LoadingIndicatorComponent.ts
 var createLoadingIndicatorComponent = (loadingIndicatorProps) => __spreadValues({
-  type: "loading-indicator"
+  type: "loading-indicator",
+  kind: "layout"
 }, loadingIndicatorProps);
 
 // src/revamp/domain/mappers/layout/loadingIndicatorLayoutToComponent.ts
@@ -2589,9 +2609,10 @@ var markdownLayoutToComponent = (uid, { analyticsId, align = "left", margin = "m
   margin
 });
 
-// src/revamp/domain/components/ModalComponent.ts
+// src/revamp/domain/components/ModalLayoutComponent.ts
 var createModalComponent = (modalProps) => __spreadProps(__spreadValues({
-  type: "modal"
+  type: "modal-layout",
+  kind: "layout"
 }, modalProps), {
   getChildren() {
     return this.content.components;
@@ -2618,7 +2639,8 @@ var modalLayoutToComponent = (uid, { analyticsId, content, control, margin = "md
 
 // src/revamp/domain/components/ParagraphComponent.ts
 var createParagraphComponent = (paragraphProps) => __spreadValues({
-  type: "paragraph"
+  type: "paragraph",
+  kind: "layout"
 }, paragraphProps);
 
 // src/revamp/domain/mappers/layout/paragraphLayoutToComponent.ts
@@ -2633,7 +2655,8 @@ var paragraphLayoutToComponent = (uid, { analyticsId, align = "left", control, m
 
 // src/revamp/domain/components/ReviewComponent.ts
 var createReviewComponent = (reviewProps) => __spreadValues({
-  type: "review"
+  type: "review",
+  kind: "layout"
 }, reviewProps);
 
 // src/revamp/domain/mappers/layout/reviewLayoutToComponent.ts
@@ -2773,6 +2796,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
   const debouncedSearch = debounce(search, DEBOUNCE_TIME);
   const component = {
     type: "search",
+    kind: "layout",
     uid,
     analyticsId,
     control,
@@ -2911,6 +2935,7 @@ var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin =
 var createSectionComponent = (props) => {
   return __spreadProps(__spreadValues({}, props), {
     type: "section",
+    kind: "layout",
     getChildren() {
       return this.components;
     }
@@ -2939,7 +2964,8 @@ var sectionLayoutToComponent = (uid, { analyticsId, control, title, components,
 
 // src/revamp/domain/components/TabsComponent.ts
 var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
-  type: "tabs"
+  type: "tabs",
+  kind: "layout"
 });
 
 // src/revamp/domain/mappers/layout/tabsLayoutToComponent.ts
@@ -3029,6 +3055,7 @@ var createExternalConfirmation = (uid, url, updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
   return {
     type: "external-confirmation",
+    kind: "layout",
     uid,
     url,
     status: "initial",
@@ -3091,6 +3118,7 @@ var createStepComponent = (stepProps) => {
     uid
   }, rest), {
     type: "step",
+    kind: "step",
     modals: [],
     dismissModal() {
       var _a2;
@@ -3329,6 +3357,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const numberComponent = __spreadValues({
     type: "number",
+    kind: "input",
     uid,
     id,
     _update(updateFn) {
@@ -3878,6 +3907,7 @@ var createAllOfComponent = (allOfProps) => {
   } = allOfProps;
   return {
     type: "all-of",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -3963,6 +3993,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     schemaId,
     analyticsId,
     type: "repeatable",
+    kind: "input",
     components,
     editableComponent: null,
     editableIndex: null,
@@ -4221,6 +4252,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
   const uploadComponent = __spreadValues({
     type: "multi-upload",
+    kind: "input",
     uid,
     id,
     format: "base64",
@@ -4479,6 +4511,7 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
   const component = __spreadProps(__spreadValues({
     uid,
     type: "multi-select",
+    kind: "input",
     children,
     options,
     selectedIndices,
@@ -4631,6 +4664,7 @@ var createTupleComponent = (tupleProps) => {
   } = tupleProps;
   return {
     type: "tuple",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -4744,6 +4778,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const uploadComponent = __spreadValues({
     type: "upload",
+    kind: "input",
     uid,
     id,
     format,
@@ -4849,6 +4884,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const booleanComponent = __spreadValues({
     type: "boolean",
+    kind: "input",
     uid,
     id,
     autoComplete: "",
@@ -4930,6 +4966,7 @@ var createConstComponent = (hiddenProps) => {
   const { uid, schemaId, analyticsId, value, summary } = hiddenProps;
   return {
     type: "const",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -4986,6 +5023,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const integerComponent = __spreadValues({
     type: "integer",
+    kind: "input",
     uid,
     id,
     value,
@@ -5096,6 +5134,7 @@ var createObjectComponent = (objectProps) => {
   } = objectProps;
   return {
     type: "object",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -5234,6 +5273,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
   const component = __spreadProps(__spreadValues({
     uid,
     type: "select",
+    kind: "input",
     children,
     options,
     selectedIndex,
@@ -5397,6 +5437,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const dateInputComponent = __spreadValues({
     type: "date",
+    kind: "input",
     uid,
     id,
     value,
@@ -5558,6 +5599,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const inputComponent = __spreadValues({
     type: "text",
+    kind: "input",
     uid,
     id,
     value,
@@ -5712,6 +5754,7 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, u
   const update = getInputUpdateFunction(updateComponent);
   const paComponent = {
     type: "persist-async",
+    kind: "input",
     uid,
     analyticsId,
     schemaId,

package/build/types/revamp/domain/components/AlertComponent.d.ts

@@ -1,6 +1,7 @@
 import type { BaseLayoutComponent, CallToAction, Context } from '../types';
 export type AlertComponent = BaseLayoutComponent & {
     type: 'alert';
+    kind: 'layout';
     markdown: string;
     context: Context;
     callToAction?: CallToAction;

package/build/types/revamp/domain/components/AllOfComponent.d.ts

@@ -1,7 +1,8 @@
 import type { Model } from '@wise/dynamic-flow-types/build/next';
-import type { BaseSchemaComponent, InlineAlert, SchemaComponent, LocalValue, RepeatableSummary } from '../types';
+import type { BaseSchemaComponent, InlineAlert, LocalValue, RepeatableSummary, SchemaComponent } from '../types';
 export type AllOfComponent = BaseSchemaComponent<LocalValue> & {
     type: 'all-of';
+    kind: 'input';
     components: SchemaComponent[];
     alert?: InlineAlert;
     getChildren: () => SchemaComponent[];

package/build/types/revamp/domain/components/BooleanInputComponent.d.ts

@@ -3,6 +3,7 @@ import type { PerformValidationAsync } from '../features/validationAsync/getPerf
 import type { BaseInputComponent, OnPersistAsync, OnValueChange, RepeatableSummary, UpdateComponent, ValidationAsyncState } from '../types';
 export type BooleanInputComponent = BaseInputComponent<boolean> & {
     type: 'boolean';
+    kind: 'input';
     validationAsyncState: ValidationAsyncState;
     onChange: (value: boolean) => void;
 };

package/build/types/revamp/domain/components/BoxComponent.d.ts

@@ -2,6 +2,7 @@ import type { Size } from '@wise/dynamic-flow-types/build/next';
 import type { BaseLayoutComponent, DomainComponent } from '../types';
 export type BoxComponent = BaseLayoutComponent & {
     type: 'box';
+    kind: 'layout';
     border: boolean;
     width: Size;
     components: DomainComponent[];

package/build/types/revamp/domain/components/ButtonComponent.d.ts

@@ -2,6 +2,7 @@ import type { Size } from '@wise/dynamic-flow-types/build/next';
 import type { BaseLayoutComponent, Context } from '../types';
 export type ButtonComponent = BaseLayoutComponent & {
     type: 'button';
+    kind: 'layout';
     context: Context;
     disabled: boolean;
     pinOrder?: number;

package/build/types/revamp/domain/components/ColumnsComponent.d.ts

@@ -1,6 +1,7 @@
 import type { BaseLayoutComponent, Bias, DomainComponent } from '../types';
 export type ColumnsComponent = BaseLayoutComponent & {
     type: 'columns';
+    kind: 'layout';
     bias: Bias;
     startComponents: DomainComponent[];
     endComponents: DomainComponent[];

package/build/types/revamp/domain/components/ConstComponent.d.ts

@@ -2,6 +2,7 @@ import type { Model } from '@wise/dynamic-flow-types/build/next';
 import type { BaseSchemaComponent, LocalValue, RepeatableSummary } from '../types';
 export type ConstComponent = BaseSchemaComponent<LocalValue> & {
     type: 'const';
+    kind: 'input';
 };
 export declare const createConstComponent: (hiddenProps: Pick<ConstComponent, "uid" | "schemaId" | "analyticsId"> & {
     value: Model;

package/build/types/revamp/domain/components/ContainerComponent.d.ts

@@ -1,6 +1,7 @@
 import type { BaseComponent, DomainComponent } from '../types';
 export type ContainerComponent = BaseComponent & {
     type: 'container';
+    kind: 'layout';
     components: DomainComponent[];
     getChildren: () => DomainComponent[];
 };

package/build/types/revamp/domain/components/DateInputComponent.d.ts

@@ -4,6 +4,7 @@ import type { PerformValidationAsync } from '../features/validationAsync/getPerf
 import type { BaseInputComponent, OnPersistAsync, OnValueChange, RepeatableSummary, Suggestions, UpdateComponent, ValidationAsyncState } from '../types';
 export type DateInputComponent = BaseInputComponent<string | null> & {
     type: 'date';
+    kind: 'input';
     minimumDate?: string;
     maximumDate?: string;
     suggestions?: Suggestions;

package/build/types/revamp/domain/components/DecisionComponent.d.ts

@@ -2,6 +2,7 @@ import type { Icon } from '@wise/dynamic-flow-types/build/next';
 import type { BaseLayoutComponent, Image, InlineAlert, SupportingValues } from '../types';
 export type DecisionComponent = BaseLayoutComponent & {
     type: 'decision';
+    kind: 'layout';
     options: DecisionOption[];
     title?: string;
 };

package/build/types/revamp/domain/components/DividerComponent.d.ts

@@ -1,5 +1,6 @@
 import type { BaseLayoutComponent } from '../types';
 export type DividerComponent = BaseLayoutComponent & {
     type: 'divider';
+    kind: 'layout';
 };
 export declare const createDividerComponent: (props: Pick<DividerComponent, "uid" | "control" | "margin" | "analyticsId">) => DividerComponent;

package/build/types/revamp/domain/components/FormComponent.d.ts

@@ -1,6 +1,7 @@
 import type { BaseLayoutComponent, SchemaComponent } from '../types';
 export type FormComponent = BaseLayoutComponent & {
     type: 'form';
+    kind: 'layout';
     schemaComponent: SchemaComponent;
     getChildren: () => SchemaComponent[];
 };

package/build/types/revamp/domain/components/HeadingComponent.d.ts

@@ -2,6 +2,7 @@ import type { Size } from '@wise/dynamic-flow-types/build/next';
 import type { Align, BaseLayoutComponent } from '../types';
 export type HeadingComponent = BaseLayoutComponent & {
     type: 'heading';
+    kind: 'layout';
     text: string;
     align: Align;
     size: Size;

package/build/types/revamp/domain/components/ImageComponent.d.ts

@@ -2,6 +2,7 @@ import type { Size } from '@wise/dynamic-flow-types/build/next';
 import type { Align, BaseLayoutComponent } from '../types';
 export type ImageComponent = BaseLayoutComponent & {
     type: 'image';
+    kind: 'layout';
     align: Align;
     content: ImageContent;
     size: Size;

package/build/types/revamp/domain/components/InstructionsComponent.d.ts

@@ -1,6 +1,7 @@
 import type { BaseLayoutComponent, Context } from '../types';
 export type InstructionsComponent = BaseLayoutComponent & {
     type: 'instructions';
+    kind: 'layout';
     items: InstructionItem[];
     title?: string;
 };

package/build/types/revamp/domain/components/IntegerInputComponent.d.ts

@@ -4,6 +4,7 @@ import type { PerformValidationAsync } from '../features/validationAsync/getPerf
 import type { BaseInputComponent, OnPersistAsync, OnValueChange, RepeatableSummary, UpdateComponent, ValidationAsyncState } from '../types';
 export type IntegerInputComponent = BaseInputComponent<number | null> & {
     type: 'integer';
+    kind: 'input';
     maximum?: number;
     minimum?: number;
     validationAsyncState: ValidationAsyncState;

package/build/types/revamp/domain/components/ListComponent.d.ts

@@ -2,6 +2,7 @@ import { Icon } from '@wise/dynamic-flow-types/build/next';
 import { AdditionalInfo, BaseLayoutComponent, CallToAction, Image, InlineAlert, SupportingValues } from '../types';
 export type ListComponent = BaseLayoutComponent & {
     type: 'list';
+    kind: 'layout';
     items: ListItem[];
     title?: string;
     callToAction?: CallToAction;

package/build/types/revamp/domain/components/LoadingIndicatorComponent.d.ts

@@ -2,6 +2,7 @@ import type { Size } from '@wise/dynamic-flow-types/build/next';
 import type { BaseLayoutComponent } from '../types';
 export type LoadingIndicatorComponent = BaseLayoutComponent & {
     type: 'loading-indicator';
+    kind: 'layout';
     control?: string;
     size: Size;
 };

package/build/types/revamp/domain/components/MarkdownComponent.d.ts

@@ -1,6 +1,7 @@
 import type { Align, BaseLayoutComponent } from '../types';
 export type MarkdownComponent = BaseLayoutComponent & {
     type: 'markdown';
+    kind: 'layout';
     align: Align;
     content: string;
 };