@wise/dynamic-flow-client 1.1.0 → 1.2.0

package/build/main.js

@@ -541,92 +541,87 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/step/layoutStep/utils/layout-utils.ts
-function convertStepToLayout(step33, { displayStepTitle = true } = {}) {
-  if (!step33 || !step33.type) {
-    throw new Error("Missing step type");
+function convertStepToLayout(step35, { displayStepTitle = true } = {}) {
+  if (step35.layout) {
+    return addMissingTitleAndDescriptionToStep(step35, displayStepTitle);
   }
-  if (step33.layout) {
-    return addMissingTitleAndDescriptionToStep(step33, displayStepTitle);
-  }
-  switch (step33.type) {
+  switch (step35.type) {
     case "final":
-      return convertFinalStepToDynamicLayout(step33);
+      return convertFinalStepToDynamicLayout(step35);
     case "decision":
-      return convertDecisionStepToDynamicLayout(step33);
-    case "form":
-      return convertFormStepToDynamicLayout(step33);
+      return convertDecisionStepToDynamicLayout(step35);
     case "external":
-      return convertExternalStepToDynamicLayout(step33);
+      return convertExternalStepToDynamicLayout(step35);
     default:
-      throw new Error("invalid step type");
+      return convertFormStepToDynamicLayout(step35);
   }
 }
-function convertCommonComponents(step33) {
+function convertCommonComponents(step35) {
   const layout6 = [];
-  if (step33.title) {
-    layout6.push(convertStepTitleToDynamicHeading(step33.title));
+  if (step35.title) {
+    layout6.push(convertStepTitleToDynamicHeading(step35.title));
   }
-  if (step33.image) {
-    const image = convertStepImageToDynamicImage(step33.image);
+  if (step35.image) {
+    const image = convertStepImageToDynamicImage(step35.image);
     layout6.push(image);
   }
-  if (step33.description) {
-    layout6.push(convertStepDescriptionToDynamicParagraph(step33.description));
+  if (step35.description) {
+    layout6.push(convertStepDescriptionToDynamicParagraph(step35.description));
   }
   return layout6;
 }
-function convertExternalStepToDynamicLayout(step33) {
-  return [...convertCommonComponents(step33), convertStepToExternalComponent(step33)];
+function convertExternalStepToDynamicLayout(step35) {
+  return [...convertCommonComponents(step35), convertStepToExternalComponent(step35)];
 }
-function convertStepToExternalComponent(step33) {
+function convertStepToExternalComponent(step35) {
   return {
     type: "external",
-    requestUrl: step33.requestUrl,
-    polling: step33.polling,
-    responseHandlers: step33.responseHandlers,
-    retryTitle: step33.retryTitle
+    requestUrl: step35.requestUrl,
+    polling: step35.polling,
+    responseHandlers: step35.responseHandlers,
+    retryTitle: step35.retryTitle
   };
 }
-function convertFormStepToDynamicLayout(step33) {
-  const layout6 = convertCommonComponents(step33);
-  if (step33.reviewFields) {
-    layout6.push(convertStepReviewToDynamicReview(step33.reviewFields));
+function convertFormStepToDynamicLayout(step35) {
+  const layout6 = convertCommonComponents(step35);
+  if (step35.reviewFields) {
+    layout6.push(convertStepReviewToDynamicReview(step35.reviewFields));
   }
-  if (step33.schemas) {
-    layout6.push(...getSchemaLayout(step33));
+  if (step35.schemas) {
+    layout6.push(...getSchemaLayout(step35));
   }
-  if (step33.actions) {
-    const actions = step33.actions.map(convertStepActionToDynamicAction);
+  if (step35.actions) {
+    const actions = step35.actions.map(convertStepActionToDynamicAction);
     layout6.push(dynamicBox(actions, "md"));
   }
   return layout6;
 }
-function convertFinalStepToDynamicLayout(step33) {
+function convertFinalStepToDynamicLayout(step35) {
   const layout6 = [];
-  if (step33.details) {
-    if (step33.details.image) {
-      const image = convertFinalStepImageToDynamicImage(step33.details.image);
+  if (step35.details) {
+    if (step35.details.image) {
+      const image = convertFinalStepImageToDynamicImage(step35.details.image);
       layout6.push(image);
     }
-    if (step33.details.title) {
-      layout6.push(convertStepTitleToDynamicHeading(step33.details.title));
+    if (step35.details.title) {
+      layout6.push(convertStepTitleToDynamicHeading(step35.details.title));
     }
-    if (step33.details.description) {
-      layout6.push(convertStepDescriptionToDynamicParagraph(step33.details.description));
+    if (step35.details.description) {
+      layout6.push(convertStepDescriptionToDynamicParagraph(step35.details.description));
     }
   }
-  if (step33.actions) {
-    const actions = step33.actions.map(
+  if (step35.actions) {
+    const actions = step35.actions.map(
       (action2) => convertStepActionToDynamicAction(__spreadProps(__spreadValues({}, action2), { type: action2.type || "primary" }))
     );
     layout6.push(dynamicBox(actions, "md"));
   }
   return layout6;
 }
-function convertDecisionStepToDynamicLayout(step33) {
-  const layout6 = convertCommonComponents(step33);
-  if (step33.options) {
-    layout6.push(convertStepDecisionToDynamicDecision(step33.options));
+function convertDecisionStepToDynamicLayout(step35) {
+  const layout6 = convertCommonComponents(step35);
+  if (step35.options) {
+    layout6.push(convertStepDecisionToDynamicDecision(step35.options));
   }
   return layout6;
 }
@@ -712,10 +707,10 @@ function convertReviewFieldToDefinition(reviewField) {
     value: reviewField.value
   };
 }
-function getSchemaLayout(step33) {
+function getSchemaLayout(step35) {
   const layout6 = [];
-  if (step33.schemas && step33.schemas[0]) {
-    const schema2 = step33.schemas[0];
+  if (step35.schemas && step35.schemas[0]) {
+    const schema2 = step35.schemas[0];
     const dynamicForm = convertStepSchemaToDynamicForm(schema2);
     if (isWideForm()) {
       layout6.push(dynamicForm);
@@ -728,11 +723,11 @@ function getSchemaLayout(step33) {
 function isWideForm() {
   return false;
 }
-function addMissingTitleAndDescriptionToStep(step33, displayStepTitle) {
+function addMissingTitleAndDescriptionToStep(step35, displayStepTitle) {
   return [
-    ...displayStepTitle && step33.title ? [convertStepTitleToDynamicHeading(step33.title)] : [],
-    ...step33.description ? [convertStepDescriptionToDynamicParagraph(step33.description)] : [],
-    ...step33.layout || []
+    ...displayStepTitle && step35.title ? [convertStepTitleToDynamicHeading(step35.title)] : [],
+    ...step35.description ? [convertStepDescriptionToDynamicParagraph(step35.description)] : [],
+    ...step35.layout || []
   ];
 }
 
@@ -1711,23 +1706,19 @@ function shouldDebounceSchema(schema2) {
 }
 
 // src/common/utils/step-utils.ts
-var stepType = {
-  LAYOUT: "layout",
-  CAMERA: "camera"
-};
-var isCameraStep = (step33) => {
-  return isFormStep(step33) && hasSingleAction(step33) && hasSingleFileUploadSchemaWithCameraOnly(step33);
+var isCameraStep = (step35) => {
+  return isFormStep(step35) && hasSingleAction(step35) && hasSingleFileUploadSchemaWithCameraOnly(step35);
 };
-var isFormStep = (step33) => (step33 == null ? void 0 : step33.type) === "form";
-var hasSingleAction = (step33) => {
+var isFormStep = (step35) => !step35.type || step35.type === "form";
+var hasSingleAction = (step35) => {
   var _a;
-  return ((_a = step33 == null ? void 0 : step33.actions) == null ? void 0 : _a.length) === 1;
+  return ((_a = step35 == null ? void 0 : step35.actions) == null ? void 0 : _a.length) === 1;
 };
-var hasSingleFileUploadSchemaWithCameraOnly = (step33) => {
-  if (!step33.schemas) {
+var hasSingleFileUploadSchemaWithCameraOnly = (step35) => {
+  if (!step35.schemas) {
     return false;
   }
-  const schemas = filterHiddenSchemas(step33.schemas);
+  const schemas = filterHiddenSchemas(step35.schemas);
   if ((schemas == null ? void 0 : schemas.length) !== 1) {
     return false;
   }
@@ -1749,12 +1740,6 @@ var filterHiddenSchemas = (schemas) => {
     return (schema2 == null ? void 0 : schema2.hidden) !== true;
   });
 };
-var getStepType = (step33) => {
-  if (isCameraStep(step33)) {
-    return stepType.CAMERA;
-  }
-  return stepType.LAYOUT;
-};
 
 // src/common/hooks/useDebouncedFunction/useDebouncedFunction.tsx
 function useDebouncedFunction(callback, waitMs) {
@@ -2101,13 +2086,57 @@ var DynamicBox_default = DynamicBox;
 
 // src/layout/button/DynamicButton.tsx
 var import_components2 = require("@transferwise/components");
+
+// src/layout/button/utils.ts
+var priorities = {
+  primary: "primary",
+  secondary: "secondary",
+  link: "tertiary",
+  positive: "primary",
+  negative: "primary"
+};
+var getButtonPriority = (component) => {
+  var _a;
+  const actionType = component.action.type;
+  return (_a = component.control) != null ? _a : actionType ? priorities[actionType] : "secondary";
+};
+var types = {
+  primary: "neutral",
+  secondary: "neutral",
+  link: "neutral",
+  positive: "positive",
+  negative: "negative"
+};
+var getButtonType = (component) => {
+  var _a;
+  const actionType = component.action.type;
+  const type = (_a = component.context) != null ? _a : actionType ? types[actionType] : "neutral";
+  return type === "neutral" ? "accent" : type;
+};
+var getButtonSize = (size) => {
+  switch (size) {
+    case "xs":
+    case "sm":
+      return "sm";
+    case "lg":
+    case "xl":
+      return "lg";
+    case "md":
+    default:
+      return "md";
+  }
+};
+
+// src/layout/button/DynamicButton.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DynamicButton = (props) => {
+  var _a;
   const { component, onAction } = props;
   const componentAction = component.action;
-  const { type, priority } = getButtonTypeAndPriority(componentAction);
+  const type = getButtonType(component);
+  const priority = getButtonPriority(component);
   const { loading } = useDynamicFlow();
-  const className = getMarginBottom(component.margin || "md") + " " + getActionClasses(componentAction);
+  const className = getMarginBottom(component.margin || "md");
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_components2.Button,
     {
@@ -2116,44 +2145,12 @@ var DynamicButton = (props) => {
       priority,
       block: true,
       className,
-      disabled: componentAction.disabled || loading,
+      disabled: component.disabled || componentAction.disabled || loading,
       onClick: () => onAction(componentAction),
-      children: componentAction.title
+      children: (_a = component.title) != null ? _a : componentAction.title
     }
   );
 };
-var getActionClasses = (action2) => {
-  return action2.primary ? "btn-primary" : "";
-};
-var getButtonSize = (size) => {
-  switch (size) {
-    case "xs":
-    case "sm":
-      return "sm";
-    case "lg":
-    case "xl":
-      return "lg";
-    case "md":
-    default:
-      return "md";
-  }
-};
-var getButtonTypeAndPriority = (action2) => {
-  switch (action2.type) {
-    case "link":
-      return { type: "accent", priority: "tertiary" };
-    case "primary":
-      return { type: "accent", priority: "primary" };
-    case "secondary":
-      return { type: "accent", priority: "secondary" };
-    case "positive":
-      return { type: "positive", priority: "primary" };
-    case "negative":
-      return { type: "negative", priority: "primary" };
-    default:
-      return { type: "accent", priority: "secondary" };
-  }
-};
 var DynamicButton_default = DynamicButton;
 
 // src/layout/columns/DynamicColumns.tsx
@@ -2994,7 +2991,7 @@ var _FormControl = class extends import_react13.PureComponent {
     const {
       name,
       placeholder,
-      step: step33,
+      step: step35,
       countryCode,
       type,
       options,
@@ -3102,7 +3099,7 @@ var _FormControl = class extends import_react13.PureComponent {
             placeholder,
             readOnly,
             required,
-            step: step33,
+            step: step35,
             type: "number",
             value: getSafeStringOrNumberValue(value, { coerceValue: true }),
             onBlur: this.handleOnBlur,
@@ -4476,13 +4473,16 @@ var DynamicHeading = (props) => {
 };
 var DynamicHeading_default = DynamicHeading;
 
-// src/layout/info/DynamicInfo.tsx
+// src/layout/markdown/DynamicMarkdown.tsx
 var import_components14 = require("@transferwise/components");
 var import_jsx_runtime39 = require("react/jsx-runtime");
+var DynamicMarkdown = ({ component }) => {
+  const { content, align, margin } = component;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components14.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
+};
 var DynamicInfo = ({ component }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components14.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
-var DynamicInfo_default = DynamicInfo;
 
 // src/layout/image/DynamicImage.tsx
 var import_components15 = require("@transferwise/components");
@@ -4556,7 +4556,9 @@ var DynamicLayout = (props) => {
       case "divider":
         return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicDivider_default, { component }, getKey(component));
       case "info":
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicInfo_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicInfo, { component }, getKey(component));
+      case "markdown":
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicMarkdown, { component }, getKey(component));
       case "columns":
         return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           DynamicColumns_default,
@@ -4582,7 +4584,7 @@ var DynamicLayout = (props) => {
             onModelChange,
             onPersistAsync
           },
-          getKey(component)
+          getKey(__spreadProps(__spreadValues({}, component), { errors }))
         );
       case "button":
         return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
@@ -4836,7 +4838,10 @@ var BasicTypeSchema = (props) => {
   (0, import_react21.useEffect)(onSchemaChange, [props.schema]);
   (0, import_react21.useEffect)(() => {
     var _a2;
-    return setModel((_a2 = props.model) != null ? _a2 : null);
+    const newModel = (_a2 = props.model) != null ? _a2 : null;
+    if (newModel !== model) {
+      setModel(newModel);
+    }
   }, [props.model]);
   const formGroupClasses = {
     "form-group": true,
@@ -5193,17 +5198,17 @@ function useStepPolling(polling, onAction) {
 
 // src/step/layoutStep/LayoutStep.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var getComponents = (step33, options) => {
+var getComponents = (step35, options) => {
   var _a;
-  if (!step33 || isEmpty(step33) || !step33.layout && !step33.type) {
+  if (isEmpty(step35)) {
     return [];
   }
-  const layout6 = convertStepToLayout(step33, options);
+  const layout6 = convertStepToLayout(step35, options);
   return inlineReferences({
     layout: layout6,
-    schemas: step33.schemas || [],
-    actions: step33.actions || [],
-    model: (_a = step33.model) != null ? _a : null
+    schemas: step35.schemas || [],
+    actions: step35.actions || [],
+    model: (_a = step35.model) != null ? _a : null
   });
 };
 var LayoutStep = (props) => {
@@ -5662,11 +5667,11 @@ function blobToBase64(blob) {
   });
 }
 var CameraStep = (props) => {
-  const { step: step33, model, onModelChange, onAction } = props;
+  const { step: step35, model, onModelChange, onAction } = props;
   const onEvent = useEventDispatcher();
-  const objectSchema = getObjectSchema(step33);
-  const cameraSchema = getCameraSchema(step33);
-  const action2 = getFirstAction(step33);
+  const objectSchema = getObjectSchema(step35);
+  const cameraSchema = getCameraSchema(step35);
+  const action2 = getFirstAction(step35);
   const { title, image, cameraConfig } = cameraSchema;
   const { assets, direction, instructions } = cameraConfig || {};
   const { overlay, outline } = assets || {};
@@ -5708,8 +5713,8 @@ var CameraStep = (props) => {
   );
 };
 var CameraStep_default = CameraStep;
-function getObjectSchema(step33) {
-  const nonHiddenSchemas = filterHiddenSchemas(step33.schemas || []);
+function getObjectSchema(step35) {
+  const nonHiddenSchemas = filterHiddenSchemas(step35.schemas || []);
   const objectSchema = nonHiddenSchemas[0];
   if (!objectSchema || !isObjectSchema(objectSchema)) {
     throw new Error(
@@ -5718,8 +5723,8 @@ function getObjectSchema(step33) {
   }
   return objectSchema;
 }
-function getCameraSchema(step33) {
-  const objectSchema = getObjectSchema(step33);
+function getCameraSchema(step35) {
+  const objectSchema = getObjectSchema(step35);
   const firstProperty = Object.values(objectSchema.properties)[0];
   if (!firstProperty) {
     throw new Error(
@@ -5728,15 +5733,15 @@ function getCameraSchema(step33) {
   }
   return firstProperty;
 }
-function getFirstAction(step33) {
+function getFirstAction(step35) {
   var _a, _b;
-  if (!step33.schemas || ((_a = filterHiddenSchemas(step33.schemas)) == null ? void 0 : _a.length) !== 1) {
+  if (!step35.schemas || ((_a = filterHiddenSchemas(step35.schemas)) == null ? void 0 : _a.length) !== 1) {
     throw new Error("camera step expects 1 non-hidden object schema");
   }
-  if (((_b = step33 == null ? void 0 : step33.actions) == null ? void 0 : _b.length) !== 1) {
+  if (((_b = step35 == null ? void 0 : step35.actions) == null ? void 0 : _b.length) !== 1) {
     throw new Error("camera step expects 1 action");
   }
-  return step33.actions[0];
+  return step35.actions[0];
 }
 
 // src/step/externalConfirmationStep/ExternalConfirmationStep.tsx
@@ -5841,21 +5846,21 @@ function getOrigin(url) {
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var DynamicFlowStep = (props) => {
   var _a;
-  const { step: step33, globalError } = props;
-  const externalUrl = (_a = step33 == null ? void 0 : step33.external) == null ? void 0 : _a.url;
+  const { step: step35, globalError } = props;
+  const externalUrl = (_a = step35 == null ? void 0 : step35.external) == null ? void 0 : _a.url;
   const { requiresManualTrigger, dismissConfirmation } = useExternal(externalUrl);
-  if (step33 === void 0) {
+  if (step35 === void 0) {
     return null;
   }
   if (externalUrl && requiresManualTrigger) {
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
   }
-  if (getStepType(step33) === "camera") {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step: step33 }));
+  if (isCameraStep(step35)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step: step35 }));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
     globalError ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step33 }))
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step35 }))
   ] });
 };
 
@@ -5869,16 +5874,15 @@ function useDebouncedRefresh(fetchRefresh) {
       return map.current.get(key);
     }
     const debouncedFetchRefresh = debounce(
-      (action2, data, etag) => fetchRefresh(action2, data, etag),
+      (url, data, etag) => fetchRefresh(url, data, etag),
       DEBOUNCE_DELAY
     );
     map.current.set(key, debouncedFetchRefresh);
     return debouncedFetchRefresh;
   };
-  return function(action2, data, etag, schema2) {
-    const key = action2.url || "";
-    const debouncedFetchRefresh = retrieveOrCreate(key);
-    void debouncedFetchRefresh(action2, data, etag);
+  return function(url, data, etag, schema2) {
+    const debouncedFetchRefresh = retrieveOrCreate(url);
+    void debouncedFetchRefresh(url, data, etag);
     if (!schema2 || !shouldDebounceSchema(schema2)) {
       void debouncedFetchRefresh.flush();
     }
@@ -5903,16 +5907,16 @@ var useDynamicFlowState = (initialStep) => {
     models: (initialStep == null ? void 0 : initialStep.model) ? buildInitialModels(initialStep.model, getAllSchemas(initialStep)) : {},
     etag: void 0
   });
-  const { step: step33, models, etag } = stepAndModels;
-  const setStepAndEtag = (step34, etag2) => {
+  const { step: step35, models, etag } = stepAndModels;
+  const setStepAndEtag = (step36, etag2) => {
     var _a2, _b2, _c, _d;
     setStepAndModels((previous) => ({
-      step: step34,
-      models: step34.model ? buildInitialModels(step34.model, getAllSchemas(step34)) : previous.models,
+      step: step36,
+      models: step36.model ? buildInitialModels(step36.model, getAllSchemas(step36)) : previous.models,
       etag: etag2
     }));
-    setFormErrors((_b2 = (_a2 = step34 == null ? void 0 : step34.errors) == null ? void 0 : _a2.validation) != null ? _b2 : null);
-    setGlobalError((_d = (_c = step34 == null ? void 0 : step34.errors) == null ? void 0 : _c.error) != null ? _d : null);
+    setFormErrors((_b2 = (_a2 = step36 == null ? void 0 : step36.errors) == null ? void 0 : _a2.validation) != null ? _b2 : null);
+    setGlobalError((_d = (_c = step36 == null ? void 0 : step36.errors) == null ? void 0 : _c.error) != null ? _d : null);
   };
   const setSchemaModel = (schemaId, objectModel, onModelsUpdated) => {
     setStepAndModels((previous) => {
@@ -5928,11 +5932,11 @@ var useDynamicFlowState = (initialStep) => {
       return updatedState;
     });
   };
-  const modelIsValid = (0, import_react32.useMemo)(() => areModelsValid(models, getAllSchemas(step33)), [models, step33]);
+  const modelIsValid = (0, import_react32.useMemo)(() => areModelsValid(models, getAllSchemas(step35)), [models, step35]);
   return {
     formErrors,
     globalError,
-    step: step33,
+    step: step35,
     models,
     etag,
     modelIsValid,
@@ -5952,9 +5956,9 @@ var buildInitialModels = (model, schemas = []) => {
     });
   }, {});
 };
-var getAllSchemas = (step33) => [
-  ...getAllSchemasInLayout((step33 == null ? void 0 : step33.layout) || []),
-  ...(step33 == null ? void 0 : step33.schemas) || []
+var getAllSchemas = (step35) => [
+  ...getAllSchemasInLayout((step35 == null ? void 0 : step35.layout) || []),
+  ...(step35 == null ? void 0 : step35.schemas) || []
 ];
 var getAllSchemasInLayout = (components) => components.flatMap((component) => {
   switch (component.type) {
@@ -5997,7 +6001,7 @@ function useLoader(loaderConfig, initialState) {
       "data-testid": "loader"
     }
   ) : null;
-  return { loadingState, setLoadingState, loader };
+  return { isLoading: loadingState !== "idle", setLoadingState, loader };
 }
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
@@ -6072,46 +6076,78 @@ var ErrorBoundary = class extends import_react34.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/dynamicFlow/utils/responseParsers/response-parsers.ts
-var parseFetchResponse = async (response) => {
-  var _a;
-  assertResponseIsValid(response);
-  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Exit")) {
-    return { type: "exit", result: await parseExitResponse(response) };
+var parseFetchResponseByResponseType = async (response) => {
+  const type = response.headers.get("X-Df-ResponseType");
+  switch (type) {
+    case "step":
+      return parseStepResponse(response);
+    case "exit":
+      return parseExitResponse(response);
+    case "action":
+      return parseActionResponse(response);
+    default:
+      throw new Error(
+        "Unsupported X-Df-ResponseType. Allowed values are 'step', 'action', 'exit'."
+      );
   }
+};
+var parseStepResponse = async (response) => {
   const jsonBody = await parseResponseJson(response);
   if (!isObject(jsonBody)) {
     throw new Error("Incorrect response body in response. Expected an object.");
   }
-  if (jsonBody.action) {
-    if (!isObject(jsonBody.action)) {
-      throw new Error(
-        "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
-      );
-    }
-    const action2 = jsonBody.action;
-    if (action2.exit === true && isObject(action2.result)) {
-      return { type: "exit", result: action2.result };
-    }
-    return { type: "action", action: jsonBody.action };
-  }
   const etag = response.headers.get("etag") || void 0;
   return { type: "step", step: jsonBody, etag };
 };
+var parseActionResponse = async (response) => {
+  const jsonBody = await parseResponseJson(response);
+  if (!isObject(jsonBody)) {
+    throw new Error("Incorrect response body in response. Expected an object.");
+  }
+  if (!isObject(jsonBody.action)) {
+    throw new Error(
+      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
+    );
+  }
+  const action2 = jsonBody.action;
+  if (action2.exit === true && isObject(action2.result)) {
+    return { type: "exit", result: action2.result };
+  }
+  return { type: "action", action: jsonBody.action };
+};
+var parseExitResponse = async (response) => {
+  return { type: "exit", result: await getJsonObjectOrNull(response) };
+};
+var parseFetchResponse = async (response) => {
+  var _a, _b;
+  assertResponseIsValid(response);
+  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-ResponseType")) {
+    return parseFetchResponseByResponseType(response);
+  }
+  if ((_b = response.headers) == null ? void 0 : _b.has("X-Df-Exit")) {
+    return parseExitResponse(response);
+  }
+  const jsonBody = await parseResponseJson(response.clone());
+  if (isObject(jsonBody) && jsonBody.action) {
+    return parseActionResponse(response);
+  }
+  return parseStepResponse(response);
+};
 var parseErrorResponse = async (response) => {
   assertResponseIsValid(response);
   const jsonBody = await parseResponseJson(response);
   if (!isObject(jsonBody)) {
     throw new Error("Incorrect response body in error response. Expected an object.");
   }
+  if (!jsonBody.refreshFormUrl && !jsonBody.validation && !jsonBody.error) {
+    throw jsonBody;
+  }
   return jsonBody;
 };
-var parseExitResponse = async (response) => {
+var getJsonObjectOrNull = async (response) => {
   assertResponseIsValid(response);
   const result = await parseResponseJson(response);
-  if (isObject(result) || result === null) {
-    return result;
-  }
-  return null;
+  return isObject(result) ? result : null;
 };
 var parseResponseJson = async (response) => {
   try {
@@ -6152,7 +6188,7 @@ var DynamicFlowComponent = ({
   const {
     formErrors,
     globalError,
-    step: step33,
+    step: step35,
     models,
     etag,
     modelIsValid,
@@ -6162,25 +6198,23 @@ var DynamicFlowComponent = ({
     setSchemaModel
   } = useDynamicFlowState(initialStep);
   const [submitted, setSubmitted] = (0, import_react35.useState)(false);
-  const { loadingState, setLoadingState, loader } = useLoader(
+  const { isLoading, loader, setLoadingState } = useLoader(
     loaderConfig,
     initialStep ? "idle" : "initial"
   );
-  const logWarning = getLogger("warning", onLog, flowId, step33 == null ? void 0 : step33.key);
-  const logError = getLogger("error", onLog, flowId, step33 == null ? void 0 : step33.key);
-  const logCritical = getLogger("critical", onLog, flowId, step33 == null ? void 0 : step33.key);
+  const logCritical = getLogger("critical", onLog, flowId, (step35 == null ? void 0 : step35.id) || (step35 == null ? void 0 : step35.key));
   const analyticsMetadata = (0, import_react35.useMemo)(
     () => {
       var _a;
-      return __spreadValues({ flowId, stepId: step33 == null ? void 0 : step33.key }, (_a = step33 == null ? void 0 : step33.analytics) != null ? _a : {});
+      return __spreadValues({ flowId, stepId: (step35 == null ? void 0 : step35.id) || (step35 == null ? void 0 : step35.key) }, (_a = step35 == null ? void 0 : step35.analytics) != null ? _a : {});
     },
-    [flowId, step33]
+    [flowId, step35]
   );
   const dispatchEvent = (0, import_react35.useMemo)(
     () => getEventDispatcher(onEvent, analyticsMetadata),
     [onEvent, analyticsMetadata]
   );
-  const triggerActionRequest = (0, import_react35.useCallback)(
+  const dfHttpClient = (0, import_react35.useCallback)(
     ({ action: action2, data, etag: etag2 }) => {
       const { url, method = "POST" } = action2;
       return httpClient(url != null ? url : "", {
@@ -6196,37 +6230,40 @@ var DynamicFlowComponent = ({
     },
     [httpClient, locale]
   );
-  const fetchNextStep = async (action2, data = {}) => {
-    setLoadingState(loadingState === "initial" ? "initial" : "submission");
+  const performAction = async (action2, data = {}) => {
+    setLoadingState(!step35 ? "initial" : "submission");
+    dispatchEvent("Dynamic Flow - Step Submitted", { actionId: action2.$id });
     try {
-      dispatchEvent("Dynamic Flow - Step Submitted", { actionId: action2.$id });
-      const response = await triggerActionRequest({ action: action2, data });
-      return handleFetchResponse(response, "submission");
+      const response = await dfHttpClient({ action: action2, data });
+      await handleResponse(response, "submission");
     } catch (error) {
-      handleFetchError(error, "Error fetching next step");
+      completeWithError(error, "Error fetching next step");
     }
   };
-  const fetchRefreshStep = async (action2, data, etag2) => {
+  const performRefresh = async (url, data, etag2) => {
     setLoadingState("refresh");
+    dispatchEvent("Dynamic Flow - Step Refreshed", { status: "pending" });
     try {
-      dispatchEvent("Dynamic Flow - Step Refreshed", { status: "pending" });
-      const response = await triggerActionRequest({ action: action2, data, etag: etag2 });
-      await handleFetchResponse(response, "refresh");
-      setLoadingState("idle");
+      const response = await dfHttpClient({ action: { url, method: "POST" }, data, etag: etag2 });
+      await handleResponse(response, "refresh");
     } catch (error) {
-      handleFetchError(error, "Error fetching refresh step");
+      completeWithError(error, "Error fetching refresh step");
     }
   };
-  const fetchExitResult = async (action2, data) => {
+  const performExitAction = async (action2, data) => {
+    setLoadingState("submission");
     try {
-      const response = await triggerActionRequest({ action: action2, data });
-      const exitResult = await parseExitResponse(response);
-      dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), action2.result));
+      const response = await dfHttpClient({ action: action2, data });
+      await handleExitResponse(response, action2.result);
     } catch (error) {
-      handleFetchError(error, "Error fetching exit result");
+      completeWithError(error, "Error fetching exit result");
     }
   };
-  const debouncedFetchRefresh = useDebouncedRefresh(fetchRefreshStep);
+  const handleExitResponse = async (response, actionResult) => {
+    const exitResult = await getJsonObjectOrNull(response);
+    dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), actionResult));
+  };
+  const debouncedRefresh = useDebouncedRefresh(performRefresh);
   const dispatchEventAndComplete = (0, import_react35.useCallback)(
     (result) => {
       dispatchEvent("Dynamic Flow - Flow Finished", { result: "success" });
@@ -6243,79 +6280,63 @@ var DynamicFlowComponent = ({
         $id: "#initial-step-request",
         method: "GET"
       }, initialAction);
-      void fetchNextStep(action2, action2.data);
+      void performAction(action2, action2.data);
     }
   }, [httpClient, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
-  const handleFetchResponse = async (response, fetchType) => {
-    if (response.ok) {
-      try {
-        const parsedResponse = await parseFetchResponse(response);
-        switch (parsedResponse.type) {
-          case "action":
-            void fetchNextStep(parsedResponse.action, parsedResponse.action.data);
-            return;
-          case "exit":
-            return dispatchEventAndComplete(parsedResponse.result);
-          case "step":
-          default: {
-            const { step: step34, etag: etag2 } = parsedResponse;
-            return fetchType === "submission" ? updateStepAfterSubmission(step34, etag2) : updateStepAfterRefresh(step34, etag2);
-          }
-        }
-      } catch (error) {
-        return handleFetchError(error, "Error parsing fetch response");
+  const handleResponse = async (response, fetchType) => {
+    try {
+      if (response.status === 304) {
+        setLoadingState("idle");
+        return;
+      }
+      if (!response.ok) {
+        const errorResponse = await parseErrorResponse(response);
+        void updateAfterError(errorResponse);
+        return;
+      }
+      const result = await parseFetchResponse(response);
+      if (result.type === "action") {
+        void performAction(result.action, result.action.data);
+      } else if (result.type === "exit") {
+        dispatchEventAndComplete(result.result);
+      } else {
+        updateStep(result.step, result.etag, fetchType);
       }
+    } catch (error) {
+      return completeWithError(error, "Error parsing fetch response", fetchType, response.status);
     }
-    return handleErrorResponse(response, fetchType);
   };
-  const updateStepAfterSubmission = (newStep, etag2) => {
+  const updateStep = (newStep, etag2, fetchType) => {
     setStepAndEtag(newStep, etag2);
-    setSubmitted(false);
-    setLoadingState("idle");
-    dispatchEvent("Dynamic Flow - Step Started", __spreadValues({ stepId: newStep.key }, newStep == null ? void 0 : newStep.analytics));
-  };
-  const updateStepAfterRefresh = (step34, etag2) => {
-    setStepAndEtag(step34, etag2);
     setLoadingState("idle");
-    dispatchEvent("Dynamic Flow - Step Refreshed", { status: "success" });
+    if (fetchType === "submission") {
+      setSubmitted(false);
+      dispatchEvent("Dynamic Flow - Step Started", __spreadValues({
+        stepId: newStep.id || newStep.key
+      }, newStep == null ? void 0 : newStep.analytics));
+    } else {
+      dispatchEvent("Dynamic Flow - Step Refreshed", { status: "success" });
+    }
   };
-  const handleErrorResponse = async (response, fetchType) => {
-    if (response.status === 304) {
-      setLoadingState("idle");
-      return;
+  const updateAfterError = async (errorBody) => {
+    if (errorBody.refreshFormUrl) {
+      await performRefresh(errorBody.refreshFormUrl, combineModels2(models), etag);
     }
-    try {
-      const errorBody = await parseErrorResponse(response);
-      if (errorBody.refreshFormUrl) {
-        const action2 = { url: errorBody == null ? void 0 : errorBody.refreshFormUrl, method: "POST" };
-        await fetchRefreshStep(action2, combineModels2(models), etag);
-      }
-      if (errorBody.validation) {
-        setFormErrors(errorBody.validation);
-      }
-      if (errorBody.error) {
-        setGlobalError(errorBody.error);
-      }
-      if (!errorBody.refreshFormUrl && !errorBody.validation && !errorBody.error) {
-        logError(
-          "Invalid response",
-          "Response body must contain at least one of the following properties: refreshFormUrl, validation, or error."
-        );
-        throw errorBody;
-      }
-    } catch (error) {
-      if (fetchType === "refresh") {
-        dispatchEvent("Dynamic Flow - Step Refreshed", { status: "failure" });
-      }
-      dispatchEvent("Dynamic Flow - Flow Finished", { status: "failure" });
-      onError(error, response.status);
-      logError("Invalid response", "Error response body must be an object.");
+    if (errorBody.validation) {
+      setFormErrors(errorBody.validation);
+    }
+    if (errorBody.error) {
+      setGlobalError(errorBody.error);
     }
     setLoadingState("idle");
   };
-  const handleFetchError = (error, message) => {
+  const completeWithError = (error, message, fetchType, responseStatus) => {
     logCritical("Error fetching", message);
-    onError(error);
+    if (fetchType === "refresh") {
+      dispatchEvent("Dynamic Flow - Step Refreshed", { status: "failure" });
+    }
+    dispatchEvent("Dynamic Flow - Flow Finished", { status: "failure" });
+    onError(error, responseStatus);
     setLoadingState("idle");
   };
   const onModelChange = (onModelChangeProps) => {
@@ -6336,62 +6357,37 @@ var DynamicFlowComponent = ({
   const refreshOnChangeIfNeeded = (props, updatedModels) => {
     const { triggerSchema } = props;
     if (shouldTriggerRefresh(props)) {
-      const url = triggerSchema.refreshFormUrl || (step33 == null ? void 0 : step33.refreshFormUrl);
-      const action2 = { url, method: "POST" };
-      debouncedFetchRefresh(action2, combineModels2(updatedModels), etag, triggerSchema);
+      const url = triggerSchema.refreshFormUrl || (step35 == null ? void 0 : step35.refreshFormUrl);
+      if (url) {
+        debouncedRefresh(url, combineModels2(updatedModels), etag, triggerSchema);
+      }
     }
   };
   const onAction = async (action2) => {
-    const { data, method, exit: exit2, url, result } = action2;
-    const submissionData = __spreadValues(__spreadValues({}, combineModels2(models)), data);
-    const extraLoggingProps = {
-      url: action2.url,
-      method: action2.method,
-      currency: submissionData.currency,
-      type: submissionData.type
-    };
-    if (loadingState !== "idle" || action2.disabled) {
-      logWarning(
-        "Action supressed",
-        loadingState !== "idle" ? `onAction was supressed because loadingState is ${loadingState}` : `onAction was supressed because action is disabled`,
-        extraLoggingProps
-      );
+    if (isLoading || action2.disabled) {
       return;
     }
-    if (exit2) {
-      if (url) {
-        if (isSubmissionMethod(method)) {
-          setFormErrors(null);
-          setSubmitted(true);
-          if (modelIsValid) {
-            await fetchExitResult(action2, submissionData);
-          }
-        } else {
-          await fetchExitResult(action2);
-        }
-        return;
-      }
-      dispatchEventAndComplete(result);
+    if (action2.exit && !action2.url) {
+      dispatchEventAndComplete(action2.result);
       return;
     }
+    const actionHandler = action2.exit ? performExitAction : performAction;
+    const { data, method } = action2;
+    const submissionData = __spreadValues(__spreadValues({}, combineModels2(models)), data);
     if (isSubmissionMethod(method)) {
       setFormErrors(null);
       setSubmitted(true);
       if (modelIsValid) {
-        void fetchNextStep(action2, submissionData);
-      } else {
-        dispatchEvent("Dynamic Flow - onAction supressed", __spreadValues({
-          reason: "invalid model"
-        }, extraLoggingProps));
+        await actionHandler(action2, submissionData);
       }
-      return;
+    } else {
+      await actionHandler(action2);
     }
-    void fetchNextStep(action2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LogProvider, { flowId, stepId: step33 == null ? void 0 : step33.key, onLog, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DynamicFlowProvider, { loading: loadingState !== "idle", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(HttpClientProvider, { httpClient, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LogProvider, { flowId, stepId: (step35 == null ? void 0 : step35.id) || (step35 == null ? void 0 : step35.key), onLog, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DynamicFlowProvider, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(HttpClientProvider, { httpClient, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     DynamicFlowStep,
     {
-      step: step33,
+      step: step35,
       model: combineModels2(models),
       submitted,
       globalError,
@@ -6442,11 +6438,9 @@ __export(components_exports, {
 
 // src/fixtures/components/alert.ts
 var step = {
-  type: "form",
-  key: "Components/Alert",
+  id: "Components/Alert",
   title: "Alert Component",
   description: "Alerts can have different contexts.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6475,11 +6469,9 @@ var alert_default = step;
 
 // src/fixtures/components/box.ts
 var step2 = {
-  type: "form",
-  key: "Components/Box",
+  id: "Components/Box",
   title: "Box Component",
   description: "Box is a container for other layour components. It can have a border!",
-  actions: [],
   schemas: [],
   layout: ["xs", "sm", "md", "lg", "xl"].map((size) => ({
     type: "box",
@@ -6509,11 +6501,9 @@ var buttons = ["primary", "secondary", "negative", "link"].map(
   })
 );
 var step3 = {
-  type: "form",
-  key: "Components/Button",
+  id: "Components/Button",
   title: "Button Component",
   description: "Buttons typically trigger actions.",
-  actions: [],
   schemas: [
     {
       $id: "#schema",
@@ -6555,11 +6545,9 @@ var button_default = step3;
 
 // src/fixtures/components/columns.ts
 var step4 = {
-  type: "form",
-  key: "Components/Columns",
+  id: "Components/Columns",
   title: "Columns Component",
   description: `Arrange components in two columns (when there's enough space)`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6593,11 +6581,9 @@ var columns_default = step4;
 
 // src/fixtures/components/copyable.ts
 var step5 = {
-  key: "Components/Copyable",
-  type: "form",
+  id: "Components/Copyable",
   title: "Copyable Text",
   description: "Copyable Text Component.",
-  actions: [],
   layout: [
     {
       type: "paragraph",
@@ -6617,11 +6603,9 @@ var copyable_default = step5;
 
 // src/fixtures/components/decision.ts
 var step6 = {
-  type: "form",
-  key: "Components/Decision",
+  id: "Components/Decision",
   title: "Decision Component",
   description: "A step with a decision Component.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6684,11 +6668,9 @@ var decision_default = step6;
 
 // src/fixtures/components/decision-flags.ts
 var step7 = {
-  type: "form",
-  key: "Components/Decision Flags",
+  id: "Components/Decision Flags",
   title: "Decision Component",
   description: "A step with a decision Component.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6715,11 +6697,9 @@ var decision_flags_default = step7;
 // src/fixtures/components/decision-icons.ts
 var icons2 = __toESM(require("@transferwise/icons"));
 var step8 = {
-  type: "form",
-  key: "Components/Decision Icons",
+  id: "Components/Decision Icons",
   title: "Decision Component",
   description: "A step with a decision Component.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6745,11 +6725,9 @@ var decision_icons_default = step8;
 
 // src/fixtures/components/heading.ts
 var step9 = {
-  type: "form",
-  key: "Components/Heading",
+  id: "Components/Heading",
   title: "Heading Component",
   description: 'Headings can have different sizes: "xs", "sm", "md", "lg", "xl".',
-  actions: [],
   schemas: [],
   layout: ["xs", "sm", "md", "lg", "xl"].map((size) => ({
     type: "heading",
@@ -6762,11 +6740,9 @@ var heading_default = step9;
 // src/fixtures/components/image.ts
 var sizes = ["xs", "sm", "md", "lg", "xl"];
 var step10 = {
-  type: "form",
-  key: "Components/Image",
+  id: "Components/Image",
   title: "Image Component",
   description: 'Images can have different sizes: "xs", "sm", "md", "lg", "xl".',
-  actions: [],
   schemas: [],
   layout: sizes.flatMap((size) => [
     {
@@ -6776,7 +6752,7 @@ var step10 = {
     },
     {
       type: "image",
-      url: "http://placekitten.com/g/400/400",
+      url: "https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
       text: `This is an image with size: "${size}"`,
       size
     }
@@ -6786,11 +6762,9 @@ var image_default = step10;
 
 // src/fixtures/components/info.ts
 var step11 = {
-  type: "form",
-  key: "Components/Info",
+  id: "Components/Info",
   title: "Info Component",
   description: "A block of markdown content.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6821,11 +6795,9 @@ var info_default = step11;
 
 // src/fixtures/components/list.ts
 var step12 = {
-  type: "form",
-  key: "Components/List",
+  id: "Components/List",
   title: "List Component",
   description: "A list of items with optional states, subtitles, and images.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6857,11 +6829,9 @@ var list_default = step12;
 
 // src/fixtures/components/loading-indicator.ts
 var step13 = {
-  type: "form",
-  key: "Components/Loading Indicator",
+  id: "Components/Loading Indicator",
   title: "Loading Indicator Component",
   description: "A loading indicator to be displayed within a layout.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6875,11 +6845,9 @@ var loading_indicator_default = step13;
 
 // src/fixtures/components/paragraph.ts
 var step14 = {
-  type: "form",
-  key: "Components/Paragraph",
+  id: "Components/Paragraph",
   title: "Paragraph Component",
   description: `A block of plain text.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6905,11 +6873,9 @@ var paragraph_default = step14;
 
 // src/fixtures/components/review.ts
 var step15 = {
-  type: "form",
-  key: "Components/Review",
+  id: "Components/Review",
   title: "Review Component",
   description: `Show a list of read-only fields.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6977,9 +6943,8 @@ __export(examples_exports, {
 
 // src/fixtures/examples/camera-capture.ts
 var step16 = {
-  key: "Examples/Camera Capture",
+  id: "Examples/Camera Capture",
   title: "Camera Capture Example",
-  type: "form",
   schemas: [
     {
       properties: {
@@ -7100,11 +7065,9 @@ var camera_capture_default = step16;
 
 // src/fixtures/examples/recipient.ts
 var step17 = {
-  key: "Examples/Recipient Creation",
-  type: "form",
+  id: "Examples/Recipient Creation",
   title: "Recipient Creation Example",
   description: "A form step with the typical recipient creation form.",
-  actions: [],
   schemas: [
     {
       $id: "#new-recipient",
@@ -7415,18 +7378,8 @@ var recipient_default = step17;
 
 // src/fixtures/examples/recipient-update.ts
 var step18 = {
-  key: "Examples/Recipient Update",
-  type: "form",
+  id: "Examples/Recipient Update",
   title: "Edit recipient",
-  actions: [
-    {
-      title: "Update",
-      url: "/responses/recipientUpdate/?delay=5000",
-      type: "primary",
-      method: "PATCH",
-      $id: "submit"
-    }
-  ],
   schemas: [
     {
       $id: "form",
@@ -7658,7 +7611,11 @@ var step18 = {
     {
       type: "button",
       action: {
-        $ref: "submit"
+        $id: "submit",
+        title: "Update",
+        url: "/responses/recipientUpdate/?delay=5000",
+        type: "primary",
+        method: "PATCH"
       }
     }
   ]
@@ -7667,10 +7624,8 @@ var recipient_update_default = step18;
 
 // src/fixtures/examples/single-file-upload.ts
 var step19 = {
-  key: "Examples/Single File Upload",
-  type: "form",
+  id: "Examples/Single File Upload",
   title: "Single File Upload Example",
-  actions: [],
   schemas: [
     {
       $id: "#schema-1",
@@ -7767,9 +7722,8 @@ var single_file_upload_default = step19;
 
 // src/fixtures/examples/step-validation-errors.ts
 var step20 = {
-  key: "Examples/Step Validation Errors",
+  id: "Examples/Step Validation Errors",
   title: "Step with validation errors",
-  type: "form",
   errors: {
     validation: {
       "bridekeeper-questions": {
@@ -7777,7 +7731,6 @@ var step20 = {
       }
     }
   },
-  actions: [],
   layout: [
     {
       type: "form",
@@ -7854,11 +7807,10 @@ __export(features_exports, {
 
 // src/fixtures/features/action-response.ts
 var step21 = {
-  key: "Features/Action Response",
+  id: "Features/Action Response",
   title: "Action Response",
   description: "",
   type: "form",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -7886,7 +7838,7 @@ var action_response_default = step21;
 // src/fixtures/features/external.ts
 var step22 = {
   type: "form",
-  key: "Features/External",
+  id: "Features/External",
   title: "External Feature",
   description: "Your bank is opening in another window.",
   external: { url: "http://google.com/" },
@@ -7911,15 +7863,13 @@ var step22 = {
       markdown: `If it didn't work, you can [reopen](http://google.com/) the tab`
     }
   ],
-  actions: [],
   schemas: []
 };
 var external_default = step22;
 
 // src/fixtures/features/persist-async.ts
 var step23 = {
-  type: "form",
-  key: "Features/Persist Async",
+  id: "Features/Persist Async",
   title: "Persist Async Feature",
   schemas: [
     {
@@ -7945,14 +7895,6 @@ var step23 = {
       }
     }
   ],
-  actions: [
-    {
-      title: "Submit Persist Async",
-      url: "/persist-async-submit",
-      method: "POST",
-      type: "primary"
-    }
-  ],
   layout: [
     {
       type: "form",
@@ -7964,8 +7906,7 @@ var persist_async_default = step23;
 
 // src/fixtures/features/polling.ts
 var step24 = {
-  type: "form",
-  key: "Features/Polling",
+  id: "Features/Polling",
   title: "Polling Feature",
   description: "Polling feature in a form step.",
   polling: {
@@ -7992,7 +7933,6 @@ var step24 = {
       }
     }
   ],
-  actions: [],
   schemas: []
 };
 var polling_default = step24;
@@ -8000,7 +7940,7 @@ var polling_default = step24;
 // src/fixtures/features/validation-async.ts
 var step25 = {
   type: "form",
-  key: "Features/Validation Async",
+  id: "Features/Validation Async",
   title: "Validation Async Feature",
   schemas: [
     {
@@ -8030,7 +7970,6 @@ var step25 = {
       }
     }
   ],
-  actions: [],
   model: {
     // name: 'Colin Robinson',
   }
@@ -8304,29 +8243,9 @@ var list_default2 = layout3;
 
 // src/fixtures/layouts/pay-in.ts
 var step26 = {
-  key: "PAY_ID",
+  id: "PAY_ID",
   type: "form",
   title: "Pay Using PayID",
-  actions: [
-    {
-      title: "I have paid",
-      type: "primary",
-      exit: true,
-      result: {
-        paid: "POTENTIALLY_PAID"
-      },
-      $id: "#payNow"
-    },
-    {
-      title: "I'll transfer my money later",
-      type: "secondary",
-      exit: true,
-      result: {
-        paid: "NOT_PAID"
-      },
-      $id: "#payLater"
-    }
-  ],
   schemas: [
     {
       title: "Pay Using PayID",
@@ -8388,13 +8307,25 @@ var step26 = {
     {
       type: "button",
       action: {
-        $ref: "#payNow"
+        title: "I have paid",
+        type: "primary",
+        exit: true,
+        result: {
+          paid: "POTENTIALLY_PAID"
+        },
+        $id: "#payNow"
       }
     },
     {
       type: "button",
       action: {
-        $ref: "#payLater"
+        $id: "#payLater",
+        title: "I'll transfer my money later",
+        type: "secondary",
+        exit: true,
+        result: {
+          paid: "NOT_PAID"
+        }
       }
     }
   ]
@@ -8646,11 +8577,9 @@ var action_default = action;
 
 // src/fixtures/responses/action-response-final.ts
 var step27 = {
-  type: "form",
-  key: "action-response-final",
+  id: "action-response-final",
   title: "Action Response Final Step",
   description: `This step was loaded as a result of an Action Response.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -8676,11 +8605,9 @@ var exit_default = exit;
 
 // src/fixtures/responses/recipient-update-final.ts
 var step28 = {
-  type: "form",
-  key: "recipient-update-final",
+  id: "recipient-update-final",
   title: "Recipient Update Final Step",
   description: `The recipient has been updated.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -8703,6 +8630,8 @@ var recipient_update_final_default = step28;
 // src/fixtures/schemas/index.ts
 var schemas_exports = {};
 __export(schemas_exports, {
+  allOf: () => all_of_default,
+  boolean: () => boolean_default,
   numberAndInteger: () => number_and_integer_default,
   oneOf: () => one_of_default,
   simpleForm: () => basic_form_default,
@@ -8711,11 +8640,9 @@ __export(schemas_exports, {
 
 // src/fixtures/schemas/basic-form.ts
 var step29 = {
-  key: "Schemas/Basic Form",
+  id: "Schemas/Basic Form",
   title: "Simple Form",
   description: "A simple form with text fields and a checkbox.",
-  type: "form",
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -8752,11 +8679,9 @@ var basic_form_default = step29;
 
 // src/fixtures/schemas/number-and-integer.ts
 var step30 = {
-  key: "Schemas/Number And Integer",
+  id: "Schemas/Number And Integer",
   title: "Number and Integer Schemas",
   description: "Number and Integer Schemas.",
-  type: "form",
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -8857,12 +8782,10 @@ var currencies = [
   ["ZMW", "Zambian kwacha"]
 ];
 var step31 = {
-  key: "Schemas/OneOf",
+  id: "Schemas/OneOf",
   title: "OneOf Schemas",
   description: "OneOf Schema using select, radio buttons and tabs.",
-  type: "form",
   analytics: { custom: "this is the oneOf fixture" },
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -9018,11 +8941,9 @@ var one_of_default = step31;
 
 // src/fixtures/schemas/string-formats.ts
 var step32 = {
-  key: "Schemas/String Formats",
+  id: "Schemas/String Formats",
   title: "String Schema Formats",
   description: "String schemas with different formats (password, date, telephone).",
-  type: "form",
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -9080,19 +9001,140 @@ var step32 = {
 };
 var string_formats_default = step32;
 
+// src/fixtures/schemas/boolean.ts
+var step33 = {
+  key: "Schemas/Boolean Schema",
+  title: "Boolean Schema",
+  description: "A simple form with a boolean schema with no default value.",
+  actions: [],
+  schemas: [
+    {
+      $id: "#schema-1",
+      type: "object",
+      displayOrder: ["pineapple"],
+      required: ["pineapple"],
+      properties: {
+        pineapple: {
+          title: "Pineapple on pizza (boolean schema)",
+          type: "boolean"
+        }
+      }
+    }
+  ],
+  layout: [
+    {
+      type: "form",
+      schema: { $ref: "#schema-1" }
+    },
+    {
+      type: "button",
+      action: {
+        url: "/submit",
+        title: "Submit",
+        type: "primary"
+      }
+    }
+  ]
+};
+var boolean_default = step33;
+
+// src/fixtures/schemas/all-of.ts
+var step34 = {
+  key: "Schemas/AllOf",
+  title: "AllOf Schemas",
+  description: "Three object schemas wrapped in an allOf.",
+  analytics: { custom: "this is the allOf fixture" },
+  actions: [],
+  schemas: [
+    {
+      $id: "#the-schema",
+      allOf: [
+        {
+          $id: "#schema-1",
+          type: "object",
+          properties: {
+            name: { title: "Name", type: "string" }
+          },
+          displayOrder: ["name"]
+        },
+        {
+          $id: "#schema-2",
+          type: "object",
+          properties: {
+            city: { title: "City", type: "string" }
+          },
+          displayOrder: ["city"]
+        },
+        {
+          $id: "#schema-3",
+          type: "object",
+          properties: {
+            color: {
+              title: 'What is your favourite colour? (oneOf schema with more than two options default to control: "select")',
+              placeholder: "Please select a colour",
+              analyticsId: "colour-select",
+              oneOf: [
+                {
+                  title: "Blue",
+                  analyticsId: "colour-select-blue",
+                  image: {
+                    url: "https://placeholder.pics/svg/64/0099ff/FFFFFF"
+                  },
+                  const: 1
+                },
+                {
+                  title: "Yellow",
+                  analyticsId: "colour-select-yellow",
+                  image: {
+                    url: "https://placeholder.pics/svg/64/ffcc00/FFFFFF"
+                  },
+                  const: 2
+                },
+                {
+                  title: "Red",
+                  analyticsId: "colour-select-red",
+                  image: {
+                    url: "https://placeholder.pics/svg/64/ff6600/FFFFFF"
+                  },
+                  const: 3
+                }
+              ]
+            }
+          },
+          displayOrder: ["color"]
+        }
+      ]
+    }
+  ],
+  layout: [
+    {
+      type: "form",
+      schema: { $ref: "#the-schema" }
+    },
+    {
+      type: "button",
+      action: {
+        url: "/submit",
+        title: "Submit",
+        type: "primary"
+      }
+    }
+  ]
+};
+var all_of_default = step34;
+
 // src/fixtures/utils/image-util.ts
 var getImageStep = (size) => {
   return {
     type: "form",
-    key: `Components/Image-${size}`,
+    id: `Components/Image-${size}`,
     title: `Image Component - ${size}`,
     description: `This is an image with size: "${size}"`,
-    actions: [],
     schemas: [],
     layout: [
       {
         type: "image",
-        url: "http://placekitten.com/g/400/400",
+        url: "https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
         text: `This is an image with size: "${size}"`,
         size
       }