@wise/dynamic-flow-client 4.9.0-exp-modal-renderer-d460e05 → 4.9.0-exp-modal-renderer-b16f932

package/build/main.js

@@ -3081,8 +3081,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   }
 };
 
-// src/revamp/domain/mappers/layout/modalToContent.ts
-var modalToContent = (uid, { content, title }, mapperProps, schemaComponents) => createModalContentComponent(
+// src/revamp/domain/mappers/layout/modalToComponent.ts
+var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents) => createModalContentComponent(
   {
     uid: `${uid}-modal-${getRandomId()}`,
     title,
@@ -6689,7 +6689,7 @@ function useDynamicFlowCore(props) {
       case "modal":
         if (stepRef.current) {
           rootComponentRef.current.showModal(
-            modalToContent(
+            modalToComponent(
               rootComponentRef.current.uid,
               behavior,
               __spreadValues({
@@ -6952,663 +6952,359 @@ var DynamicFormCore = (0, import_react5.forwardRef)(function DynamicFormCore2(pr
   );
 });
 
-// src/legacy/step/layoutStep/utils/layout-utils.ts
-function convertStepToLayout(step, { displayStepTitle = true } = {}) {
-  if (step.layout) {
-    return addMissingTitleAndDescriptionToStep(step, displayStepTitle);
-  }
-  switch (step.type) {
-    case "final":
-      return convertFinalStepToDynamicLayout(step);
-    case "decision":
-      return convertDecisionStepToDynamicLayout(step);
-    case "external":
-      return convertExternalStepToDynamicLayout(step);
-    default:
-      return convertFormStepToDynamicLayout(step);
-  }
+// src/legacy/dynamicFlow/DynamicFlow.tsx
+var import_react49 = require("react");
+var import_react_intl39 = require("react-intl");
+
+// src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
+var import_react7 = require("react");
+
+// src/legacy/common/contexts/dynamicFlowContexts/usePendingPromiseCounter.ts
+var import_react6 = require("react");
+function usePendingPromiseCounter() {
+  const [count, setCount] = (0, import_react6.useState)(0);
+  const addPendingPromise = (0, import_react6.useCallback)(
+    (promise) => {
+      setCount((c) => c + 1);
+      promise.catch(noop2).finally(() => delayUntilNextCycle(() => setCount((c) => Math.max(0, c - 1))));
+    },
+    [setCount]
+  );
+  return { addPendingPromise, pendingPromises: count };
 }
-function convertCommonComponents(step) {
-  const layout = [];
-  if (step.title) {
-    layout.push(convertStepTitleToDynamicHeading(step.title));
-  }
-  if (step.image) {
-    const image = convertStepImageToDynamicImage(step.image);
-    layout.push(image);
+var delayUntilNextCycle = (fn) => setTimeout(() => fn(), 0);
+var noop2 = () => {
+};
+
+// src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var defaultContextValue = {
+  loading: false,
+  registerPersistAsyncPromise: (promise) => {
   }
-  if (step.description) {
-    layout.push(convertStepDescriptionToDynamicParagraph(step.description));
+};
+var DFContext = (0, import_react7.createContext)(defaultContextValue);
+var DynamicFlowProvider = ({ loading, children }) => {
+  const { pendingPromises, addPendingPromise } = usePendingPromiseCounter();
+  const providerValue = (0, import_react7.useMemo)(() => {
+    return {
+      loading: loading || pendingPromises > 0,
+      registerPersistAsyncPromise: addPendingPromise
+    };
+  }, [loading, pendingPromises, addPendingPromise]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DFContext.Provider, { value: providerValue, children });
+};
+var useDynamicFlow = () => {
+  const context = (0, import_react7.useContext)(DFContext);
+  return context || defaultContextValue;
+};
+
+// src/legacy/common/contexts/eventsContext/EventsContext.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var EventsContext = (0, import_react8.createContext)({
+  triggerEvent: () => {
   }
-  return layout;
-}
-function convertExternalStepToDynamicLayout(step) {
-  return [...convertCommonComponents(step), convertStepToExternalComponent(step)];
+});
+function EventsContextProvider({ metadata, children, onEvent }) {
+  const value = (0, import_react8.useMemo)(
+    () => ({ triggerEvent: getEventDispatcher(onEvent, metadata) }),
+    [onEvent, metadata]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EventsContext.Provider, { value, children });
 }
-function convertStepToExternalComponent(step) {
-  return {
-    type: "external",
-    requestUrl: step.requestUrl,
-    polling: step.polling,
-    responseHandlers: step.responseHandlers,
-    retryTitle: step.retryTitle
-  };
+function useEventDispatcher() {
+  const { triggerEvent } = (0, import_react8.useContext)(EventsContext);
+  return triggerEvent;
 }
-function convertFormStepToDynamicLayout(step) {
-  const layout = convertCommonComponents(step);
-  if (step.reviewFields) {
-    layout.push(convertStepReviewToDynamicReview(step.reviewFields));
-  }
-  if (step.schemas) {
-    layout.push(...getSchemaLayout(step));
+var getEventDispatcher = (onEvent, metadata) => (eventName, properties = {}) => {
+  try {
+    onEvent(eventName, __spreadValues(__spreadValues({}, metadata), properties));
+  } catch (e) {
   }
-  if (step.actions) {
-    const actions = step.actions.map(convertStepActionToDynamicAction);
-    layout.push(dynamicBox(actions, "md"));
+};
+
+// src/legacy/common/contexts/logContext/LogContext.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var getLogger = (level, onLog, flowId = "UNKNOWN-FLOW-ID", stepId = "UNKNOWN-FLOW-ID") => (title, description, extra) => {
+  try {
+    onLog(level, `Dynamic Flow ${level} - ${title} - ${description}`, __spreadValues({
+      flowId,
+      stepId
+    }, extra));
+  } catch (e) {
   }
-  return layout;
+};
+var LogContext = (0, import_react9.createContext)(null);
+function LogProvider({ flowId, stepId, children, onLog }) {
+  const value = (0, import_react9.useMemo)(
+    () => ({
+      debug: getLogger("debug", onLog, flowId, stepId),
+      info: getLogger("info", onLog, flowId, stepId),
+      warning: getLogger("warning", onLog, flowId, stepId),
+      error: getLogger("error", onLog, flowId, stepId),
+      critical: getLogger("critical", onLog, flowId, stepId)
+    }),
+    [onLog, flowId, stepId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LogContext.Provider, { value, children });
 }
-function convertFinalStepToDynamicLayout(step) {
-  const layout = [];
-  if (step.details) {
-    if (step.details.image) {
-      const image = convertFinalStepImageToDynamicImage(step.details.image);
-      layout.push(image);
-    }
-    if (step.details.title) {
-      layout.push(convertStepTitleToDynamicHeading(step.details.title));
-    }
-    if (step.details.description) {
-      layout.push(convertStepDescriptionToDynamicParagraph(step.details.description));
-    }
-  }
-  if (step.actions) {
-    const actions = step.actions.map(
-      (action) => convertStepActionToDynamicAction(__spreadProps(__spreadValues({}, action), { type: action.type || "primary" }))
+var useLogger = () => {
+  const logging = (0, import_react9.useContext)(LogContext);
+  if (logging == null) {
+    throw new Error(
+      "Logging context not found. Did you forget to wrap your component in a <LogProvider />?"
     );
-    layout.push(dynamicBox(actions, "md"));
   }
-  return layout;
-}
-function convertDecisionStepToDynamicLayout(step) {
-  const layout = convertCommonComponents(step);
-  if (step.options) {
-    layout.push(convertStepDecisionToDynamicDecision(step.options));
+  return logging;
+};
+
+// src/common/cameraCapture/utils/mobile-utils.ts
+var isMobile = () => isMobileScreenSize() && (isTouchScreen() || isMobileUA());
+var isMobileUA = (userAgent = window.navigator.userAgent) => (
+  // eslint-disable-next-line regexp/no-unused-capturing-group
+  /mobi|\b(iphone|android|blackberry|webos|windows phone)\b/i.test(userAgent)
+);
+var isMobileScreenSize = (width = window.screen.width, height = window.screen.height) => width < 768 || height < 768;
+var isTouchScreen = (navigator2 = window.navigator, matchMedia = window.matchMedia) => {
+  if ("maxTouchPoints" in navigator2) {
+    return navigator2.maxTouchPoints > 0;
   }
-  return layout;
-}
-function dynamicBox(components, size) {
-  return {
-    type: "box",
-    width: size || "md",
-    components
-  };
-}
-function convertStepTitleToDynamicHeading(title) {
-  return {
-    type: "heading",
-    text: title,
-    size: "lg",
-    margin: "lg",
-    align: "center"
+  const mQ = matchMedia == null ? void 0 : matchMedia("(pointer:coarse)");
+  if ((mQ == null ? void 0 : mQ.media) === "(pointer:coarse)") {
+    return Boolean(mQ.matches);
+  }
+  return false;
+};
+
+// src/common/utils/debounce.ts
+var debounce2 = (callback, waitMs) => {
+  let timeoutId = null;
+  let lastArgs = null;
+  const clearTimer = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    lastArgs = null;
   };
-}
-function convertStepDescriptionToDynamicParagraph(description) {
-  return {
-    type: "paragraph",
-    text: description,
-    align: "center"
+  const debouncedFn = (...args) => {
+    lastArgs = args;
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...lastArgs);
+      timeoutId = null;
+      lastArgs = null;
+    }, waitMs);
   };
-}
-function convertStepSchemaToDynamicForm(schema) {
-  return { type: "form", schema };
-}
-function convertStepDecisionToDynamicDecision(options) {
-  return {
-    type: "decision",
-    options: options.map(convertStepDecisionOption)
+  debouncedFn.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimer();
+    }
   };
-}
-function convertStepDecisionOption(option) {
-  return {
-    title: option.title,
-    description: option.description,
-    action: {
-      title: option.title,
-      method: "GET",
-      url: option.url,
-      disabled: option.disabled
+  debouncedFn.flush = () => {
+    if (timeoutId !== null) {
+      callback(...lastArgs);
+      clearTimer();
     }
   };
+  debouncedFn.isPending = () => timeoutId !== null;
+  return debouncedFn;
+};
+
+// src/legacy/common/utils/api-utils.ts
+function isStatus2xx(status) {
+  return status >= 200 && status < 300;
 }
-function convertStepImageToDynamicImage(image) {
-  return {
-    type: "image",
-    url: image.url,
-    text: image.text,
-    margin: image.margin || "lg",
-    size: image.size || "md"
-  };
-}
-function convertFinalStepImageToDynamicImage(image) {
-  return typeof image === "string" ? {
-    type: "image",
-    url: image,
-    text: void 0,
-    margin: "lg",
-    size: "md"
-  } : convertStepImageToDynamicImage(image);
-}
-function convertStepActionToDynamicAction(action) {
-  const newAction = __spreadProps(__spreadValues({}, action), { title: action.title });
-  return {
-    type: "button",
-    action: newAction
-  };
-}
-function convertStepReviewToDynamicReview(reviewFields) {
-  return {
-    type: "review",
-    title: reviewFields.title,
-    fields: reviewFields.fields.map(convertReviewFieldToDefinition)
-  };
+
+// src/legacy/common/validators/types/type-validators.ts
+var isString2 = (value) => typeof value === "string";
+var isNumber2 = (value) => typeof value === "number" && !Number.isNaN(value);
+var isInteger2 = (value) => {
+  return isNumber2(value) && Math.floor(value) === value;
+};
+var isBoolean2 = (value) => typeof value === "boolean";
+var isObject2 = (value) => !isNull2(value) && !isUndefined2(value) && (value == null ? void 0 : value.constructor) === Object;
+var isArray2 = (value) => Array.isArray(value);
+var isNull2 = (value) => value === null;
+var isUndefined2 = (value) => typeof value === "undefined";
+
+// src/legacy/common/validators/values/value-validators.ts
+var isEmpty = (value) => isString2(value) && value.length === 0 || (isObject2(value) || isArray2(value)) && Object.keys(value).length === 0;
+
+// src/legacy/common/validators/models/model-utils.ts
+function cleanBasicModelWithOneOfSchema(model, schema) {
+  return schema.oneOf.some(
+    (nestedSchema) => getValidBasicModelOrNull(model, nestedSchema) === model
+  ) ? model : null;
 }
-function convertReviewFieldToDefinition(reviewField) {
-  return {
-    label: reviewField.title,
-    value: reviewField.value
-  };
+function cleanArrayModelWithOneOfSchema(model, schema) {
+  var _a;
+  const validModels = schema.oneOf.map((nestedSchema) => getValidArrayModelOrNull(model, nestedSchema)).filter((item) => item !== null);
+  if (validModels.length === 0) {
+    return null;
+  }
+  return (_a = validModels.find((model2) => model2.some((item) => item !== null))) != null ? _a : validModels[0];
 }
-function getSchemaLayout(step) {
-  const layout = [];
-  if (step.schemas && step.schemas[0]) {
-    const schema = step.schemas[0];
-    const dynamicForm = convertStepSchemaToDynamicForm(schema);
-    if (isWideForm()) {
-      layout.push(dynamicForm);
-    } else {
-      layout.push(dynamicBox([dynamicForm], "md"));
-    }
+function getValidArrayModelOrNull(model, schema) {
+  if (!isArraySchema2(schema)) {
+    return null;
   }
-  return layout;
+  if (!isListArraySchema(schema)) {
+    return null;
+  }
+  return cleanModelWithArraySchema(model, schema);
 }
-function isWideForm() {
-  return false;
+function cleanModelWithStringSchema(model) {
+  return isString2(model) && !isEmpty(model) ? model : null;
 }
-function addMissingTitleAndDescriptionToStep(step, displayStepTitle) {
-  return [
-    ...displayStepTitle && step.title ? [convertStepTitleToDynamicHeading(step.title)] : [],
-    ...step.description ? [convertStepDescriptionToDynamicParagraph(step.description)] : [],
-    ...step.layout || []
-  ];
+function cleanModelWithNumberSchema(model) {
+  return isNumber2(model) ? model : null;
 }
-
-// src/legacy/step/layoutStep/utils/inline-reference-utils.ts
-function inlineReferences({
-  layout,
-  schemas,
-  actions,
-  model
-}) {
-  if (!layout) {
-    return [];
+function cleanModelWithBooleanSchema(model) {
+  return isBoolean2(model) ? model : null;
+}
+function cleanModelWithArraySchema(model, schema) {
+  if (!isArray2(model)) {
+    return null;
   }
-  if (!schemas) {
-    return layout;
+  if (!isListArraySchema(schema)) {
+    return null;
   }
-  return layout.map((component) => {
-    if (component.type === "form") {
-      return inlineFormSchema({ formComponent: component, schemas });
+  if (model.length > 0) {
+    const expectedType = typeof model[0];
+    if (!model.every((item) => typeof item === expectedType)) {
+      return new Array(model.length).fill(null);
     }
-    if (component.type === "decision") {
-      return inlineDecisionActions({ decisionComponent: component, actions });
+  }
+  return model.map((childModel) => getValidModelParts(childModel, schema.items));
+}
+function cleanObjectModelWithObjectSchema(model, schema) {
+  return Object.keys(schema.properties).reduce((cleanedModel, property) => {
+    if (model && !isUndefined2(model[property])) {
+      const subModel = model[property];
+      const subSchema = schema.properties[property];
+      const newValue = getValidModelParts(subModel, subSchema);
+      if (!isNull2(newValue)) {
+        return __spreadProps(__spreadValues({}, cleanedModel), { [property]: newValue });
+      }
     }
-    if (component.type === "button") {
-      return inlineAction2({ actionComponent: component, actions });
+    return cleanedModel;
+  }, {});
+}
+function cleanObjectModelWithAllOfSchema(model, schema) {
+  return schema.allOf.reduce((cleanObjectModel, nestedSchema) => {
+    const validSubsetOfModel = getValidObjectModelParts(model, nestedSchema);
+    if (isObjectModel2(validSubsetOfModel)) {
+      return __spreadValues(__spreadValues({}, cleanObjectModel), validSubsetOfModel);
     }
-    if (component.type === "box") {
-      return __spreadProps(__spreadValues({}, component), {
-        components: inlineReferences({ layout: component.components, schemas, actions, model })
-      });
+    return cleanObjectModel;
+  }, {});
+}
+function cleanObjectModelWithOneOfSchema(model, schema) {
+  return schema.oneOf.map((nestedSchema) => getValidObjectModelParts(model, nestedSchema)).reduce((combined, current) => {
+    if (isNull2(combined)) {
+      return current;
     }
-    if (component.type === "modal") {
-      return __spreadProps(__spreadValues({}, component), {
-        components: inlineReferences({
-          layout: component.content.components,
-          schemas,
-          actions,
-          model
-        })
-      });
+    if (isObjectModel2(combined) && isObjectModel2(current)) {
+      return deepMergeObject(combined, current);
     }
-    if (component.type === "columns") {
-      return __spreadProps(__spreadValues({}, component), {
-        left: inlineReferences({ layout: component.left, schemas, actions, model }),
-        right: inlineReferences({ layout: component.right, schemas, actions, model })
-      });
+    if (isNull2(current)) {
+      return combined;
     }
-    return component;
-  });
-}
-function inlineFormSchema({
-  formComponent,
-  schemas
-}) {
-  if (formComponent.schemaId) {
-    return {
-      type: "form",
-      margin: formComponent.margin,
-      schema: getSchemaById(schemas, formComponent.schemaId)
-    };
-  }
-  if (formComponent.schema && isReference(formComponent.schema) && formComponent.schema.$ref) {
-    return {
-      type: "form",
-      margin: formComponent.margin,
-      schema: getSchemaById(schemas, formComponent.schema.$ref)
-    };
-  }
-  if (formComponent.schema && !isReference(formComponent.schema)) {
-    return __spreadValues({}, formComponent);
-  }
-  throw new Error('Invalid form layout component. Missing "schema" or "schemaId" properties.');
+    return current;
+  }, null);
 }
-function inlineDecisionActions({
-  decisionComponent,
-  actions
-}) {
-  var _a;
-  const newOptions = (_a = decisionComponent == null ? void 0 : decisionComponent.options) == null ? void 0 : _a.map(
-    (option) => option.action && isReference(option.action) ? __spreadProps(__spreadValues({}, option), {
-      action: getActionById(actions, option.action.$ref)
-    }) : option
+function deepMergeObject(object1, object2) {
+  return Object.keys(object2).reduce(
+    (acc, property) => {
+      const object1Property = object1[property];
+      const object2Property = object2[property];
+      if (isObjectModel2(object1Property) && isObjectModel2(object2Property)) {
+        return __spreadProps(__spreadValues({}, acc), {
+          [property]: deepMergeObject(object1Property, object2Property)
+        });
+      }
+      return __spreadProps(__spreadValues({}, acc), {
+        [property]: object2[property]
+      });
+    },
+    __spreadValues({}, object1)
   );
-  return __spreadProps(__spreadValues({}, decisionComponent), {
-    options: newOptions
-  });
 }
-function inlineAction2({
-  actionComponent,
-  actions
-}) {
-  var _a;
-  if (actionComponent.action && isReference(actionComponent.action) && ((_a = actionComponent.action) == null ? void 0 : _a.$ref)) {
-    const newAction = getActionById(actions, actionComponent.action.$ref);
-    return convertStepActionToDynamicAction(newAction);
+
+// src/legacy/common/validators/models/model-validators.ts
+var getValidModelParts = (model, schema) => {
+  if (isObjectModel2(model)) {
+    return getValidObjectModelParts(model, schema);
   }
-  return actionComponent;
-}
-function getSchemaById(schemas, id) {
-  const schema = schemas.find((schema2) => schema2.$id === id);
-  if (!schema) {
-    throw new Error(`Fatal Error. Schema not found. $id ${id}`);
+  if (isArrayModel2(model)) {
+    return getValidArrayModelParts(model, schema);
   }
-  return schema;
-}
-function getActionById(actions, id) {
-  const action = actions.find((action2) => action2.$id === id);
-  if (!action) {
-    throw new Error(`Fatal Error. Action not found. $id ${id}`);
-  }
-  return action;
-}
-function isReference(block) {
-  return Object.hasOwnProperty.call(block, "$ref");
-}
-
-// src/legacy/dynamicFlow/DynamicFlow.tsx
-var import_react49 = require("react");
-var import_react_intl39 = require("react-intl");
-
-// src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
-var import_react7 = require("react");
-
-// src/legacy/common/contexts/dynamicFlowContexts/usePendingPromiseCounter.ts
-var import_react6 = require("react");
-function usePendingPromiseCounter() {
-  const [count, setCount] = (0, import_react6.useState)(0);
-  const addPendingPromise = (0, import_react6.useCallback)(
-    (promise) => {
-      setCount((c) => c + 1);
-      promise.catch(noop2).finally(() => delayUntilNextCycle(() => setCount((c) => Math.max(0, c - 1))));
-    },
-    [setCount]
-  );
-  return { addPendingPromise, pendingPromises: count };
-}
-var delayUntilNextCycle = (fn) => setTimeout(() => fn(), 0);
-var noop2 = () => {
+  return getValidBasicModelOrNull(model, schema);
 };
-
-// src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var defaultContextValue = {
-  loading: false,
-  registerPersistAsyncPromise: (promise) => {
+function getValidBasicModelOrNull(model, schema) {
+  if (isNull2(model)) {
+    return null;
   }
-};
-var DFContext = (0, import_react7.createContext)(defaultContextValue);
-var DynamicFlowProvider = ({ loading, children }) => {
-  const { pendingPromises, addPendingPromise } = usePendingPromiseCounter();
-  const providerValue = (0, import_react7.useMemo)(() => {
-    return {
-      loading: loading || pendingPromises > 0,
-      registerPersistAsyncPromise: addPendingPromise
-    };
-  }, [loading, pendingPromises, addPendingPromise]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DFContext.Provider, { value: providerValue, children });
-};
-var useDynamicFlow = () => {
-  const context = (0, import_react7.useContext)(DFContext);
-  return context || defaultContextValue;
-};
-
-// src/legacy/common/contexts/eventsContext/EventsContext.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var EventsContext = (0, import_react8.createContext)({
-  triggerEvent: () => {
+  if (schema.oneOf) {
+    return cleanBasicModelWithOneOfSchema(model, schema);
   }
-});
-function EventsContextProvider({ metadata, children, onEvent }) {
-  const value = (0, import_react8.useMemo)(
-    () => ({ triggerEvent: getEventDispatcher(onEvent, metadata) }),
-    [onEvent, metadata]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EventsContext.Provider, { value, children });
-}
-function useEventDispatcher() {
-  const { triggerEvent } = (0, import_react8.useContext)(EventsContext);
-  return triggerEvent;
-}
-var getEventDispatcher = (onEvent, metadata) => (eventName, properties = {}) => {
-  try {
-    onEvent(eventName, __spreadValues(__spreadValues({}, metadata), properties));
-  } catch (e) {
+  if (!isUndefined2(schema.const) && model === schema.const) {
+    return model;
   }
-};
-
-// src/legacy/common/contexts/logContext/LogContext.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var getLogger = (level, onLog, flowId = "UNKNOWN-FLOW-ID", stepId = "UNKNOWN-FLOW-ID") => (title, description, extra) => {
-  try {
-    onLog(level, `Dynamic Flow ${level} - ${title} - ${description}`, __spreadValues({
-      flowId,
-      stepId
-    }, extra));
-  } catch (e) {
+  if (schema.type) {
+    switch (schema.type) {
+      case "string":
+        return cleanModelWithStringSchema(model);
+      case "number":
+      case "integer":
+        return cleanModelWithNumberSchema(model);
+      case "boolean":
+        return cleanModelWithBooleanSchema(model);
+      default:
+        return null;
+    }
   }
-};
-var LogContext = (0, import_react9.createContext)(null);
-function LogProvider({ flowId, stepId, children, onLog }) {
-  const value = (0, import_react9.useMemo)(
-    () => ({
-      debug: getLogger("debug", onLog, flowId, stepId),
-      info: getLogger("info", onLog, flowId, stepId),
-      warning: getLogger("warning", onLog, flowId, stepId),
-      error: getLogger("error", onLog, flowId, stepId),
-      critical: getLogger("critical", onLog, flowId, stepId)
-    }),
-    [onLog, flowId, stepId]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LogContext.Provider, { value, children });
+  return null;
 }
-var useLogger = () => {
-  const logging = (0, import_react9.useContext)(LogContext);
-  if (logging == null) {
-    throw new Error(
-      "Logging context not found. Did you forget to wrap your component in a <LogProvider />?"
-    );
+function getValidObjectModelParts(model, schema) {
+  if (isBasicSchema(schema) || isArraySchema2(schema) || isNull2(model)) {
+    return null;
   }
-  return logging;
-};
-
-// src/common/cameraCapture/utils/mobile-utils.ts
-var isMobile = () => isMobileScreenSize() && (isTouchScreen() || isMobileUA());
-var isMobileUA = (userAgent = window.navigator.userAgent) => (
-  // eslint-disable-next-line regexp/no-unused-capturing-group
-  /mobi|\b(iphone|android|blackberry|webos|windows phone)\b/i.test(userAgent)
-);
-var isMobileScreenSize = (width = window.screen.width, height = window.screen.height) => width < 768 || height < 768;
-var isTouchScreen = (navigator2 = window.navigator, matchMedia = window.matchMedia) => {
-  if ("maxTouchPoints" in navigator2) {
-    return navigator2.maxTouchPoints > 0;
+  if (schema.allOf) {
+    return cleanObjectModelWithAllOfSchema(model, schema);
   }
-  const mQ = matchMedia == null ? void 0 : matchMedia("(pointer:coarse)");
-  if ((mQ == null ? void 0 : mQ.media) === "(pointer:coarse)") {
-    return Boolean(mQ.matches);
+  if (schema.oneOf) {
+    return cleanObjectModelWithOneOfSchema(model, schema);
   }
-  return false;
-};
-
-// src/common/utils/debounce.ts
-var debounce2 = (callback, waitMs) => {
-  let timeoutId = null;
-  let lastArgs = null;
-  const clearTimer = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-    lastArgs = null;
-  };
-  const debouncedFn = (...args) => {
-    lastArgs = args;
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      callback(...lastArgs);
-      timeoutId = null;
-      lastArgs = null;
-    }, waitMs);
-  };
-  debouncedFn.cancel = () => {
-    if (timeoutId !== null) {
-      clearTimer();
-    }
-  };
-  debouncedFn.flush = () => {
-    if (timeoutId !== null) {
-      callback(...lastArgs);
-      clearTimer();
-    }
-  };
-  debouncedFn.isPending = () => timeoutId !== null;
-  return debouncedFn;
-};
-
-// src/legacy/common/utils/api-utils.ts
-function isStatus2xx(status) {
-  return status >= 200 && status < 300;
-}
-
-// src/legacy/common/validators/types/type-validators.ts
-var isString2 = (value) => typeof value === "string";
-var isNumber2 = (value) => typeof value === "number" && !Number.isNaN(value);
-var isInteger2 = (value) => {
-  return isNumber2(value) && Math.floor(value) === value;
-};
-var isBoolean2 = (value) => typeof value === "boolean";
-var isObject2 = (value) => !isNull2(value) && !isUndefined2(value) && (value == null ? void 0 : value.constructor) === Object;
-var isArray2 = (value) => Array.isArray(value);
-var isNull2 = (value) => value === null;
-var isUndefined2 = (value) => typeof value === "undefined";
-
-// src/legacy/common/validators/values/value-validators.ts
-var isEmpty = (value) => isString2(value) && value.length === 0 || (isObject2(value) || isArray2(value)) && Object.keys(value).length === 0;
-
-// src/legacy/common/validators/models/model-utils.ts
-function cleanBasicModelWithOneOfSchema(model, schema) {
-  return schema.oneOf.some(
-    (nestedSchema) => getValidBasicModelOrNull(model, nestedSchema) === model
-  ) ? model : null;
-}
-function cleanArrayModelWithOneOfSchema(model, schema) {
-  var _a;
-  const validModels = schema.oneOf.map((nestedSchema) => getValidArrayModelOrNull(model, nestedSchema)).filter((item) => item !== null);
-  if (validModels.length === 0) {
-    return null;
+  if (!isUndefined2(schema.const) && isEqual(model, schema.const)) {
+    return model;
   }
-  return (_a = validModels.find((model2) => model2.some((item) => item !== null))) != null ? _a : validModels[0];
+  return isObjectSchema2(schema) ? cleanObjectModelWithObjectSchema(model, schema) : null;
 }
-function getValidArrayModelOrNull(model, schema) {
-  if (!isArraySchema2(schema)) {
-    return null;
+function getValidArrayModelParts(model, schema) {
+  if (isOneOfSchema2(schema)) {
+    return cleanArrayModelWithOneOfSchema(model, schema);
   }
-  if (!isListArraySchema(schema)) {
+  if (!isArraySchema2(schema)) {
     return null;
   }
   return cleanModelWithArraySchema(model, schema);
 }
-function cleanModelWithStringSchema(model) {
-  return isString2(model) && !isEmpty(model) ? model : null;
+
+// src/legacy/common/validators/validationFailures/validation-failures.utils.ts
+function isValidRequired(value, isRequired = false) {
+  return !isRequired || !isUndefined2(value);
 }
-function cleanModelWithNumberSchema(model) {
-  return isNumber2(model) ? model : null;
+function isValidRequiredArray(value, isRequired = false) {
+  return !isRequired || isArray2(value);
 }
-function cleanModelWithBooleanSchema(model) {
-  return isBoolean2(model) ? model : null;
-}
-function cleanModelWithArraySchema(model, schema) {
-  if (!isArray2(model)) {
-    return null;
-  }
-  if (!isListArraySchema(schema)) {
-    return null;
-  }
-  if (model.length > 0) {
-    const expectedType = typeof model[0];
-    if (!model.every((item) => typeof item === expectedType)) {
-      return new Array(model.length).fill(null);
-    }
-  }
-  return model.map((childModel) => getValidModelParts(childModel, schema.items));
-}
-function cleanObjectModelWithObjectSchema(model, schema) {
-  return Object.keys(schema.properties).reduce((cleanedModel, property) => {
-    if (model && !isUndefined2(model[property])) {
-      const subModel = model[property];
-      const subSchema = schema.properties[property];
-      const newValue = getValidModelParts(subModel, subSchema);
-      if (!isNull2(newValue)) {
-        return __spreadProps(__spreadValues({}, cleanedModel), { [property]: newValue });
-      }
-    }
-    return cleanedModel;
-  }, {});
-}
-function cleanObjectModelWithAllOfSchema(model, schema) {
-  return schema.allOf.reduce((cleanObjectModel, nestedSchema) => {
-    const validSubsetOfModel = getValidObjectModelParts(model, nestedSchema);
-    if (isObjectModel2(validSubsetOfModel)) {
-      return __spreadValues(__spreadValues({}, cleanObjectModel), validSubsetOfModel);
-    }
-    return cleanObjectModel;
-  }, {});
-}
-function cleanObjectModelWithOneOfSchema(model, schema) {
-  return schema.oneOf.map((nestedSchema) => getValidObjectModelParts(model, nestedSchema)).reduce((combined, current) => {
-    if (isNull2(combined)) {
-      return current;
-    }
-    if (isObjectModel2(combined) && isObjectModel2(current)) {
-      return deepMergeObject(combined, current);
-    }
-    if (isNull2(current)) {
-      return combined;
-    }
-    return current;
-  }, null);
-}
-function deepMergeObject(object1, object2) {
-  return Object.keys(object2).reduce(
-    (acc, property) => {
-      const object1Property = object1[property];
-      const object2Property = object2[property];
-      if (isObjectModel2(object1Property) && isObjectModel2(object2Property)) {
-        return __spreadProps(__spreadValues({}, acc), {
-          [property]: deepMergeObject(object1Property, object2Property)
-        });
-      }
-      return __spreadProps(__spreadValues({}, acc), {
-        [property]: object2[property]
-      });
-    },
-    __spreadValues({}, object1)
-  );
-}
-
-// src/legacy/common/validators/models/model-validators.ts
-var getValidModelParts = (model, schema) => {
-  if (isObjectModel2(model)) {
-    return getValidObjectModelParts(model, schema);
-  }
-  if (isArrayModel2(model)) {
-    return getValidArrayModelParts(model, schema);
-  }
-  return getValidBasicModelOrNull(model, schema);
-};
-function getValidBasicModelOrNull(model, schema) {
-  if (isNull2(model)) {
-    return null;
-  }
-  if (schema.oneOf) {
-    return cleanBasicModelWithOneOfSchema(model, schema);
-  }
-  if (!isUndefined2(schema.const) && model === schema.const) {
-    return model;
-  }
-  if (schema.type) {
-    switch (schema.type) {
-      case "string":
-        return cleanModelWithStringSchema(model);
-      case "number":
-      case "integer":
-        return cleanModelWithNumberSchema(model);
-      case "boolean":
-        return cleanModelWithBooleanSchema(model);
-      default:
-        return null;
-    }
-  }
-  return null;
-}
-function getValidObjectModelParts(model, schema) {
-  if (isBasicSchema(schema) || isArraySchema2(schema) || isNull2(model)) {
-    return null;
-  }
-  if (schema.allOf) {
-    return cleanObjectModelWithAllOfSchema(model, schema);
-  }
-  if (schema.oneOf) {
-    return cleanObjectModelWithOneOfSchema(model, schema);
-  }
-  if (!isUndefined2(schema.const) && isEqual(model, schema.const)) {
-    return model;
-  }
-  return isObjectSchema2(schema) ? cleanObjectModelWithObjectSchema(model, schema) : null;
-}
-function getValidArrayModelParts(model, schema) {
-  if (isOneOfSchema2(schema)) {
-    return cleanArrayModelWithOneOfSchema(model, schema);
-  }
-  if (!isArraySchema2(schema)) {
-    return null;
-  }
-  return cleanModelWithArraySchema(model, schema);
-}
-
-// src/legacy/common/validators/validationFailures/validation-failures.utils.ts
-function isValidRequired(value, isRequired = false) {
-  return !isRequired || !isUndefined2(value);
-}
-function isValidRequiredArray(value, isRequired = false) {
-  return !isRequired || isArray2(value);
-}
-function isValidMinLength(value, minLength) {
-  return !isNumber2(minLength) || isString2(value) && value.length >= minLength;
+function isValidMinLength(value, minLength) {
+  return !isNumber2(minLength) || isString2(value) && value.length >= minLength;
 }
 function isValidMaxLength(value, maxLength) {
   return !isNumber2(maxLength) || isString2(value) && value.length <= maxLength;
@@ -12578,6 +12274,310 @@ function useStepPolling(polling, onAction) {
   });
 }
 
+// src/legacy/step/layoutStep/utils/layout-utils.ts
+function convertStepToLayout(step, { displayStepTitle = true } = {}) {
+  if (step.layout) {
+    return addMissingTitleAndDescriptionToStep(step, displayStepTitle);
+  }
+  switch (step.type) {
+    case "final":
+      return convertFinalStepToDynamicLayout(step);
+    case "decision":
+      return convertDecisionStepToDynamicLayout(step);
+    case "external":
+      return convertExternalStepToDynamicLayout(step);
+    default:
+      return convertFormStepToDynamicLayout(step);
+  }
+}
+function convertCommonComponents(step) {
+  const layout = [];
+  if (step.title) {
+    layout.push(convertStepTitleToDynamicHeading(step.title));
+  }
+  if (step.image) {
+    const image = convertStepImageToDynamicImage(step.image);
+    layout.push(image);
+  }
+  if (step.description) {
+    layout.push(convertStepDescriptionToDynamicParagraph(step.description));
+  }
+  return layout;
+}
+function convertExternalStepToDynamicLayout(step) {
+  return [...convertCommonComponents(step), convertStepToExternalComponent(step)];
+}
+function convertStepToExternalComponent(step) {
+  return {
+    type: "external",
+    requestUrl: step.requestUrl,
+    polling: step.polling,
+    responseHandlers: step.responseHandlers,
+    retryTitle: step.retryTitle
+  };
+}
+function convertFormStepToDynamicLayout(step) {
+  const layout = convertCommonComponents(step);
+  if (step.reviewFields) {
+    layout.push(convertStepReviewToDynamicReview(step.reviewFields));
+  }
+  if (step.schemas) {
+    layout.push(...getSchemaLayout(step));
+  }
+  if (step.actions) {
+    const actions = step.actions.map(convertStepActionToDynamicAction);
+    layout.push(dynamicBox(actions, "md"));
+  }
+  return layout;
+}
+function convertFinalStepToDynamicLayout(step) {
+  const layout = [];
+  if (step.details) {
+    if (step.details.image) {
+      const image = convertFinalStepImageToDynamicImage(step.details.image);
+      layout.push(image);
+    }
+    if (step.details.title) {
+      layout.push(convertStepTitleToDynamicHeading(step.details.title));
+    }
+    if (step.details.description) {
+      layout.push(convertStepDescriptionToDynamicParagraph(step.details.description));
+    }
+  }
+  if (step.actions) {
+    const actions = step.actions.map(
+      (action) => convertStepActionToDynamicAction(__spreadProps(__spreadValues({}, action), { type: action.type || "primary" }))
+    );
+    layout.push(dynamicBox(actions, "md"));
+  }
+  return layout;
+}
+function convertDecisionStepToDynamicLayout(step) {
+  const layout = convertCommonComponents(step);
+  if (step.options) {
+    layout.push(convertStepDecisionToDynamicDecision(step.options));
+  }
+  return layout;
+}
+function dynamicBox(components, size) {
+  return {
+    type: "box",
+    width: size || "md",
+    components
+  };
+}
+function convertStepTitleToDynamicHeading(title) {
+  return {
+    type: "heading",
+    text: title,
+    size: "lg",
+    margin: "lg",
+    align: "center"
+  };
+}
+function convertStepDescriptionToDynamicParagraph(description) {
+  return {
+    type: "paragraph",
+    text: description,
+    align: "center"
+  };
+}
+function convertStepSchemaToDynamicForm(schema) {
+  return { type: "form", schema };
+}
+function convertStepDecisionToDynamicDecision(options) {
+  return {
+    type: "decision",
+    options: options.map(convertStepDecisionOption)
+  };
+}
+function convertStepDecisionOption(option) {
+  return {
+    title: option.title,
+    description: option.description,
+    action: {
+      title: option.title,
+      method: "GET",
+      url: option.url,
+      disabled: option.disabled
+    }
+  };
+}
+function convertStepImageToDynamicImage(image) {
+  return {
+    type: "image",
+    url: image.url,
+    text: image.text,
+    margin: image.margin || "lg",
+    size: image.size || "md"
+  };
+}
+function convertFinalStepImageToDynamicImage(image) {
+  return typeof image === "string" ? {
+    type: "image",
+    url: image,
+    text: void 0,
+    margin: "lg",
+    size: "md"
+  } : convertStepImageToDynamicImage(image);
+}
+function convertStepActionToDynamicAction(action) {
+  const newAction = __spreadProps(__spreadValues({}, action), { title: action.title });
+  return {
+    type: "button",
+    action: newAction
+  };
+}
+function convertStepReviewToDynamicReview(reviewFields) {
+  return {
+    type: "review",
+    title: reviewFields.title,
+    fields: reviewFields.fields.map(convertReviewFieldToDefinition)
+  };
+}
+function convertReviewFieldToDefinition(reviewField) {
+  return {
+    label: reviewField.title,
+    value: reviewField.value
+  };
+}
+function getSchemaLayout(step) {
+  const layout = [];
+  if (step.schemas && step.schemas[0]) {
+    const schema = step.schemas[0];
+    const dynamicForm = convertStepSchemaToDynamicForm(schema);
+    if (isWideForm()) {
+      layout.push(dynamicForm);
+    } else {
+      layout.push(dynamicBox([dynamicForm], "md"));
+    }
+  }
+  return layout;
+}
+function isWideForm() {
+  return false;
+}
+function addMissingTitleAndDescriptionToStep(step, displayStepTitle) {
+  return [
+    ...displayStepTitle && step.title ? [convertStepTitleToDynamicHeading(step.title)] : [],
+    ...step.description ? [convertStepDescriptionToDynamicParagraph(step.description)] : [],
+    ...step.layout || []
+  ];
+}
+
+// src/legacy/step/layoutStep/utils/inline-reference-utils.ts
+function inlineReferences({
+  layout,
+  schemas,
+  actions,
+  model
+}) {
+  if (!layout) {
+    return [];
+  }
+  if (!schemas) {
+    return layout;
+  }
+  return layout.map((component) => {
+    if (component.type === "form") {
+      return inlineFormSchema({ formComponent: component, schemas });
+    }
+    if (component.type === "decision") {
+      return inlineDecisionActions({ decisionComponent: component, actions });
+    }
+    if (component.type === "button") {
+      return inlineAction2({ actionComponent: component, actions });
+    }
+    if (component.type === "box") {
+      return __spreadProps(__spreadValues({}, component), {
+        components: inlineReferences({ layout: component.components, schemas, actions, model })
+      });
+    }
+    if (component.type === "modal") {
+      return __spreadProps(__spreadValues({}, component), {
+        components: inlineReferences({
+          layout: component.content.components,
+          schemas,
+          actions,
+          model
+        })
+      });
+    }
+    if (component.type === "columns") {
+      return __spreadProps(__spreadValues({}, component), {
+        left: inlineReferences({ layout: component.left, schemas, actions, model }),
+        right: inlineReferences({ layout: component.right, schemas, actions, model })
+      });
+    }
+    return component;
+  });
+}
+function inlineFormSchema({
+  formComponent,
+  schemas
+}) {
+  if (formComponent.schemaId) {
+    return {
+      type: "form",
+      margin: formComponent.margin,
+      schema: getSchemaById(schemas, formComponent.schemaId)
+    };
+  }
+  if (formComponent.schema && isReference(formComponent.schema) && formComponent.schema.$ref) {
+    return {
+      type: "form",
+      margin: formComponent.margin,
+      schema: getSchemaById(schemas, formComponent.schema.$ref)
+    };
+  }
+  if (formComponent.schema && !isReference(formComponent.schema)) {
+    return __spreadValues({}, formComponent);
+  }
+  throw new Error('Invalid form layout component. Missing "schema" or "schemaId" properties.');
+}
+function inlineDecisionActions({
+  decisionComponent,
+  actions
+}) {
+  var _a;
+  const newOptions = (_a = decisionComponent == null ? void 0 : decisionComponent.options) == null ? void 0 : _a.map(
+    (option) => option.action && isReference(option.action) ? __spreadProps(__spreadValues({}, option), {
+      action: getActionById(actions, option.action.$ref)
+    }) : option
+  );
+  return __spreadProps(__spreadValues({}, decisionComponent), {
+    options: newOptions
+  });
+}
+function inlineAction2({
+  actionComponent,
+  actions
+}) {
+  var _a;
+  if (actionComponent.action && isReference(actionComponent.action) && ((_a = actionComponent.action) == null ? void 0 : _a.$ref)) {
+    const newAction = getActionById(actions, actionComponent.action.$ref);
+    return convertStepActionToDynamicAction(newAction);
+  }
+  return actionComponent;
+}
+function getSchemaById(schemas, id) {
+  const schema = schemas.find((schema2) => schema2.$id === id);
+  if (!schema) {
+    throw new Error(`Fatal Error. Schema not found. $id ${id}`);
+  }
+  return schema;
+}
+function getActionById(actions, id) {
+  const action = actions.find((action2) => action2.$id === id);
+  if (!action) {
+    throw new Error(`Fatal Error. Action not found. $id ${id}`);
+  }
+  return action;
+}
+function isReference(block) {
+  return Object.hasOwnProperty.call(block, "$ref");
+}
+
 // src/legacy/step/layoutStep/LayoutStep.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var getComponents = (step, options) => {