@wise/dynamic-flow-client 1.1.0 → 1.2.1

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 || []
   ];
 }
 
@@ -844,7 +839,7 @@ function isReference(block) {
 }
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 var import_react_intl28 = require("react-intl");
 
 // src/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
@@ -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) {
@@ -1836,7 +1821,7 @@ function useExternalStepPolling(polling, onAction) {
 }
 
 // src/common/hooks/usePersistAsync/usePersistAsync.ts
-var import_react23 = require("react");
+var import_react26 = require("react");
 var import_react_intl16 = require("react-intl");
 
 // src/jsonSchemaForm/persistAsyncSchema/PersistAsyncSchema.messages.js
@@ -1850,7 +1835,7 @@ var PersistAsyncSchema_messages_default = (0, import_react_intl.defineMessages)(
 });
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-var import_react22 = require("react");
+var import_react25 = require("react");
 var import_react_intl15 = require("react-intl");
 
 // src/fixtures/jsonSchemaForm/allOf.ts
@@ -1976,7 +1961,7 @@ var allOf_default = schema;
 
 // src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
 var import_classnames6 = __toESM(require_classnames());
-var import_react21 = require("react");
+var import_react24 = require("react");
 
 // src/layout/alert/DynamicAlert.tsx
 var import_components = require("@transferwise/components");
@@ -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
@@ -2295,6 +2292,9 @@ var DynamicExternal = ({ component, onAction }) => {
 };
 var DynamicExternal_default = DynamicExternal;
 
+// src/jsonSchemaForm/genericSchema/GenericSchema.tsx
+var import_react20 = require("react");
+
 // src/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
 var import_classnames = __toESM(require_classnames());
 var import_react10 = require("react");
@@ -2789,7 +2789,7 @@ var ObjectSchema_default = ObjectSchema3;
 
 // src/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
 var import_classnames4 = __toESM(require_classnames());
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/jsonSchemaForm/help/Help.tsx
 var import_components7 = require("@transferwise/components");
@@ -2822,6 +2822,9 @@ var Help = (props) => {
 };
 var Help_default = Help;
 
+// src/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
+var import_react14 = require("react");
+
 // src/formControl/FormControl.tsx
 var import_components8 = require("@transferwise/components");
 var import_react13 = require("react");
@@ -2994,7 +2997,7 @@ var _FormControl = class extends import_react13.PureComponent {
     const {
       name,
       placeholder,
-      step: step33,
+      step: step35,
       countryCode,
       type,
       options,
@@ -3102,7 +3105,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,
@@ -3524,16 +3527,12 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 var isNativeInput = (propsSchemaType) => {
   return propsSchemaType === "string" || propsSchemaType === "number";
 };
-var getControlType = (schema2, log) => {
+var getControlType = (schema2) => {
   if (isOneOfSchema(schema2)) {
     if (schema2.control === FormControlType.TAB && schema2.oneOf.length > 3) {
       return FormControlType.SELECT;
     }
     if (schema2.oneOf.length === 2 && !schema2.control) {
-      log.warning(
-        "Deprecation warning",
-        'A oneOf schema with 2 options and no control type currently renders as a "radio" but will be changed to render as a "select". Please specify control radio to retain the existing behaviour.'
-      );
       return FormControlType.RADIO;
     }
     return schema2.control || FormControlType.SELECT;
@@ -3570,40 +3569,35 @@ var getOptions = (schema2, controlType) => {
   return null;
 };
 var SchemaFormControl = (props) => {
+  const { id, schema: schema2, value, disabled, onChange, onFocus, onBlur, onSearchChange } = props;
   const log = useLogger();
-  const getSanitisedValue = (value) => isNativeInput(props.schema.type) && (isNull(value) || isUndefined(value)) ? "" : value;
-  const onChange = (value, type) => {
-    props.onChange(getValidBasicModelOrNull(value, props.schema), type);
+  const getSanitisedValue = (value2) => isNativeInput(schema2.type) && (isNull(value2) || isUndefined(value2)) ? "" : value2;
+  const onModelChange = (value2, type) => {
+    onChange(getValidBasicModelOrNull(value2, schema2), type);
   };
-  const controlType = getControlType(props.schema, log);
-  if (controlType === "file") {
-    log.warning(
-      "Deprecation warning",
-      "Please use a persist-async blob schema instead of string with base64url for file uploads. The base64url does not perform well on low end devices. Support for this schema will be removed in a later release."
-    );
-  }
-  if (props.schema.values) {
-    log.error("Deprecated schema", "Schema.values is a legacy approach. Please use oneOf.");
-  }
-  const options = props.schema.values || getOptions(props.schema, controlType);
+  const controlType = getControlType(schema2);
+  (0, import_react14.useEffect)(() => {
+    warnIfInvalidSchema(schema2, log, controlType);
+  }, [schema2, log, controlType]);
+  const options = schema2.values || getOptions(schema2, controlType);
   const events = {
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    onSearchChange: props.onSearchChange,
-    onChange
+    onFocus,
+    onBlur,
+    onSearchChange,
+    onChange: onModelChange
   };
-  const safeValue = getSanitisedValue(props.value);
+  const safeValue = getSanitisedValue(value);
   const controlProps = {
-    id: props.id,
-    name: props.id,
-    label: props.schema.title,
+    id,
+    name: id,
+    label: schema2.title,
     options: options || [],
-    placeholder: props.schema.placeholder,
-    autoComplete: !props.schema.help,
-    disabled: props.disabled || props.schema.disabled,
-    displayPattern: props.schema.displayFormat,
+    placeholder: schema2.placeholder,
+    autoComplete: !schema2.help,
+    disabled: disabled || schema2.disabled,
+    displayPattern: schema2.displayFormat,
     // TODO: LOW avoid type assertion below
-    uploadProps: mapSchemaToUploadOptions(props.schema)
+    uploadProps: mapSchemaToUploadOptions(schema2)
   };
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps));
 };
@@ -3614,6 +3608,23 @@ SchemaFormControl.defaultProps = {
   onSearchChange: null,
   disabled: false
 };
+var warnIfInvalidSchema = (schema2, log, controlType) => {
+  if (isOneOfSchema(schema2) && schema2.oneOf.length === 2 && !schema2.control) {
+    log.warning(
+      "Deprecation warning",
+      'A oneOf schema with 2 options and no control type currently renders as a "radio" but will be changed to render as a "select". Please specify control radio to retain the existing behaviour.'
+    );
+  }
+  if (controlType === "file") {
+    log.warning(
+      "Deprecation warning",
+      "Please use a persist-async blob schema instead of string with base64url for file uploads. The base64url does not perform well on low end devices. Support for this schema will be removed in a later release."
+    );
+  }
+  if (schema2.values) {
+    log.warning("Deprecated schema", "Schema.values is a legacy approach. Please use oneOf.");
+  }
+};
 var SchemaFormControl_default = SchemaFormControl;
 
 // src/jsonSchemaForm/oneOfSchema/utils/const-schema-utils.ts
@@ -3679,14 +3690,14 @@ function getSchemaProperties(childSchema) {
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var OneOfSchema5 = (props) => {
   const onEvent = useEventDispatcher();
-  const [changed, setChanged] = (0, import_react14.useState)(false);
-  const [focused, setFocused] = (0, import_react14.useState)(false);
-  const [blurred, setBlurred] = (0, import_react14.useState)(false);
-  const id = (0, import_react14.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
-  const [schemaIndex, setSchemaIndex] = (0, import_react14.useState)(
+  const [changed, setChanged] = (0, import_react15.useState)(false);
+  const [focused, setFocused] = (0, import_react15.useState)(false);
+  const [blurred, setBlurred] = (0, import_react15.useState)(false);
+  const id = (0, import_react15.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
+  const [schemaIndex, setSchemaIndex] = (0, import_react15.useState)(
     getActiveSchemaIndex(props.schema, props.model)
   );
-  const [models, setModels] = (0, import_react14.useState)(getModelPartsForSchemas(props.model, props.schema.oneOf));
+  const [models, setModels] = (0, import_react15.useState)(getModelPartsForSchemas(props.model, props.schema.oneOf));
   const debouncedTrackEvent = useDebouncedFunction(onEvent, 200);
   const onSearchChange = (searchValue) => {
     debouncedTrackEvent("Dynamic Flow - OneOf Searched", {
@@ -3694,7 +3705,7 @@ var OneOfSchema5 = (props) => {
       searchValueLength: searchValue.length
     });
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const modelIndex = getValidIndexFromValue(props.schema, props.model);
     const defaultIndex = getValidIndexFromValue(props.schema, props.schema.default);
     if (modelIndex === -1 && defaultIndex >= 0) {
@@ -3844,11 +3855,11 @@ var OneOfSchema_default = OneOfSchema5;
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
 var import_classnames5 = __toESM(require_classnames());
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
 var import_components10 = require("@transferwise/components");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var UploadInputAdapter = (props) => {
   const {
@@ -3865,7 +3876,7 @@ var UploadInputAdapter = (props) => {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react15.useMemo)(() => fileId ? [{ id: fileId, status: import_components10.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react16.useMemo)(() => fileId ? [{ id: fileId, status: import_components10.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(`${httpOptions.url}`, {
@@ -3905,10 +3916,10 @@ var UploadInputAdapter = (props) => {
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var PersistAsyncBlobSchema = (props) => {
-  const [persistAsyncValidationMessages, setPersistAsyncValidationMessages] = (0, import_react16.useState)({});
-  const [persistAsyncValidations, setPersistAsyncValidations] = (0, import_react16.useState)(null);
-  const [validations, setValidations] = (0, import_react16.useState)([]);
-  const [changed, setChanged] = (0, import_react16.useState)(false);
+  const [persistAsyncValidationMessages, setPersistAsyncValidationMessages] = (0, import_react17.useState)({});
+  const [persistAsyncValidations, setPersistAsyncValidations] = (0, import_react17.useState)(null);
+  const [validations, setValidations] = (0, import_react17.useState)([]);
+  const [changed, setChanged] = (0, import_react17.useState)(false);
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const refreshValidations = () => {
@@ -3916,7 +3927,7 @@ var PersistAsyncBlobSchema = (props) => {
       setValidations(getValidationFailures(props.model, props.schema, !!props.required));
     }
   };
-  (0, import_react16.useEffect)(refreshValidations, [props.model, props.submitted]);
+  (0, import_react17.useEffect)(refreshValidations, [props.model, props.submitted]);
   const onSuccess = async (httpResponse, _fileName) => {
     const jsonResponse = await httpResponse.json();
     const id = getIdFromResponse(props.schema.persistAsync.idProperty, jsonResponse);
@@ -4005,7 +4016,7 @@ PersistAsyncSchema.defaultProps = {
 var PersistAsyncSchema_default = PersistAsyncSchema;
 
 // src/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/jsonSchemaForm/promotedOneOfSchema/promoted-one-of-utils.ts
 var getSelectionFromModel = (schema2, model) => {
@@ -4096,7 +4107,7 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var isPromoted = (schema2) => schema2.promoted === true;
 var PromotedOneOfSchema = (props) => {
   var _a;
-  const [selection, setSelection] = (0, import_react17.useState)(
+  const [selection, setSelection] = (0, import_react18.useState)(
     getSelectionFromModel(props.schema, props.model) || ((_a = props.schema.promotion) == null ? void 0 : _a.default) || "promoted"
   );
   const promotedAlert = props.schema.alert;
@@ -4212,32 +4223,35 @@ function getValueFromOption(option) {
 }
 
 // src/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var ValidationAsyncSchema = (props) => {
-  const [validationAsyncModel, setValidationAsyncModel] = (0, import_react18.useState)(props.model);
-  const previousRequestedModelReference = (0, import_react18.useRef)(null);
-  const [validationAsyncSuccessMessage, setValidationAsyncSuccessMessage] = (0, import_react18.useState)(
+  const { schema: schema2, model, required, submitted, errors, onChange } = props;
+  const [validationAsyncModel, setValidationAsyncModel] = (0, import_react19.useState)(model);
+  const previousRequestedModelReference = (0, import_react19.useRef)(null);
+  const [validationAsyncSuccessMessage, setValidationAsyncSuccessMessage] = (0, import_react19.useState)(
     null
   );
-  const [validationAsyncErrors, setValidationAsyncErrors] = (0, import_react18.useState)(null);
-  const [fieldSubmitted, setFieldSubmitted] = (0, import_react18.useState)(false);
-  const [abortController, setAbortController] = (0, import_react18.useState)(null);
+  const [validationAsyncErrors, setValidationAsyncErrors] = (0, import_react19.useState)(null);
+  const [fieldSubmitted, setFieldSubmitted] = (0, import_react19.useState)(false);
+  const [abortController, setAbortController] = (0, import_react19.useState)(null);
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
-  const logger = useLogger();
-  const getValidationAsyncResponse = async (currentValidationAsyncModel, validationAsyncSpec) => {
-    const signal = abortCurrentRequestAndGetNewAbortSignal();
-    const requestBody = { [validationAsyncSpec.param]: currentValidationAsyncModel };
-    previousRequestedModelReference.current = currentValidationAsyncModel;
-    setFieldSubmitted(true);
-    if (!validationAsyncSpec.method) {
-      logger.warning(
+  const log = useLogger();
+  (0, import_react19.useEffect)(() => {
+    if (!schema2.validationAsync.method) {
+      log.warning(
         "Invalid schema or model",
         'ValidationAsyncSchema without a "method" property would have defaulted to "GET" in previous versions. Now defaults to "POST".',
         {}
       );
     }
+  }, [log, schema2.validationAsync.method]);
+  const getValidationAsyncResponse = async (currentValidationAsyncModel, validationAsyncSpec) => {
+    const signal = abortCurrentRequestAndGetNewAbortSignal();
+    const requestBody = { [validationAsyncSpec.param]: currentValidationAsyncModel };
+    previousRequestedModelReference.current = currentValidationAsyncModel;
+    setFieldSubmitted(true);
     onEvent("Dynamic Flow - ValidationAsync", { status: "pending" });
     const response = await httpClient(validationAsyncSpec.url, {
       method: validationAsyncSpec.method || "POST",
@@ -4272,29 +4286,29 @@ var ValidationAsyncSchema = (props) => {
   };
   const onBlur = () => {
     if (!isNull(validationAsyncModel) && !isEqual(validationAsyncModel, previousRequestedModelReference.current)) {
-      void getValidationAsyncResponse(validationAsyncModel, props.schema.validationAsync);
+      void getValidationAsyncResponse(validationAsyncModel, schema2.validationAsync);
     }
   };
-  const validationAsyncOnChange = (parameters) => {
-    props.onChange(__spreadProps(__spreadValues({}, parameters), {
-      triggerSchema: props.schema,
+  const onValidationAsyncChange = (parameters) => {
+    onChange(__spreadProps(__spreadValues({}, parameters), {
+      triggerSchema: schema2,
       triggerModel: parameters.model
     }));
     setValidationAsyncErrors(null);
     setValidationAsyncSuccessMessage(null);
-    if (isValidSchema(parameters.model, props.schema)) {
+    if (isValidSchema(parameters.model, schema2)) {
       setValidationAsyncModel(parameters.model);
     }
   };
   const basicTypeSchemaProps = {
-    required: props.required,
-    submitted: props.submitted || fieldSubmitted,
-    schema: props.schema,
+    submitted: submitted || fieldSubmitted,
     model: validationAsyncModel,
-    errors: validationAsyncErrors || props.errors,
-    onChange: validationAsyncOnChange,
+    errors: validationAsyncErrors || errors,
+    infoMessage: validationAsyncSuccessMessage,
+    onChange: onValidationAsyncChange,
     onBlur,
-    infoMessage: validationAsyncSuccessMessage
+    required,
+    schema: schema2
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
 };
@@ -4303,100 +4317,67 @@ var ValidationAsyncSchema_default = ValidationAsyncSchema;
 
 // src/jsonSchemaForm/genericSchema/GenericSchema.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react21 = require("react");
 var GenericSchemaForm = (props) => {
   const { schema: schema2, model = null, errors = null, hideTitle = false, disabled = false } = props;
   const schemaProps = __spreadProps(__spreadValues({}, props), { model, errors, hideTitle, disabled });
   const type = getSchemaType(schema2);
   const log = useLogger();
-  const logInvalidSchemaWarning = () => log.error(
-    "Invalid schema or model",
-    `Schema of type ${type || "undefined"} requested, but schema did not pass validation.`
-  );
+  (0, import_react20.useEffect)(() => {
+    if (!isValidGenericSchema(schema2, model, errors)) {
+      log.error(
+        "Invalid schema or model",
+        `Schema of type ${type || "undefined"} requested, but schema did not pass validation.`
+      );
+    }
+  }, [schema2, model, errors, type, log]);
   switch (type) {
     case "readOnly":
       return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ReadOnlySchema_default, __spreadValues({}, schemaProps));
     case "persistAsync":
-      if (isPersistAsyncSchema(schema2) && isNullableStringModel(model) && isBasicError(errors)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PersistAsyncSchema_default, __spreadValues({}, filteredProps));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PersistAsyncSchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PersistAsyncSchema_default, __spreadValues({}, schemaProps));
     case "validationAsync":
-      if (isValidationAsyncSchema(schema2) && isNullableBasicModel(model) && isBasicError(errors)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ValidationAsyncSchema_default, __spreadValues({}, filteredProps));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ValidationAsyncSchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ValidationAsyncSchema_default, __spreadValues({}, schemaProps));
     case "basic": {
-      if (isBasicSchema(schema2) && isNullableBasicModel(model) && isBasicError(errors)) {
-        const filteredProps = __spreadProps(__spreadValues({
-          infoMessage: null
-        }, schemaProps), {
-          schema: schema2,
-          model,
-          errors
-        });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BasicTypeSchema_default, __spreadValues({}, filteredProps));
-      } else {
-        const filteredProps = __spreadProps(__spreadValues({
-          infoMessage: null
-        }, schemaProps), {
-          schema: schema2,
-          model,
-          errors
-        });
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BasicTypeSchema_default, __spreadValues({}, filteredProps));
-      }
+      const basicTypeProps = __spreadValues({ infoMessage: null }, schemaProps);
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeProps));
     }
     case "object":
-      if (isObjectSchema(schema2) && isNullableObjectModel(model)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ObjectSchema_default, __spreadValues({}, filteredProps), JSON.stringify(schema2));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ObjectSchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_react21.createElement)(ObjectSchema_default, __spreadProps(__spreadValues({}, schemaProps), { key: JSON.stringify(schema2) }));
     case "array":
-      if (isArraySchema(schema2) && isNullableArrayModel(model) && isBasicError(errors)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArraySchema_default, __spreadValues({}, filteredProps));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArraySchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArraySchema_default, __spreadValues({}, schemaProps));
     case "promotedOneOf":
-      if (isOneOfObjectSchema(schema2) && isNullableObjectModel(model)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfSchema_default, __spreadValues({}, filteredProps));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfSchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfSchema_default, __spreadValues({}, schemaProps));
     case "oneOf":
-      if (isOneOfSchema(schema2)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneOfSchema_default, __spreadValues({}, filteredProps));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneOfSchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneOfSchema_default, __spreadValues({}, schemaProps));
     case "allOf":
-      if (isAllOfSchema(schema2) && isObjectModel(model)) {
-        const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AllOfSchema_default, __spreadValues({}, filteredProps));
-      } else {
-        logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AllOfSchema_default, __spreadValues({}, props));
-      }
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AllOfSchema_default, __spreadValues({}, schemaProps));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {});
 };
 var GenericSchema_default = GenericSchemaForm;
+var isValidGenericSchema = (schema2, model, errors) => {
+  const type = getSchemaType(schema2);
+  switch (type) {
+    case "persistAsync":
+      return isPersistAsyncSchema(schema2) && isNullableStringModel(model) && isBasicError(errors);
+    case "validationAsync":
+      return isValidationAsyncSchema(schema2) && isNullableBasicModel(model) && isBasicError(errors);
+    case "basic":
+      return isBasicSchema(schema2) && isNullableBasicModel(model) && isBasicError(errors);
+    case "object":
+      return isObjectSchema(schema2) && isNullableObjectModel(model);
+    case "array":
+      return isArraySchema(schema2) && isNullableArrayModel(model) && isBasicError(errors);
+    case "promotedOneOf":
+      return isOneOfObjectSchema(schema2) && isNullableObjectModel(model);
+    case "oneOf":
+      return isOneOfSchema(schema2);
+    case "allOf":
+      return isAllOfSchema(schema2) && isObjectModel(model);
+  }
+  return false;
+};
 
 // src/jsonSchemaForm/JsonSchemaForm.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -4476,23 +4457,26 @@ 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");
-var import_react19 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var DynamicImage = ({ component: image }) => {
   const { url, size, text, margin } = image;
   const httpClient = useHttpClient();
-  const [imageSource, setImageSource] = (0, import_react19.useState)("");
-  (0, import_react19.useEffect)(() => {
+  const [imageSource, setImageSource] = (0, import_react22.useState)("");
+  (0, import_react22.useEffect)(() => {
     void getImageSource(httpClient, url).then(setImageSource);
   }, [url, httpClient]);
   const imageProps = {
@@ -4556,7 +4540,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 +4568,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));
@@ -4687,9 +4673,9 @@ var DynamicParagraph_messages_default = (0, import_react_intl13.defineMessages)(
 
 // src/layout/paragraph/useSnackBarIfAvailable.ts
 var import_components18 = require("@transferwise/components");
-var import_react20 = require("react");
+var import_react23 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react20.useContext)(import_components18.SnackbarContext);
+  const context = (0, import_react23.useContext)(import_components18.SnackbarContext);
   return context ? context.createSnackbar : noop3;
 }
 function noop3() {
@@ -4811,13 +4797,13 @@ var BasicTypeSchema = (props) => {
       props.onBlur();
     }
   };
-  const [model, setModel] = (0, import_react21.useState)((_a = props.model) != null ? _a : null);
-  const [lastModel, setLastModel] = (0, import_react21.useState)((_b = props.model) != null ? _b : null);
-  const [changed, setChanged] = (0, import_react21.useState)(false);
-  const [focused, setFocused] = (0, import_react21.useState)(false);
-  const [blurred, setBlurred] = (0, import_react21.useState)(false);
-  const [validations, setValidations] = (0, import_react21.useState)([]);
-  const id = (0, import_react21.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
+  const [model, setModel] = (0, import_react24.useState)((_a = props.model) != null ? _a : null);
+  const [lastModel, setLastModel] = (0, import_react24.useState)((_b = props.model) != null ? _b : null);
+  const [changed, setChanged] = (0, import_react24.useState)(false);
+  const [focused, setFocused] = (0, import_react24.useState)(false);
+  const [blurred, setBlurred] = (0, import_react24.useState)(false);
+  const [validations, setValidations] = (0, import_react24.useState)([]);
+  const id = (0, import_react24.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
   const onSchemaChange = () => {
     const defaultValue = getDefaultValue(props.schema);
     if (isNullish(model) && !isNullish(defaultValue)) {
@@ -4832,11 +4818,14 @@ var BasicTypeSchema = (props) => {
   };
   const isConst = props.schema.const;
   const isHidden = props.schema.hidden || isConst;
-  (0, import_react21.useEffect)(refreshValidations, [props.model, props.submitted]);
-  (0, import_react21.useEffect)(onSchemaChange, [props.schema]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(refreshValidations, [props.model, props.submitted]);
+  (0, import_react24.useEffect)(onSchemaChange, [props.schema]);
+  (0, import_react24.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,
@@ -4908,16 +4897,15 @@ var PersistAsyncBasicSchema = (props) => {
   const intl = (0, import_react_intl15.useIntl)();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
-  const [persistAsyncModel, setPersistAsyncModel] = (0, import_react22.useState)(null);
+  const [persistAsyncModel, setPersistAsyncModel] = (0, import_react25.useState)(null);
   const previousPersistAsyncModel = usePrevious(persistAsyncModel);
-  const [persistAsyncError, setPersistAsyncError] = (0, import_react22.useState)(null);
-  const [fieldSubmitted, setFieldSubmitted] = (0, import_react22.useState)(false);
-  const [abortController, setAbortController] = (0, import_react22.useState)(null);
-  const log = useLogger();
-  (0, import_react22.useEffect)(() => {
+  const [persistAsyncError, setPersistAsyncError] = (0, import_react25.useState)(null);
+  const [fieldSubmitted, setFieldSubmitted] = (0, import_react25.useState)(false);
+  const [abortController, setAbortController] = (0, import_react25.useState)(null);
+  (0, import_react25.useEffect)(() => {
     if (controlTypesWithPersistOnChange.has(
       // TODO: LOW avoid type assertion below -- control type may be nullish. consider ?? ''
-      getControlType(props.schema.persistAsync.schema, log)
+      getControlType(props.schema.persistAsync.schema)
     )) {
       persistAsyncIfValid();
     }
@@ -5002,7 +4990,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 
 // src/common/hooks/usePersistAsync/usePersistAsync.ts
 var usePersistAsync = (persistAsync) => {
-  const [abortController, setAbortController] = (0, import_react23.useState)(null);
+  const [abortController, setAbortController] = (0, import_react26.useState)(null);
   const httpClient = useHttpClient();
   const intl = (0, import_react_intl16.useIntl)();
   const { schema: schema2 } = persistAsync;
@@ -5081,7 +5069,7 @@ function hasStringMessage(value) {
 }
 
 // src/common/hooks/usePolling/usePolling.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 function usePolling({
   asyncFn,
   interval,
@@ -5090,9 +5078,9 @@ function usePolling({
   onPollingResponse,
   onFailure
 }) {
-  const onPollingResponseReference = (0, import_react24.useRef)(onPollingResponse);
-  const onFailureReference = (0, import_react24.useRef)(onFailure);
-  const poll = (0, import_react24.useMemo)(
+  const onPollingResponseReference = (0, import_react27.useRef)(onPollingResponse);
+  const onFailureReference = (0, import_react27.useRef)(onFailure);
+  const poll = (0, import_react27.useMemo)(
     () => createPollingClosure(
       asyncFn,
       maxAttempts,
@@ -5102,7 +5090,7 @@ function usePolling({
     ),
     [asyncFn, maxAttempts, maxConsecutiveFails]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (interval > 0) {
       const intervalReference = setInterval(() => {
         poll();
@@ -5110,7 +5098,7 @@ function usePolling({
       return () => clearInterval(intervalReference);
     }
   }, [poll, interval]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     onPollingResponseReference.current = onPollingResponse;
     onFailureReference.current = onFailure;
   }, [onPollingResponse, onFailure]);
@@ -5139,20 +5127,20 @@ function createPollingClosure(asyncFn, maxAttempts, maxConsecutiveFails, onPolli
 }
 
 // src/common/hooks/usePrevious/usePrevious.js
-var import_react25 = require("react");
+var import_react28 = require("react");
 var usePrevious = (value) => {
-  const reference = (0, import_react25.useRef)();
-  (0, import_react25.useEffect)(() => {
+  const reference = (0, import_react28.useRef)();
+  (0, import_react28.useEffect)(() => {
     reference.current = value;
   }, [value]);
   return reference.current;
 };
 
 // src/common/hooks/useStepPolling/useStepPolling.tsx
-var import_react26 = require("react");
+var import_react29 = require("react");
 function useStepPolling(polling, onAction) {
   const httpClient = useHttpClient();
-  const asyncFn = (0, import_react26.useMemo)(() => {
+  const asyncFn = (0, import_react29.useMemo)(() => {
     if (polling) {
       return () => {
         return httpClient(polling.url).then((response) => {
@@ -5167,7 +5155,7 @@ function useStepPolling(polling, onAction) {
       return void 0;
     }
   }, [polling, httpClient]);
-  const onPollingResponse = (0, import_react26.useCallback)(
+  const onPollingResponse = (0, import_react29.useCallback)(
     (pollingResponse) => {
       if (pollingResponse == null ? void 0 : pollingResponse.action) {
         onAction(pollingResponse.action);
@@ -5183,7 +5171,7 @@ function useStepPolling(polling, onAction) {
     maxAttempts: (polling == null ? void 0 : polling.maxAttempts) || 0,
     maxConsecutiveFails: 1,
     onPollingResponse,
-    onFailure: (0, import_react26.useCallback)(() => {
+    onFailure: (0, import_react29.useCallback)(() => {
       if (polling) {
         onAction(polling.onError.action);
       }
@@ -5193,17 +5181,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) => {
@@ -5231,10 +5219,10 @@ var LayoutStep = (props) => {
 var LayoutStep_default = LayoutStep;
 
 // src/step/cameraStep/CameraStep.tsx
-var import_react30 = require("react");
+var import_react33 = require("react");
 
 // src/step/cameraStep/cameraCapture/CameraCapture.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 var import_react_intl23 = require("react-intl");
 var import_react_webcam = __toESM(require_react_webcam());
 
@@ -5306,7 +5294,7 @@ var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime49.js
 );
 
 // src/step/cameraStep/cameraCapture/hooks/index.ts
-var import_react27 = require("react");
+var import_react30 = require("react");
 
 // src/step/cameraStep/cameraCapture/utils/index.ts
 var isSelfieCamera = (stream) => {
@@ -5354,7 +5342,7 @@ var getVideoCapabilities = (videoStream) => {
 
 // src/step/cameraStep/cameraCapture/hooks/index.ts
 var useVideoConstraints = (direction) => {
-  const [videoConstraints, setVideoConstraints] = (0, import_react27.useState)();
+  const [videoConstraints, setVideoConstraints] = (0, import_react30.useState)();
   const defaultVideoConstraints = {
     facingMode: direction === "front" ? "user" : "environment",
     height: { min: 480, max: 1080, ideal: 720 },
@@ -5362,7 +5350,7 @@ var useVideoConstraints = (direction) => {
     frameRate: 30,
     aspectRatio: 16 / 9
   };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     void getVideoConstraints(direction).then(setVideoConstraints);
   }, [direction]);
   const getVideoConstraints = async (direction2) => {
@@ -5380,7 +5368,7 @@ var useVideoConstraints = (direction) => {
 };
 
 // src/step/cameraStep/cameraCapture/overlay/Overlay.tsx
-var import_react28 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
@@ -5397,8 +5385,8 @@ var Overlay = ({
   instructions,
   reviewInstructions
 }) => {
-  const svgReference = (0, import_react28.useRef)(null);
-  (0, import_react28.useEffect)(() => {
+  const svgReference = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     const listener = debounce(() => {
       var _a;
       if ((_a = svgReference.current) == null ? void 0 : _a.innerHTML) {
@@ -5548,14 +5536,14 @@ var CameraCapture = ({
   onCapture,
   onEvent
 }) => {
-  const [mode, setMode] = (0, import_react29.useState)("CAPTURE");
-  const [isVideoMirrored, setIsVideoMirrored] = (0, import_react29.useState)(false);
-  const [ready, setReady] = (0, import_react29.useState)(false);
-  const [reviewImage, setReviewImage] = (0, import_react29.useState)();
-  const webcamReference = (0, import_react29.useRef)(null);
+  const [mode, setMode] = (0, import_react32.useState)("CAPTURE");
+  const [isVideoMirrored, setIsVideoMirrored] = (0, import_react32.useState)(false);
+  const [ready, setReady] = (0, import_react32.useState)(false);
+  const [reviewImage, setReviewImage] = (0, import_react32.useState)();
+  const webcamReference = (0, import_react32.useRef)(null);
   const { videoConstraints } = useVideoConstraints(direction);
   const intl = (0, import_react_intl23.useIntl)();
-  const handleCapture = (0, import_react29.useCallback)(async () => {
+  const handleCapture = (0, import_react32.useCallback)(async () => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _a.video) && ((_c = (_b = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _b.video) == null ? void 0 : _c.readyState) >= 3) {
       (_e = (_d = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _d.video) == null ? void 0 : _e.pause();
@@ -5577,7 +5565,7 @@ var CameraCapture = ({
       );
     }
   }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
-  const handleUserMediaError = (0, import_react29.useCallback)(
+  const handleUserMediaError = (0, import_react32.useCallback)(
     (error) => {
       if (error instanceof DOMException && (error == null ? void 0 : error.name) === "NotAllowedError") {
         setMode("NO_CAMERA_ACCESS");
@@ -5589,7 +5577,7 @@ var CameraCapture = ({
     },
     [setMode, onEvent]
   );
-  const handleUserMedia = (0, import_react29.useCallback)(
+  const handleUserMedia = (0, import_react32.useCallback)(
     (stream) => {
       setReady(true);
       setIsVideoMirrored(isSelfieCamera(stream));
@@ -5662,17 +5650,17 @@ 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 || {};
   const { url: imageUrl } = image || {};
-  const [captureClicked, setCaptureClicked] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [captureClicked, setCaptureClicked] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
     if (captureClicked) {
       onAction(action2);
     }
@@ -5708,8 +5696,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 +5706,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 +5716,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,44 +5829,43 @@ 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 }))
   ] });
 };
 
 // src/dynamicFlow/utils/useDebouncedRefresh/useDebouncedRefresh.ts
-var import_react31 = require("react");
+var import_react34 = require("react");
 var DEBOUNCE_DELAY = 1e3;
 function useDebouncedRefresh(fetchRefresh) {
-  const map = (0, import_react31.useRef)(/* @__PURE__ */ new Map());
+  const map = (0, import_react34.useRef)(/* @__PURE__ */ new Map());
   const retrieveOrCreate = (key) => {
     if (map.current.has(key)) {
       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();
     }
@@ -5886,7 +5873,7 @@ function useDebouncedRefresh(fetchRefresh) {
 }
 
 // src/dynamicFlow/utils/useDynamicFlowState.ts
-var import_react32 = require("react");
+var import_react35 = require("react");
 
 // src/dynamicFlow/DynamicFlowTypes.ts
 function isSchema(schema2) {
@@ -5896,23 +5883,23 @@ function isSchema(schema2) {
 // src/dynamicFlow/utils/useDynamicFlowState.ts
 var useDynamicFlowState = (initialStep) => {
   var _a, _b;
-  const [formErrors, setFormErrors] = (0, import_react32.useState)((_a = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _a.validation);
-  const [globalError, setGlobalError] = (0, import_react32.useState)((_b = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _b.error);
-  const [stepAndModels, setStepAndModels] = (0, import_react32.useState)({
+  const [formErrors, setFormErrors] = (0, import_react35.useState)((_a = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _a.validation);
+  const [globalError, setGlobalError] = (0, import_react35.useState)((_b = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _b.error);
+  const [stepAndModels, setStepAndModels] = (0, import_react35.useState)({
     step: initialStep || void 0,
     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 +5915,11 @@ var useDynamicFlowState = (initialStep) => {
       return updatedState;
     });
   };
-  const modelIsValid = (0, import_react32.useMemo)(() => areModelsValid(models, getAllSchemas(step33)), [models, step33]);
+  const modelIsValid = (0, import_react35.useMemo)(() => areModelsValid(models, getAllSchemas(step35)), [models, step35]);
   return {
     formErrors,
     globalError,
-    step: step33,
+    step: step35,
     models,
     etag,
     modelIsValid,
@@ -5952,9 +5939,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) {
@@ -5979,7 +5966,7 @@ var areModelsValid = (formModels, schemas = []) => {
 
 // src/dynamicFlow/utils/useLoader.tsx
 var import_components24 = require("@transferwise/components");
-var import_react33 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
@@ -5987,7 +5974,7 @@ function useLoader(loaderConfig, initialState) {
     initial: true,
     submission: false
   }, loaderConfig);
-  const [loadingState, setLoadingState] = (0, import_react33.useState)(initialState);
+  const [loadingState, setLoadingState] = (0, import_react36.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     import_components24.Loader,
@@ -5997,11 +5984,11 @@ function useLoader(loaderConfig, initialState) {
       "data-testid": "loader"
     }
   ) : null;
-  return { loadingState, setLoadingState, loader };
+  return { isLoading: loadingState !== "idle", setLoadingState, loader };
 }
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
-var import_react34 = require("react");
+var import_react37 = require("react");
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.tsx
 var import_components25 = require("@transferwise/components");
@@ -6045,7 +6032,7 @@ var ErrorBoundaryAlert = ({ onDismiss }) => {
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var noop6 = () => {
 };
-var ErrorBoundary = class extends import_react34.Component {
+var ErrorBoundary = class extends import_react37.Component {
   constructor(props) {
     super(props);
     this.handleErrorReset = () => {
@@ -6072,46 +6059,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 +6171,7 @@ var DynamicFlowComponent = ({
   const {
     formErrors,
     globalError,
-    step: step33,
+    step: step35,
     models,
     etag,
     modelIsValid,
@@ -6161,26 +6180,24 @@ var DynamicFlowComponent = ({
     setStepAndEtag,
     setSchemaModel
   } = useDynamicFlowState(initialStep);
-  const [submitted, setSubmitted] = (0, import_react35.useState)(false);
-  const { loadingState, setLoadingState, loader } = useLoader(
+  const [submitted, setSubmitted] = (0, import_react38.useState)(false);
+  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 analyticsMetadata = (0, import_react35.useMemo)(
+  const logCritical = getLogger("critical", onLog, flowId, (step35 == null ? void 0 : step35.id) || (step35 == null ? void 0 : step35.key));
+  const analyticsMetadata = (0, import_react38.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)(
+  const dispatchEvent = (0, import_react38.useMemo)(
     () => getEventDispatcher(onEvent, analyticsMetadata),
     [onEvent, analyticsMetadata]
   );
-  const triggerActionRequest = (0, import_react35.useCallback)(
+  const dfHttpClient = (0, import_react38.useCallback)(
     ({ action: action2, data, etag: etag2 }) => {
       const { url, method = "POST" } = action2;
       return httpClient(url != null ? url : "", {
@@ -6196,126 +6213,113 @@ 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 dispatchEventAndComplete = (0, import_react35.useCallback)(
+  const handleExitResponse = async (response, actionResult) => {
+    const exitResult = await getJsonObjectOrNull(response);
+    dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), actionResult));
+  };
+  const debouncedRefresh = useDebouncedRefresh(performRefresh);
+  const dispatchEventAndComplete = (0, import_react38.useCallback)(
     (result) => {
       dispatchEvent("Dynamic Flow - Flow Finished", { result: "success" });
       onCompletion(result);
     },
     [onCompletion, dispatchEvent]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     dispatchEvent("Dynamic Flow - Flow Started", {});
   }, []);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!initialStep) {
       const action2 = __spreadValues({
         $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 +6340,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 +6421,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 +6452,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 +6484,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 +6528,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 +6564,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 +6586,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 +6651,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 +6680,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 +6708,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 +6723,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 +6735,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 +6745,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 +6778,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 +6812,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 +6828,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 +6856,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 +6926,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 +7048,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 +7361,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 +7594,11 @@ var step18 = {
     {
       type: "button",
       action: {
-        $ref: "submit"
+        $id: "submit",
+        title: "Update",
+        url: "/responses/recipientUpdate/?delay=5000",
+        type: "primary",
+        method: "PATCH"
       }
     }
   ]
@@ -7667,10 +7607,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 +7705,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 +7714,6 @@ var step20 = {
       }
     }
   },
-  actions: [],
   layout: [
     {
       type: "form",
@@ -7854,11 +7790,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 +7821,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 +7846,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 +7878,6 @@ var step23 = {
       }
     }
   ],
-  actions: [
-    {
-      title: "Submit Persist Async",
-      url: "/persist-async-submit",
-      method: "POST",
-      type: "primary"
-    }
-  ],
   layout: [
     {
       type: "form",
@@ -7964,8 +7889,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 +7916,6 @@ var step24 = {
       }
     }
   ],
-  actions: [],
   schemas: []
 };
 var polling_default = step24;
@@ -8000,7 +7923,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 +7953,6 @@ var step25 = {
       }
     }
   ],
-  actions: [],
   model: {
     // name: 'Colin Robinson',
   }
@@ -8304,29 +8226,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 +8290,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 +8560,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 +8588,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 +8613,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 +8623,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 +8662,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 +8765,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 +8924,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 +8984,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
       }