@wise/dynamic-flow-client 1.0.2 → 1.2.0

package/build/main.js

@@ -541,92 +541,87 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/step/layoutStep/utils/layout-utils.ts
-function convertStepToLayout(step31, { displayStepTitle = true } = {}) {
-  if (!step31 || !step31.type) {
-    throw new Error("Missing step type");
+function convertStepToLayout(step35, { displayStepTitle = true } = {}) {
+  if (step35.layout) {
+    return addMissingTitleAndDescriptionToStep(step35, displayStepTitle);
   }
-  if (step31.layout) {
-    return addMissingTitleAndDescriptionToStep(step31, displayStepTitle);
-  }
-  switch (step31.type) {
+  switch (step35.type) {
     case "final":
-      return convertFinalStepToDynamicLayout(step31);
+      return convertFinalStepToDynamicLayout(step35);
     case "decision":
-      return convertDecisionStepToDynamicLayout(step31);
-    case "form":
-      return convertFormStepToDynamicLayout(step31);
+      return convertDecisionStepToDynamicLayout(step35);
     case "external":
-      return convertExternalStepToDynamicLayout(step31);
+      return convertExternalStepToDynamicLayout(step35);
     default:
-      throw new Error("invalid step type");
+      return convertFormStepToDynamicLayout(step35);
   }
 }
-function convertCommonComponents(step31) {
+function convertCommonComponents(step35) {
   const layout6 = [];
-  if (step31.title) {
-    layout6.push(convertStepTitleToDynamicHeading(step31.title));
+  if (step35.title) {
+    layout6.push(convertStepTitleToDynamicHeading(step35.title));
   }
-  if (step31.image) {
-    const image = convertStepImageToDynamicImage(step31.image);
+  if (step35.image) {
+    const image = convertStepImageToDynamicImage(step35.image);
     layout6.push(image);
   }
-  if (step31.description) {
-    layout6.push(convertStepDescriptionToDynamicParagraph(step31.description));
+  if (step35.description) {
+    layout6.push(convertStepDescriptionToDynamicParagraph(step35.description));
   }
   return layout6;
 }
-function convertExternalStepToDynamicLayout(step31) {
-  return [...convertCommonComponents(step31), convertStepToExternalComponent(step31)];
+function convertExternalStepToDynamicLayout(step35) {
+  return [...convertCommonComponents(step35), convertStepToExternalComponent(step35)];
 }
-function convertStepToExternalComponent(step31) {
+function convertStepToExternalComponent(step35) {
   return {
     type: "external",
-    requestUrl: step31.requestUrl,
-    polling: step31.polling,
-    responseHandlers: step31.responseHandlers,
-    retryTitle: step31.retryTitle
+    requestUrl: step35.requestUrl,
+    polling: step35.polling,
+    responseHandlers: step35.responseHandlers,
+    retryTitle: step35.retryTitle
   };
 }
-function convertFormStepToDynamicLayout(step31) {
-  const layout6 = convertCommonComponents(step31);
-  if (step31.reviewFields) {
-    layout6.push(convertStepReviewToDynamicReview(step31.reviewFields));
+function convertFormStepToDynamicLayout(step35) {
+  const layout6 = convertCommonComponents(step35);
+  if (step35.reviewFields) {
+    layout6.push(convertStepReviewToDynamicReview(step35.reviewFields));
   }
-  if (step31.schemas) {
-    layout6.push(...getSchemaLayout(step31));
+  if (step35.schemas) {
+    layout6.push(...getSchemaLayout(step35));
   }
-  if (step31.actions) {
-    const actions = step31.actions.map(convertStepActionToDynamicAction);
+  if (step35.actions) {
+    const actions = step35.actions.map(convertStepActionToDynamicAction);
     layout6.push(dynamicBox(actions, "md"));
   }
   return layout6;
 }
-function convertFinalStepToDynamicLayout(step31) {
+function convertFinalStepToDynamicLayout(step35) {
   const layout6 = [];
-  if (step31.details) {
-    if (step31.details.image) {
-      const image = convertFinalStepImageToDynamicImage(step31.details.image);
+  if (step35.details) {
+    if (step35.details.image) {
+      const image = convertFinalStepImageToDynamicImage(step35.details.image);
       layout6.push(image);
     }
-    if (step31.details.title) {
-      layout6.push(convertStepTitleToDynamicHeading(step31.details.title));
+    if (step35.details.title) {
+      layout6.push(convertStepTitleToDynamicHeading(step35.details.title));
     }
-    if (step31.details.description) {
-      layout6.push(convertStepDescriptionToDynamicParagraph(step31.details.description));
+    if (step35.details.description) {
+      layout6.push(convertStepDescriptionToDynamicParagraph(step35.details.description));
     }
   }
-  if (step31.actions) {
-    const actions = step31.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(step31) {
-  const layout6 = convertCommonComponents(step31);
-  if (step31.options) {
-    layout6.push(convertStepDecisionToDynamicDecision(step31.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(step31) {
+function getSchemaLayout(step35) {
   const layout6 = [];
-  if (step31.schemas && step31.schemas[0]) {
-    const schema2 = step31.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(step31) {
 function isWideForm() {
   return false;
 }
-function addMissingTitleAndDescriptionToStep(step31, displayStepTitle) {
+function addMissingTitleAndDescriptionToStep(step35, displayStepTitle) {
   return [
-    ...displayStepTitle && step31.title ? [convertStepTitleToDynamicHeading(step31.title)] : [],
-    ...step31.description ? [convertStepDescriptionToDynamicParagraph(step31.description)] : [],
-    ...step31.layout || []
+    ...displayStepTitle && step35.title ? [convertStepTitleToDynamicHeading(step35.title)] : [],
+    ...step35.description ? [convertStepDescriptionToDynamicParagraph(step35.description)] : [],
+    ...step35.layout || []
   ];
 }
 
@@ -1711,23 +1706,19 @@ function shouldDebounceSchema(schema2) {
 }
 
 // src/common/utils/step-utils.ts
-var stepType = {
-  LAYOUT: "layout",
-  CAMERA: "camera"
+var isCameraStep = (step35) => {
+  return isFormStep(step35) && hasSingleAction(step35) && hasSingleFileUploadSchemaWithCameraOnly(step35);
 };
-var isCameraStep = (step31) => {
-  return isFormStep(step31) && hasSingleAction(step31) && hasSingleFileUploadSchemaWithCameraOnly(step31);
-};
-var isFormStep = (step31) => (step31 == null ? void 0 : step31.type) === "form";
-var hasSingleAction = (step31) => {
+var isFormStep = (step35) => !step35.type || step35.type === "form";
+var hasSingleAction = (step35) => {
   var _a;
-  return ((_a = step31 == null ? void 0 : step31.actions) == null ? void 0 : _a.length) === 1;
+  return ((_a = step35 == null ? void 0 : step35.actions) == null ? void 0 : _a.length) === 1;
 };
-var hasSingleFileUploadSchemaWithCameraOnly = (step31) => {
-  if (!step31.schemas) {
+var hasSingleFileUploadSchemaWithCameraOnly = (step35) => {
+  if (!step35.schemas) {
     return false;
   }
-  const schemas = filterHiddenSchemas(step31.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 = (step31) => {
-  if (isCameraStep(step31)) {
-    return stepType.CAMERA;
-  }
-  return stepType.LAYOUT;
-};
 
 // src/common/hooks/useDebouncedFunction/useDebouncedFunction.tsx
 function useDebouncedFunction(callback, waitMs) {
@@ -2101,13 +2086,57 @@ var DynamicBox_default = DynamicBox;
 
 // src/layout/button/DynamicButton.tsx
 var import_components2 = require("@transferwise/components");
+
+// src/layout/button/utils.ts
+var priorities = {
+  primary: "primary",
+  secondary: "secondary",
+  link: "tertiary",
+  positive: "primary",
+  negative: "primary"
+};
+var getButtonPriority = (component) => {
+  var _a;
+  const actionType = component.action.type;
+  return (_a = component.control) != null ? _a : actionType ? priorities[actionType] : "secondary";
+};
+var types = {
+  primary: "neutral",
+  secondary: "neutral",
+  link: "neutral",
+  positive: "positive",
+  negative: "negative"
+};
+var getButtonType = (component) => {
+  var _a;
+  const actionType = component.action.type;
+  const type = (_a = component.context) != null ? _a : actionType ? types[actionType] : "neutral";
+  return type === "neutral" ? "accent" : type;
+};
+var getButtonSize = (size) => {
+  switch (size) {
+    case "xs":
+    case "sm":
+      return "sm";
+    case "lg":
+    case "xl":
+      return "lg";
+    case "md":
+    default:
+      return "md";
+  }
+};
+
+// src/layout/button/DynamicButton.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DynamicButton = (props) => {
+  var _a;
   const { component, onAction } = props;
   const componentAction = component.action;
-  const { type, priority } = getButtonTypeAndPriority(componentAction);
+  const type = getButtonType(component);
+  const priority = getButtonPriority(component);
   const { loading } = useDynamicFlow();
-  const className = getMarginBottom(component.margin || "md") + " " + getActionClasses(componentAction);
+  const className = getMarginBottom(component.margin || "md");
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_components2.Button,
     {
@@ -2116,44 +2145,12 @@ var DynamicButton = (props) => {
       priority,
       block: true,
       className,
-      disabled: componentAction.disabled || loading,
+      disabled: component.disabled || componentAction.disabled || loading,
       onClick: () => onAction(componentAction),
-      children: componentAction.title
+      children: (_a = component.title) != null ? _a : componentAction.title
     }
   );
 };
-var getActionClasses = (action2) => {
-  return action2.primary ? "btn-primary" : "";
-};
-var getButtonSize = (size) => {
-  switch (size) {
-    case "xs":
-    case "sm":
-      return "sm";
-    case "lg":
-    case "xl":
-      return "lg";
-    case "md":
-    default:
-      return "md";
-  }
-};
-var getButtonTypeAndPriority = (action2) => {
-  switch (action2.type) {
-    case "link":
-      return { type: "accent", priority: "tertiary" };
-    case "primary":
-      return { type: "accent", priority: "primary" };
-    case "secondary":
-      return { type: "accent", priority: "secondary" };
-    case "positive":
-      return { type: "positive", priority: "primary" };
-    case "negative":
-      return { type: "negative", priority: "primary" };
-    default:
-      return { type: "accent", priority: "secondary" };
-  }
-};
 var DynamicButton_default = DynamicButton;
 
 // src/layout/columns/DynamicColumns.tsx
@@ -2994,7 +2991,7 @@ var _FormControl = class extends import_react13.PureComponent {
     const {
       name,
       placeholder,
-      step: step31,
+      step: step35,
       countryCode,
       type,
       options,
@@ -3102,7 +3099,7 @@ var _FormControl = class extends import_react13.PureComponent {
             placeholder,
             readOnly,
             required,
-            step: step31,
+            step: step35,
             type: "number",
             value: getSafeStringOrNumberValue(value, { coerceValue: true }),
             onBlur: this.handleOnBlur,
@@ -3318,52 +3315,30 @@ FormControl.defaultProps = {
 // src/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
 var import_components9 = require("@transferwise/components");
 
-// src/layout/icon/DynamicIcon.tsx
-var icons = __toESM(require("@transferwise/icons"));
+// src/layout/icon/FlagIcon.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var DynamicIcon = ({ type }) => {
-  const iconName = toCapitalisedCamelCase(type);
-  if (!Object.keys(icons).includes(iconName)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+var isFlagIcon = (name) => availableCurrencyFlags.some((currencyCode) => name === `flag-${currencyCode}`);
+var FlagIcon = ({ name }) => {
+  if (!isFlagIcon(name)) {
+    return null;
   }
-  const Icon = icons[iconName];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { size: 24 });
-};
-function toCapitalisedCamelCase(value) {
-  return value.split("-").map(capitaliseFirstChar).join("");
-}
-function capitaliseFirstChar(value) {
-  var _a;
-  return `${(_a = value[0]) == null ? void 0 : _a.toUpperCase()}${value.slice(1)}`;
-}
-function isValidIconName(name) {
-  const iconName = toCapitalisedCamelCase(name);
-  return Object.keys(icons).includes(iconName);
-}
-var DynamicIcon_default = DynamicIcon;
-
-// src/jsonSchemaForm/schemaFormControl/utils/currency-utils.ts
-function getCurrencyFlag(iconName) {
-  if (iconName) {
-    const index = availablePrefixedCurrencyFlags.indexOf(iconName);
-    if (index >= 0) {
-      return {
-        currency: availableCurrencyFlags[index]
-      };
+  const currencyCode = name.substring(5);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "img",
+    {
+      src: `https://wise.com/web-art/assets/flags/${currencyCode}.svg`,
+      alt: "",
+      "data-testid": `img-flag-${currencyCode}`
     }
-  }
-  return null;
-}
+  );
+};
 var availableCurrencyFlags = [
-  "eur",
-  "gbp",
-  "inr",
-  "usd",
   "aed",
   "ars",
   "aud",
   "bdt",
   "bgn",
+  "bnd",
   "brl",
   "bwp",
   "cad",
@@ -3375,7 +3350,9 @@ var availableCurrencyFlags = [
   "czk",
   "dkk",
   "egp",
+  "eur",
   "fjd",
+  "gbp",
   "gel",
   "ghs",
   "hkd",
@@ -3383,10 +3360,14 @@ var availableCurrencyFlags = [
   "huf",
   "idr",
   "ils",
+  "imp",
+  "inr",
   "jpy",
   "kes",
   "krw",
+  "lak",
   "lkr",
+  "lsl",
   "mad",
   "mxn",
   "myr",
@@ -3396,6 +3377,7 @@ var availableCurrencyFlags = [
   "nok",
   "npr",
   "nzd",
+  "pab",
   "pen",
   "php",
   "pkr",
@@ -3405,20 +3387,58 @@ var availableCurrencyFlags = [
   "sek",
   "sgd",
   "thb",
+  "tmt",
   "try",
   "tzs",
   "uah",
   "ugx",
+  "usd",
   "uyu",
   "vnd",
   "xof",
   "zar",
   "zmw"
 ];
-var availablePrefixedCurrencyFlags = availableCurrencyFlags.map((code) => `flag-${code}`);
 
-// src/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
+// src/layout/icon/NamedIcon.tsx
+var icons = __toESM(require("@transferwise/icons"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var isNamedIcon = (name) => {
+  const iconName = toCapitalisedCamelCase(name);
+  return Object.keys(icons).includes(iconName);
+};
+var NamedIcon = ({ name }) => {
+  if (!isNamedIcon(name)) {
+    return null;
+  }
+  const iconName = toCapitalisedCamelCase(name);
+  const Icon = icons[iconName];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: 24 });
+};
+var toCapitalisedCamelCase = (value) => value.split("-").map(capitaliseFirstChar).join("");
+var capitaliseFirstChar = (value) => {
+  var _a;
+  return `${(_a = value[0]) == null ? void 0 : _a.toUpperCase()}${value.slice(1)}`;
+};
+
+// src/layout/icon/DynamicIcon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DynamicIcon = ({ type }) => {
+  if (isFlagIcon(type)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FlagIcon, { name: type });
+  }
+  if (isNamedIcon(type)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NamedIcon, { name: type });
+  }
+  return null;
+};
+function isValidIconName(name) {
+  return isNamedIcon(name) || isFlagIcon(name);
+}
+var DynamicIcon_default = DynamicIcon;
+
+// src/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema2, controlType) => {
   switch (controlType) {
     case "select":
@@ -3429,56 +3449,58 @@ var mapConstSchemaToOption = (schema2, controlType) => {
   }
 };
 var mapConstSchemaToRadioOption = (schema2) => {
-  return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  return __spreadValues(__spreadValues(__spreadValues({
     // TODO: LOW avoid type assertion -- using || '' would fail some tests
     label: schema2.title,
     value: schema2.const
-  }, getOptionDescription(schema2.title, schema2.description)), mapIconToAvatar(schema2.icon)), mapCurrency(schema2.icon)), mapAvatar(schema2.image)), getDisabled(schema2.disabled));
+  }, getOptionDescription(schema2.title, schema2.description)), getAvatarPropertyForRadioOption(schema2)), getDisabled(schema2.disabled));
 };
 var mapConstSchemaToSelectOption = (schema2) => {
-  return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
     // TODO: LOW avoid type assertion -- using || '' would fail some tests
     label: schema2.title,
     value: schema2.const
-  }, getOptionDescription(schema2.title, schema2.description)), mapIcon(schema2.icon)), mapCurrency(schema2.icon)), mapImage(schema2.image)), getDisabled(schema2.disabled)), mapKeywordsToSearchStrings(schema2.keywords));
+  }, getOptionDescription(schema2.title, schema2.description)), getIconPropertyForSelectOption(schema2.icon)), mapImage(schema2.image)), getDisabled(schema2.disabled)), mapKeywordsToSearchStrings(schema2.keywords));
 };
-var mapCurrency = (icon) => icon ? getCurrencyFlag(icon.name) : null;
 var mapKeywordsToSearchStrings = (searchStrings) => isArray(searchStrings) ? { searchStrings } : {};
 var mapImage = (image) => {
   if (image == null ? void 0 : image.url) {
     return {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "media", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: image.url, alt: image.name || "" }) }) })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "media", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: image.url, alt: image.name || "" }) }) })
     };
   }
   return null;
 };
-var mapIcon = (icon) => {
+var getIconPropertyForSelectOption = (icon) => {
+  if ((icon == null ? void 0 : icon.name) && isFlagIcon(icon.name)) {
+    return { currency: icon.name.substring(5) };
+  }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DynamicIcon_default, { type: icon.name }) };
+    return { icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DynamicIcon_default, { type: icon.name }) };
   }
   if (icon == null ? void 0 : icon.text) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: icon.text }) };
+    return { icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: icon.text }) };
   }
   return null;
 };
-var mapIconToAvatar = (icon) => {
+var getAvatarPropertyForRadioOption = ({ image, icon }) => {
+  if (image == null ? void 0 : image.url) {
+    return {
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components9.Avatar, { type: import_components9.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: image.url, alt: "" }) })
+    };
+  }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components9.Avatar, { type: import_components9.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DynamicIcon_default, { type: icon.name }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components9.Avatar, { type: import_components9.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DynamicIcon_default, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components9.Avatar, { type: import_components9.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components9.Avatar, { type: import_components9.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
 };
-var mapAvatar = (image) => {
-  return image && image.url ? {
-    avatar: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components9.Avatar, { type: import_components9.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: image.url, alt: "User avatar" }) })
-  } : null;
-};
 var mapSchemaToUploadOptions = ({ accepts }) => __spreadValues({}, isArray(accepts) && { usAccept: accepts.join(",") });
 var getOptionDescription = (title, description) => {
   if (title && description) {
@@ -3495,7 +3517,7 @@ var getDisabled = (disabled) => {
 };
 
 // src/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var isNativeInput = (propsSchemaType) => {
   return propsSchemaType === "string" || propsSchemaType === "number";
 };
@@ -3580,7 +3602,7 @@ var SchemaFormControl = (props) => {
     // TODO: LOW avoid type assertion below
     uploadProps: mapSchemaToUploadOptions(props.schema)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps));
 };
 SchemaFormControl.defaultProps = {
   value: null,
@@ -3651,7 +3673,7 @@ function getSchemaProperties(childSchema) {
 }
 
 // src/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var OneOfSchema5 = (props) => {
   const onEvent = useEventDispatcher();
   const [changed, setChanged] = (0, import_react14.useState)(false);
@@ -3724,11 +3746,11 @@ var OneOfSchema5 = (props) => {
     "form-group": true,
     "has-error": !changed && props.errors && !isEmpty(props.errors) || (props.submitted || changed && blurred) && validations.length
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    (props.schema.oneOf.length > 1 || isConstSchema(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    (props.schema.oneOf.length > 1 || isConstSchema(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
         getTitleAndHelp(props.schema, id),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           SchemaFormControl_default,
           {
             id,
@@ -3741,7 +3763,7 @@ var OneOfSchema5 = (props) => {
             onSearchChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ControlFeedback_default,
           {
             changed,
@@ -3755,9 +3777,9 @@ var OneOfSchema5 = (props) => {
           }
         )
       ] }),
-      props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DynamicAlert_default, { component: props.schema.alert })
+      props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicAlert_default, { component: props.schema.alert })
     ] }),
-    isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       GenericSchema_default,
       {
         schema: props.schema.oneOf[schemaIndex],
@@ -3773,12 +3795,12 @@ var OneOfSchema5 = (props) => {
   ] });
 };
 function getTitleAndHelp(schema2, id) {
-  const helpElement = schema2.help ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Help_default, { help: schema2.help }) : null;
-  const titleElement = isConstSchema(schema2.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "control-label d-inline", htmlFor: id, children: [
+  const helpElement = schema2.help ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Help_default, { help: schema2.help }) : null;
+  const titleElement = isConstSchema(schema2.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "control-label d-inline", htmlFor: id, children: [
     schema2.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("h4", { className: "m-b-2", children: [
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("h4", { className: "m-b-2", children: [
     schema2.title,
     " ",
     helpElement
@@ -3824,7 +3846,7 @@ var import_react16 = require("react");
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
 var import_components10 = require("@transferwise/components");
 var import_react15 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var UploadInputAdapter = (props) => {
   const {
     id,
@@ -3858,7 +3880,7 @@ var UploadInputAdapter = (props) => {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_components10.UploadInput,
     {
       id,
@@ -3878,7 +3900,7 @@ var UploadInputAdapter = (props) => {
 };
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+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);
@@ -3920,8 +3942,8 @@ var PersistAsyncBlobSchema = (props) => {
     "form-group": true,
     "has-error": (props.submitted || changed) && !!combinedValidations.length
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       UploadInputAdapter,
       __spreadValues({
         id: props.schema.$id || props.schema.persistAsync.schema.$id || props.schema.persistAsync.idProperty,
@@ -3938,7 +3960,7 @@ var PersistAsyncBlobSchema = (props) => {
         onCancel
       }, mapSchemaToUploadOptions(props.schema.persistAsync.schema))
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       ControlFeedback_default,
       {
         blurred: true,
@@ -3962,17 +3984,17 @@ PersistAsyncBlobSchema.defaultProps = {
 var PersistAsyncBlobSchema_default = PersistAsyncBlobSchema;
 
 // src/jsonSchemaForm/persistAsyncSchema/PersistAsyncSchema.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var PersistAsyncSchema = (props) => {
   const { schema: schema2 } = props;
   const persistAsyncSchemaType = schema2.persistAsync.schema.type;
   if (persistAsyncSchemaType === "blob") {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       PersistAsyncBlobSchema_default,
       __spreadValues({}, props)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersistAsyncBasicSchema_default, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PersistAsyncBasicSchema_default, __spreadValues({}, props));
 };
 PersistAsyncSchema.defaultProps = {
   required: false
@@ -3993,7 +4015,7 @@ var getSelectionFromModel = (schema2, model) => {
 
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
 var import_components11 = require("@transferwise/components");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
   const { promoted, other, checkedMeans } = props.promotion;
@@ -4004,33 +4026,33 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components11.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components11.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
 };
 PromotedOneOfCheckboxControl.defaultProps = {};
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
 var import_components12 = require("@transferwise/components");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var PromotedOneOfRadioControl = (props) => {
   var _a, _b;
   const { id, selection, setSelection, promotion, promotedOneOf, title } = props;
   const radios = [
-    __spreadValues(__spreadValues({
+    __spreadValues({
       value: "promoted",
       // TODO: LOW avoid type assertion below the expression may be nullish, but "label" cannot be
       label: ((_a = promotion.promoted) == null ? void 0 : _a.title) || promotedOneOf.title,
       secondary: ((_b = promotion.promoted) == null ? void 0 : _b.description) || promotedOneOf.description
-    }, mapIconToAvatar(promotedOneOf.icon)), mapAvatar(promotedOneOf.image)),
-    __spreadValues(__spreadValues({
+    }, getAvatarPropertyForRadioOption(promotedOneOf)),
+    __spreadValues({
       value: "other",
       label: promotion.other.title,
       secondary: promotion.other.description
-    }, mapIconToAvatar(promotion.other.icon)), mapAvatar(promotion.other.image))
+    }, getAvatarPropertyForRadioOption(promotion.other))
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "form-group", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "form-group", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       import_components12.RadioGroup,
       {
         name: "promoted-selection",
@@ -4048,16 +4070,16 @@ PromotedOneOfRadioControl.defaultProps = {
 var PromotedOneOfRadioControl_default = PromotedOneOfRadioControl;
 
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfControl.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var PromotedOneOfControl = (props) => {
   const controlType = props.promotion.control || "radio";
   switch (controlType) {
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PromotedOneOfRadioControl_default, __spreadValues({}, props));
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PromotedOneOfRadioControl_default, __spreadValues({}, props));
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PromotedOneOfCheckboxControl_default, __spreadValues({}, props));
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PromotedOneOfCheckboxControl_default, __spreadValues({}, props));
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {});
   }
 };
 PromotedOneOfControl.defaultProps = {
@@ -4067,7 +4089,7 @@ PromotedOneOfControl.defaultProps = {
 var PromotedOneOfControl_default = PromotedOneOfControl;
 
 // src/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var isPromoted = (schema2) => schema2.promoted === true;
 var PromotedOneOfSchema = (props) => {
   var _a;
@@ -4078,9 +4100,9 @@ var PromotedOneOfSchema = (props) => {
   const promotedOneOf = props.schema.oneOf.find(isPromoted);
   const promotedObjectSchema = getPromotedObjectSchema(promotedOneOf);
   const otherOneOf = getOtherOneOf(props.schema);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    promotedAlert && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicAlert_default, { component: promotedAlert }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    promotedAlert && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DynamicAlert_default, { component: promotedAlert }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       PromotedOneOfControl_default,
       {
         id: props.schema.$id,
@@ -4091,8 +4113,8 @@ var PromotedOneOfSchema = (props) => {
         setSelection
       }
     ),
-    selection === "promoted" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ObjectSchema_default, __spreadProps(__spreadValues({}, props), { schema: promotedObjectSchema })),
-    selection === "other" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GenericSchema_default, __spreadProps(__spreadValues({}, props), { schema: otherOneOf }))
+    selection === "promoted" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ObjectSchema_default, __spreadProps(__spreadValues({}, props), { schema: promotedObjectSchema })),
+    selection === "other" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GenericSchema_default, __spreadProps(__spreadValues({}, props), { schema: otherOneOf }))
   ] });
 };
 function getPromotedObjectSchema(promotedSchema) {
@@ -4141,12 +4163,12 @@ var ReadOnlySchema_messages_default = (0, import_react_intl11.defineMessages)({
 });
 
 // src/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ReadOnlySchema = ({ schema: schema2, model }) => {
   const { title = "" } = schema2;
   const { formatMessage } = (0, import_react_intl12.useIntl)();
   const value = getValueForSchema({ schema: schema2, model, formatMessage });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components13.DefinitionList, { layout: import_components13.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_components13.DefinitionList, { layout: import_components13.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 };
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -4178,22 +4200,17 @@ function getSelectedOneOf(schema2, model) {
 }
 function getValueFromOption(option) {
   const text = option.title && option.description ? `${option.title} - ${option.description}` : option.title || "";
-  const currencyFlag = getCurrencyFlagFromOption(option);
-  return currencyFlag ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    currencyFlag,
+  const icon = getAvatarPropertyForRadioOption({ icon: option.icon });
+  return (icon == null ? void 0 : icon.avatar) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    icon.avatar,
     " ",
     text
   ] }) : text;
 }
-function getCurrencyFlagFromOption(option) {
-  var _a, _b;
-  const currency = (_b = getCurrencyFlag((_a = option.icon) == null ? void 0 : _a.name)) == null ? void 0 : _b.currency;
-  return currency ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: `currency-flag currency-flag-${currency} hidden-xs` }) : null;
-}
 
 // src/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.tsx
 var import_react18 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+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);
@@ -4276,13 +4293,13 @@ var ValidationAsyncSchema = (props) => {
     onBlur,
     infoMessage: validationAsyncSuccessMessage
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
 };
 ValidationAsyncSchema.defaultProps = { required: false };
 var ValidationAsyncSchema_default = ValidationAsyncSchema;
 
 // src/jsonSchemaForm/genericSchema/GenericSchema.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var GenericSchemaForm = (props) => {
   const { schema: schema2, model = null, errors = null, hideTitle = false, disabled = false } = props;
   const schemaProps = __spreadProps(__spreadValues({}, props), { model, errors, hideTitle, disabled });
@@ -4294,22 +4311,22 @@ var GenericSchemaForm = (props) => {
   );
   switch (type) {
     case "readOnly":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ReadOnlySchema_default, __spreadValues({}, schemaProps));
+      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_runtime33.jsx)(PersistAsyncSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PersistAsyncSchema_default, __spreadValues({}, filteredProps));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PersistAsyncSchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PersistAsyncSchema_default, __spreadValues({}, props));
       }
     case "validationAsync":
       if (isValidationAsyncSchema(schema2) && isNullableBasicModel(model) && isBasicError(errors)) {
         const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ValidationAsyncSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ValidationAsyncSchema_default, __spreadValues({}, filteredProps));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ValidationAsyncSchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ValidationAsyncSchema_default, __spreadValues({}, props));
       }
     case "basic": {
       if (isBasicSchema(schema2) && isNullableBasicModel(model) && isBasicError(errors)) {
@@ -4320,7 +4337,7 @@ var GenericSchemaForm = (props) => {
           model,
           errors
         });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BasicTypeSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BasicTypeSchema_default, __spreadValues({}, filteredProps));
       } else {
         const filteredProps = __spreadProps(__spreadValues({
           infoMessage: null
@@ -4330,56 +4347,56 @@ var GenericSchemaForm = (props) => {
           errors
         });
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BasicTypeSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BasicTypeSchema_default, __spreadValues({}, filteredProps));
       }
     }
     case "object":
       if (isObjectSchema(schema2) && isNullableObjectModel(model)) {
         const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ObjectSchema_default, __spreadValues({}, filteredProps), JSON.stringify(schema2));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ObjectSchema_default, __spreadValues({}, filteredProps), JSON.stringify(schema2));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ObjectSchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ObjectSchema_default, __spreadValues({}, props));
       }
     case "array":
       if (isArraySchema(schema2) && isNullableArrayModel(model) && isBasicError(errors)) {
         const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArraySchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArraySchema_default, __spreadValues({}, filteredProps));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArraySchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArraySchema_default, __spreadValues({}, props));
       }
     case "promotedOneOf":
       if (isOneOfObjectSchema(schema2) && isNullableObjectModel(model)) {
         const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PromotedOneOfSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfSchema_default, __spreadValues({}, filteredProps));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PromotedOneOfSchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfSchema_default, __spreadValues({}, props));
       }
     case "oneOf":
       if (isOneOfSchema(schema2)) {
         const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneOfSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneOfSchema_default, __spreadValues({}, filteredProps));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneOfSchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneOfSchema_default, __spreadValues({}, props));
       }
     case "allOf":
       if (isAllOfSchema(schema2) && isObjectModel(model)) {
         const filteredProps = __spreadProps(__spreadValues({}, schemaProps), { schema: schema2, model, errors });
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AllOfSchema_default, __spreadValues({}, filteredProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AllOfSchema_default, __spreadValues({}, filteredProps));
       } else {
         logInvalidSchemaWarning();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AllOfSchema_default, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AllOfSchema_default, __spreadValues({}, props));
       }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {});
 };
 var GenericSchema_default = GenericSchemaForm;
 
 // src/jsonSchemaForm/JsonSchemaForm.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var JsonSchemaForm = (props) => {
   const schemaProps = __spreadValues({
     model: null,
@@ -4388,26 +4405,26 @@ var JsonSchemaForm = (props) => {
     baseUrl: ""
   }, props);
   if (useHasHttpClientProvider() || schemaProps.baseUrl == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenericSchema_default, __spreadValues({}, schemaProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenericSchema_default, __spreadValues({}, schemaProps));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Providers,
     {
       baseUrl: schemaProps.baseUrl,
       onEvent: schemaProps.onEvent,
       onLog: schemaProps.onLog,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenericSchema_default, __spreadValues({}, schemaProps))
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenericSchema_default, __spreadValues({}, schemaProps))
     }
   );
 };
 var JsonSchemaForm_default = JsonSchemaForm;
 var Providers = ({ baseUrl, onEvent, onLog, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog: onLog != null ? onLog : noop2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog: onLog != null ? onLog : noop2, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     EventsContextProvider,
     {
       metadata: { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm" },
       onEvent: onEvent != null ? onEvent : noop2,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children })
     }
   ) });
 };
@@ -4415,11 +4432,11 @@ var noop2 = () => {
 };
 
 // src/layout/form/DynamicForm.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var DynamicForm = (props) => {
   const form = props.component;
   const formSchema = form.schema;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getMarginBottom(form.margin || "md"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getMarginBottom(form.margin || "md"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     JsonSchemaForm_default,
     {
       schema: formSchema,
@@ -4436,38 +4453,41 @@ var DynamicForm = (props) => {
 var DynamicForm_default = DynamicForm;
 
 // src/layout/heading/DynamicHeading.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
   const { text, size = "md", align = "left", margin = "md" } = props.component;
   const classes = getTextAlignmentAndMargin({ align, margin });
   switch (size) {
     case "xs":
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h5", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h5", { className: classes, children: text });
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h4", { className: classes, children: text });
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: classes, children: text });
     case "xl":
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h1", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h1", { className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
-// src/layout/info/DynamicInfo.tsx
+// src/layout/markdown/DynamicMarkdown.tsx
 var import_components14 = require("@transferwise/components");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+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_runtime37.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components14.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  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_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var DynamicImage = ({ component: image }) => {
   const { url, size, text, margin } = image;
   const httpClient = useHttpClient();
@@ -4484,7 +4504,7 @@ var DynamicImage = ({ component: image }) => {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `df-image ${size || "xl"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components15.Image, __spreadValues({ className: `img-responsive ${getMarginBottom(margin || "lg")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `df-image ${size || "xl"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components15.Image, __spreadValues({ className: `img-responsive ${getMarginBottom(margin || "lg")}` }, imageProps)) });
 };
 var readImageBlobAsDataURL = (imageBlob) => {
   return new Promise((resolve, reject) => {
@@ -4517,28 +4537,30 @@ var getImageSource = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/layout/DynamicLayout.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var getKey = (component) => JSON.stringify(component);
 var DynamicLayout = (props) => {
   const { components, model, submitted, errors, onModelChange, onAction, onPersistAsync, baseUrl } = props;
   const renderComponent = (component) => {
     switch (component.type) {
       case "heading":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicHeading_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicHeading_default, { component }, getKey(component));
       case "paragraph":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicParagraph_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicParagraph_default, { component }, getKey(component));
       case "image":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicImage_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicImage_default, { component }, getKey(component));
       case "alert":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicAlert_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicAlert_default, { component }, getKey(component));
       case "review":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicReview_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicReview_default, { component, onAction }, getKey(component));
       case "divider":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicDivider_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicDivider_default, { component }, getKey(component));
       case "info":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           DynamicColumns_default,
           {
             component,
@@ -4552,7 +4574,7 @@ var DynamicLayout = (props) => {
           getKey(component)
         );
       case "form":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           DynamicForm_default,
           {
             component,
@@ -4562,12 +4584,12 @@ var DynamicLayout = (props) => {
             onModelChange,
             onPersistAsync
           },
-          getKey(component)
+          getKey(__spreadProps(__spreadValues({}, component), { errors }))
         );
       case "button":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
       case "box":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           DynamicBox_default,
           {
             component,
@@ -4581,31 +4603,31 @@ var DynamicLayout = (props) => {
           getKey(component)
         );
       case "decision":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicDecision_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicDecision_default, { component, onAction }, getKey(component));
       case "external":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicExternal_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicExternal_default, { component, onAction }, getKey(component));
       case "list":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicList_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicList_default, { component, onAction }, getKey(component));
       case "loading-indicator":
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicLoadingIndicator_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicLoadingIndicator_default, { component }, getKey(component));
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", {}, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {}, getKey(component));
     }
   };
   if (useHasHttpClientProvider() || baseUrl == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: components.map(renderComponent) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
   }
 };
 var DynamicLayout_default = DynamicLayout;
 
 // src/layout/list/DynamicList.tsx
 var import_components16 = require("@transferwise/components");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var DynamicList = ({ component }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getMarginBottom(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("h4", { className: "m-b-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getMarginBottom(component.margin || "md"), children: [
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("h4", { className: "m-b-2", children: [
       " ",
       component.title,
       " "
@@ -4618,8 +4640,8 @@ function mapItemToSummary({ title, description, icon, status }) {
     key: `${title}/${description || ""}`,
     title,
     description
-  }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components16.Summary, __spreadValues({}, props));
+  }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components16.Summary, __spreadValues({}, props));
 }
 var statusMap = {
   positive: "done",
@@ -4630,10 +4652,10 @@ var DynamicList_default = DynamicList;
 
 // src/layout/loadingIndicator/DynamicLoadingIndicator.tsx
 var import_components17 = require("@transferwise/components");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin, size = "md" } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_components17.Loader,
     {
       size,
@@ -4676,9 +4698,9 @@ function noop3() {
 }
 
 // src/layout/paragraph/DynamicParagraph.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var DynamicParagraph = ({ component }) => component.control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BasicDynamicParagraph, { component });
-var BasicDynamicParagraph = ({ component }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { className: getTextAlignmentAndMargin(component), children: [
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var DynamicParagraph = ({ component }) => component.control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BasicDynamicParagraph, { component });
+var BasicDynamicParagraph = ({ component }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: getTextAlignmentAndMargin(component), children: [
   " ",
   component.text,
   " "
@@ -4692,8 +4714,8 @@ var CopyableDynamicParagraph = ({ component }) => {
     (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text).then(() => createSnackbar({ text: formatMessage(DynamicParagraph_messages_default.copied) })).catch(noop4);
   };
   const classNames7 = getTextAlignmentAndMargin({ align: component.align, margin: "sm" }) + " form-control";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "input",
       {
         type: "text",
@@ -4703,7 +4725,7 @@ var CopyableDynamicParagraph = ({ component }) => {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components19.Button, { block: true, onClick: copy, children: formatMessage(DynamicParagraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components19.Button, { block: true, onClick: copy, children: formatMessage(DynamicParagraph_messages_default.copy) })
   ] });
 };
 function noop4() {
@@ -4712,7 +4734,7 @@ var DynamicParagraph_default = DynamicParagraph;
 
 // src/layout/review/DynamicReview.tsx
 var import_components20 = require("@transferwise/components");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var mapFieldsToDefinitions = ({ label, value }, index) => {
   return { key: String(index), title: label, value };
 };
@@ -4723,7 +4745,7 @@ var DynamicReview = (props) => {
   const review = props.component;
   const margin = getMarginBottom(review.margin || "xs");
   const getReviewAction = (action2) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "a",
       {
         href: action2.url,
@@ -4737,12 +4759,12 @@ var DynamicReview = (props) => {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("h6", { className: "m-b-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("h6", { className: "m-b-2", children: [
       review.title,
       review.action && getReviewAction(review.action)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       import_components20.DefinitionList,
       {
         layout: getReviewLayout(review.orientation),
@@ -4754,7 +4776,7 @@ var DynamicReview = (props) => {
 var DynamicReview_default = DynamicReview;
 
 // src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var isNullish = (value) => isNull(value) || isUndefined(value);
 var getDefaultValue = (schema2) => {
   return schema2.type === "boolean" && isNullish(schema2.default) ? false : schema2.default;
@@ -4816,7 +4838,10 @@ var BasicTypeSchema = (props) => {
   (0, import_react21.useEffect)(onSchemaChange, [props.schema]);
   (0, import_react21.useEffect)(() => {
     var _a2;
-    return setModel((_a2 = props.model) != null ? _a2 : null);
+    const newModel = (_a2 = props.model) != null ? _a2 : null;
+    if (newModel !== model) {
+      setModel(newModel);
+    }
   }, [props.model]);
   const formGroupClasses = {
     "form-group": true,
@@ -4825,15 +4850,15 @@ var BasicTypeSchema = (props) => {
   };
   const showLabel = props.schema.format !== "file" && props.schema.type !== "boolean";
   const schemaHelp = props.schema.help;
-  return !isHidden ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DynamicAlert_default, { component: props.schema.alert }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
-      showLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "d-inline-block", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
-        !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Help_default, { help: schemaHelp })
+  return !isHidden ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicAlert_default, { component: props.schema.alert }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "d-inline-block", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
+        !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Help_default, { help: schemaHelp })
       ] }),
-      !showLabel && !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Help_default, { help: schemaHelp }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      !showLabel && !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Help_default, { help: schemaHelp }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         SchemaFormControl_default,
         {
           id,
@@ -4845,7 +4870,7 @@ var BasicTypeSchema = (props) => {
           onBlur
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         ControlFeedback_default,
         {
           changed,
@@ -4869,7 +4894,7 @@ BasicTypeSchema.defaultProps = {
 var BasicTypeSchema_default = BasicTypeSchema;
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var getIdFromResponse = (idProperty, response) => {
   return response[idProperty];
 };
@@ -4961,7 +4986,7 @@ var PersistAsyncBasicSchema = (props) => {
       setPersistAsyncModel(newPersistAsyncModel);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     BasicTypeSchema_default,
     {
       required: props.required,
@@ -5172,18 +5197,18 @@ function useStepPolling(polling, onAction) {
 }
 
 // src/step/layoutStep/LayoutStep.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var getComponents = (step31, options) => {
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var getComponents = (step35, options) => {
   var _a;
-  if (!step31 || isEmpty(step31) || !step31.layout && !step31.type) {
+  if (isEmpty(step35)) {
     return [];
   }
-  const layout6 = convertStepToLayout(step31, options);
+  const layout6 = convertStepToLayout(step35, options);
   return inlineReferences({
     layout: layout6,
-    schemas: step31.schemas || [],
-    actions: step31.actions || [],
-    model: (_a = step31.model) != null ? _a : null
+    schemas: step35.schemas || [],
+    actions: step35.actions || [],
+    model: (_a = step35.model) != null ? _a : null
   });
 };
 var LayoutStep = (props) => {
@@ -5195,7 +5220,7 @@ var LayoutStep = (props) => {
     onEvent("Dynamic Flow - onAction supressed", { reason: "LayoutStep - loading state" });
   };
   useStepPolling(stepSpecification.polling, onAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     DynamicLayout_default,
     {
       components,
@@ -5241,15 +5266,15 @@ var CameraCapture_messages_default = (0, import_react_intl17.defineMessages)({
 // src/step/cameraStep/cameraCapture/components/index.tsx
 var import_components21 = require("@transferwise/components");
 var import_react_intl18 = require("react-intl");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaptureButton, { onClick: onCapture }) });
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CaptureButton, { onClick: onCapture }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
   const intl = (0, import_react_intl18.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_components21.Button,
       {
         className: "m-b-1",
@@ -5260,7 +5285,7 @@ var ReviewBottomBar = ({
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_components21.Button,
       {
         className: "m-b-2",
@@ -5274,14 +5299,14 @@ var ReviewBottomBar = ({
     )
   ] }) }) });
 };
-var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   "button",
   {
     type: "button",
     className: "camera-capture-btn m-b-2",
     "data-testid": "camera-capture-button",
     onClick,
-    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "camera-capture-btn-inner" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "camera-capture-btn-inner" })
   }
 );
 
@@ -5361,7 +5386,7 @@ var useVideoConstraints = (direction) => {
 
 // src/step/cameraStep/cameraCapture/overlay/Overlay.tsx
 var import_react28 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
 var imageHeight = 40;
@@ -5390,18 +5415,18 @@ var Overlay = ({
     return () => window.removeEventListener("resize", listener);
   });
   let helperBoxHeight = (imageUrl ? imageHeight : 0) + (title ? titleHeight : 0) + (instructions ? instructionsHeight : 0);
-  let helperBox = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h4", { className: "camera-capture-title", children: title }),
-    instructions && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("small", { className: "camera-capture-instructions", children: instructions })
+  let helperBox = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h4", { className: "camera-capture-title", children: title }),
+    instructions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("small", { className: "camera-capture-instructions", children: instructions })
   ] });
   const frameBottomMargin = captureButtonHeight + helperBoxHeight;
   if (reviewInstructions) {
     helperBoxHeight = frameBottomMargin - reviewButtonsHeight;
-    helperBox = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("small", { className: "camera-capture-instructions", children: reviewInstructions });
+    helperBox = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("small", { className: "camera-capture-instructions", children: reviewInstructions });
     const frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
     if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
-      helperBox = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, {});
+      helperBox = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, {});
     }
   }
   const framePosition = {
@@ -5419,14 +5444,14 @@ var Overlay = ({
       width: "90%"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("mask", { id: "mask", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("image", __spreadValues({ href: overlay }, framePosition))
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("mask", { id: "mask", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("image", __spreadValues({ href: overlay }, framePosition))
     ] }) }),
-    overlay && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
-    outline && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("image", __spreadValues({ href: outline }, framePosition)),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
+    overlay && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
+    outline && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("image", __spreadValues({ href: outline }, framePosition)),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
   ] });
 };
 var Overlay_default = Overlay;
@@ -5456,13 +5481,13 @@ var NoCameraAccess_messages_default = (0, import_react_intl19.defineMessages)({
 });
 
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var NoCameraAccess = ({ onAction }) => {
   const intl = (0, import_react_intl20.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { id: "no-camera-access", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(NoCameraAccess_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(NoCameraAccess_messages_default.paragraph) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components22.Button, { block: true, onClick: onAction, children: intl.formatMessage(NoCameraAccess_messages_default.action) })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { id: "no-camera-access", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(NoCameraAccess_messages_default.title) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(NoCameraAccess_messages_default.paragraph) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components22.Button, { block: true, onClick: onAction, children: intl.formatMessage(NoCameraAccess_messages_default.action) })
   ] }) }) }) });
 };
 var NoCameraAccess_default = NoCameraAccess;
@@ -5486,12 +5511,12 @@ var CameraNotSupported_messages_default = (0, import_react_intl21.defineMessages
 });
 
 // src/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var CameraNotSupported = () => {
   const intl = (0, import_react_intl22.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { id: "camera-not-supported", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(CameraNotSupported_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(CameraNotSupported_messages_default.paragraph) })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { id: "camera-not-supported", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(CameraNotSupported_messages_default.title) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(CameraNotSupported_messages_default.paragraph) })
   ] }) }) }) });
 };
 var CameraNotSupported_default = CameraNotSupported;
@@ -5516,7 +5541,7 @@ var getCameraStartedProperties = async (props, videoStream) => {
 };
 
 // src/step/cameraStep/cameraCapture/CameraCapture.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var CameraCapture = ({
   direction = "back",
   overlay = "",
@@ -5585,8 +5610,8 @@ var CameraCapture = ({
     setReviewImage(void 0);
   };
   const handleRetryCameraAccess = () => setMode("CAPTURE");
-  const captureScreen = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    videoConstraints && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  const captureScreen = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    videoConstraints && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       import_react_webcam.default,
       {
         ref: webcamReference,
@@ -5597,7 +5622,7 @@ var CameraCapture = ({
         onUserMedia: handleUserMedia
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Overlay_default,
       {
         overlay,
@@ -5607,11 +5632,11 @@ var CameraCapture = ({
         instructions
       }
     ),
-    ready && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CaptureBottomBar, { onCapture: () => void handleCapture() })
+    ready && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CaptureBottomBar, { onCapture: () => void handleCapture() })
   ] });
-  const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Overlay_default,
       {
         overlay,
@@ -5621,19 +5646,19 @@ var CameraCapture = ({
         reviewInstructions: intl.formatMessage(CameraCapture_messages_default.reviewInstructions)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("section", { className: "camera-capture", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("section", { className: "camera-capture", children: [
     mode === "CAPTURE" && captureScreen,
     mode === "REVIEW" && reviewScreen,
-    mode === "NO_CAMERA_ACCESS" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NoCameraAccess_default, { onAction: handleRetryCameraAccess }),
-    mode === "CAMERA_NOT_SUPPORTED" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CameraNotSupported_default, {})
+    mode === "NO_CAMERA_ACCESS" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NoCameraAccess_default, { onAction: handleRetryCameraAccess }),
+    mode === "CAMERA_NOT_SUPPORTED" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CameraNotSupported_default, {})
   ] });
 };
 var CameraCapture_default = CameraCapture;
 
 // src/step/cameraStep/CameraStep.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function blobToBase64(blob) {
   return new Promise((resolve, _) => {
     const reader = new FileReader();
@@ -5642,11 +5667,11 @@ function blobToBase64(blob) {
   });
 }
 var CameraStep = (props) => {
-  const { step: step31, model, onModelChange, onAction } = props;
+  const { step: step35, model, onModelChange, onAction } = props;
   const onEvent = useEventDispatcher();
-  const objectSchema = getObjectSchema(step31);
-  const cameraSchema = getCameraSchema(step31);
-  const action2 = getFirstAction(step31);
+  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 || {};
@@ -5671,7 +5696,7 @@ var CameraStep = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     CameraCapture_default,
     {
       overlay,
@@ -5688,8 +5713,8 @@ var CameraStep = (props) => {
   );
 };
 var CameraStep_default = CameraStep;
-function getObjectSchema(step31) {
-  const nonHiddenSchemas = filterHiddenSchemas(step31.schemas || []);
+function getObjectSchema(step35) {
+  const nonHiddenSchemas = filterHiddenSchemas(step35.schemas || []);
   const objectSchema = nonHiddenSchemas[0];
   if (!objectSchema || !isObjectSchema(objectSchema)) {
     throw new Error(
@@ -5698,8 +5723,8 @@ function getObjectSchema(step31) {
   }
   return objectSchema;
 }
-function getCameraSchema(step31) {
-  const objectSchema = getObjectSchema(step31);
+function getCameraSchema(step35) {
+  const objectSchema = getObjectSchema(step35);
   const firstProperty = Object.values(objectSchema.properties)[0];
   if (!firstProperty) {
     throw new Error(
@@ -5708,15 +5733,15 @@ function getCameraSchema(step31) {
   }
   return firstProperty;
 }
-function getFirstAction(step31) {
+function getFirstAction(step35) {
   var _a, _b;
-  if (!step31.schemas || ((_a = filterHiddenSchemas(step31.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 = step31 == null ? void 0 : step31.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 step31.actions[0];
+  return step35.actions[0];
 }
 
 // src/step/externalConfirmationStep/ExternalConfirmationStep.tsx
@@ -5748,12 +5773,12 @@ var ExternalConfirmationStep_messages_default = (0, import_react_intl24.defineMe
 });
 
 // src/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var noop5 = () => {
 };
 var ExternalConfirmationStep = ({ url, onClose }) => {
   const { formatMessage } = (0, import_react_intl25.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     DynamicLayout_default,
     {
       components: [
@@ -5818,24 +5843,24 @@ function getOrigin(url) {
 }
 
 // src/dynamicFlow/DynamicFlowStep.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var DynamicFlowStep = (props) => {
   var _a;
-  const { step: step31, globalError } = props;
-  const externalUrl = (_a = step31 == null ? void 0 : step31.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 (step31 === void 0) {
+  if (step35 === void 0) {
     return null;
   }
   if (externalUrl && requiresManualTrigger) {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
   }
-  if (getStepType(step31) === "camera") {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step: step31 }));
+  if (isCameraStep(step35)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step: step35 }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    globalError ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step31 }))
+  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: step35 }))
   ] });
 };
 
@@ -5849,16 +5874,15 @@ function useDebouncedRefresh(fetchRefresh) {
       return map.current.get(key);
     }
     const debouncedFetchRefresh = debounce(
-      (action2, data, etag) => fetchRefresh(action2, data, etag),
+      (url, data, etag) => fetchRefresh(url, data, etag),
       DEBOUNCE_DELAY
     );
     map.current.set(key, debouncedFetchRefresh);
     return debouncedFetchRefresh;
   };
-  return function(action2, data, etag, schema2) {
-    const key = action2.url || "";
-    const debouncedFetchRefresh = retrieveOrCreate(key);
-    void debouncedFetchRefresh(action2, data, etag);
+  return function(url, data, etag, schema2) {
+    const debouncedFetchRefresh = retrieveOrCreate(url);
+    void debouncedFetchRefresh(url, data, etag);
     if (!schema2 || !shouldDebounceSchema(schema2)) {
       void debouncedFetchRefresh.flush();
     }
@@ -5883,16 +5907,16 @@ var useDynamicFlowState = (initialStep) => {
     models: (initialStep == null ? void 0 : initialStep.model) ? buildInitialModels(initialStep.model, getAllSchemas(initialStep)) : {},
     etag: void 0
   });
-  const { step: step31, models, etag } = stepAndModels;
-  const setStepAndEtag = (step32, etag2) => {
+  const { step: step35, models, etag } = stepAndModels;
+  const setStepAndEtag = (step36, etag2) => {
     var _a2, _b2, _c, _d;
     setStepAndModels((previous) => ({
-      step: step32,
-      models: step32.model ? buildInitialModels(step32.model, getAllSchemas(step32)) : previous.models,
+      step: step36,
+      models: step36.model ? buildInitialModels(step36.model, getAllSchemas(step36)) : previous.models,
       etag: etag2
     }));
-    setFormErrors((_b2 = (_a2 = step32 == null ? void 0 : step32.errors) == null ? void 0 : _a2.validation) != null ? _b2 : null);
-    setGlobalError((_d = (_c = step32 == null ? void 0 : step32.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) => {
@@ -5908,11 +5932,11 @@ var useDynamicFlowState = (initialStep) => {
       return updatedState;
     });
   };
-  const modelIsValid = (0, import_react32.useMemo)(() => areModelsValid(models, getAllSchemas(step31)), [models, step31]);
+  const modelIsValid = (0, import_react32.useMemo)(() => areModelsValid(models, getAllSchemas(step35)), [models, step35]);
   return {
     formErrors,
     globalError,
-    step: step31,
+    step: step35,
     models,
     etag,
     modelIsValid,
@@ -5932,9 +5956,9 @@ var buildInitialModels = (model, schemas = []) => {
     });
   }, {});
 };
-var getAllSchemas = (step31) => [
-  ...getAllSchemasInLayout((step31 == null ? void 0 : step31.layout) || []),
-  ...(step31 == null ? void 0 : step31.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) {
@@ -5960,7 +5984,7 @@ var areModelsValid = (formModels, schemas = []) => {
 // src/dynamicFlow/utils/useLoader.tsx
 var import_components24 = require("@transferwise/components");
 var import_react33 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
     size: import_components24.Size.EXTRA_LARGE,
@@ -5969,7 +5993,7 @@ function useLoader(loaderConfig, initialState) {
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react33.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
-  const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     import_components24.Loader,
     {
       size: config.size,
@@ -5977,7 +6001,7 @@ function useLoader(loaderConfig, initialState) {
       "data-testid": "loader"
     }
   ) : null;
-  return { loadingState, setLoadingState, loader };
+  return { isLoading: loadingState !== "idle", setLoadingState, loader };
 }
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
@@ -6003,10 +6027,10 @@ var ErrorBoundary_messages_default = (0, import_react_intl26.defineMessages)({
 });
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ErrorBoundaryAlert = ({ onDismiss }) => {
   const { formatMessage } = (0, import_react_intl27.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     import_components25.Alert,
     {
       action: {
@@ -6022,7 +6046,7 @@ var ErrorBoundaryAlert = ({ onDismiss }) => {
 };
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var noop6 = () => {
 };
 var ErrorBoundary = class extends import_react34.Component {
@@ -6043,8 +6067,8 @@ var ErrorBoundary = class extends import_react34.Component {
   render() {
     const { children } = this.props;
     const { hasError, isFatalError } = this.state;
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-      hasError && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }),
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }),
       !isFatalError && children
     ] });
   }
@@ -6052,46 +6076,78 @@ var ErrorBoundary = class extends import_react34.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/dynamicFlow/utils/responseParsers/response-parsers.ts
-var parseFetchResponse = async (response) => {
-  var _a;
-  assertResponseIsValid(response);
-  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Exit")) {
-    return { type: "exit", result: await parseExitResponse(response) };
+var parseFetchResponseByResponseType = async (response) => {
+  const type = response.headers.get("X-Df-ResponseType");
+  switch (type) {
+    case "step":
+      return parseStepResponse(response);
+    case "exit":
+      return parseExitResponse(response);
+    case "action":
+      return parseActionResponse(response);
+    default:
+      throw new Error(
+        "Unsupported X-Df-ResponseType. Allowed values are 'step', 'action', 'exit'."
+      );
   }
+};
+var parseStepResponse = async (response) => {
   const jsonBody = await parseResponseJson(response);
   if (!isObject(jsonBody)) {
     throw new Error("Incorrect response body in response. Expected an object.");
   }
-  if (jsonBody.action) {
-    if (!isObject(jsonBody.action)) {
-      throw new Error(
-        "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
-      );
-    }
-    const action2 = jsonBody.action;
-    if (action2.exit === true && isObject(action2.result)) {
-      return { type: "exit", result: action2.result };
-    }
-    return { type: "action", action: jsonBody.action };
-  }
   const etag = response.headers.get("etag") || void 0;
   return { type: "step", step: jsonBody, etag };
 };
+var parseActionResponse = async (response) => {
+  const jsonBody = await parseResponseJson(response);
+  if (!isObject(jsonBody)) {
+    throw new Error("Incorrect response body in response. Expected an object.");
+  }
+  if (!isObject(jsonBody.action)) {
+    throw new Error(
+      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
+    );
+  }
+  const action2 = jsonBody.action;
+  if (action2.exit === true && isObject(action2.result)) {
+    return { type: "exit", result: action2.result };
+  }
+  return { type: "action", action: jsonBody.action };
+};
+var parseExitResponse = async (response) => {
+  return { type: "exit", result: await getJsonObjectOrNull(response) };
+};
+var parseFetchResponse = async (response) => {
+  var _a, _b;
+  assertResponseIsValid(response);
+  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-ResponseType")) {
+    return parseFetchResponseByResponseType(response);
+  }
+  if ((_b = response.headers) == null ? void 0 : _b.has("X-Df-Exit")) {
+    return parseExitResponse(response);
+  }
+  const jsonBody = await parseResponseJson(response.clone());
+  if (isObject(jsonBody) && jsonBody.action) {
+    return parseActionResponse(response);
+  }
+  return parseStepResponse(response);
+};
 var parseErrorResponse = async (response) => {
   assertResponseIsValid(response);
   const jsonBody = await parseResponseJson(response);
   if (!isObject(jsonBody)) {
     throw new Error("Incorrect response body in error response. Expected an object.");
   }
+  if (!jsonBody.refreshFormUrl && !jsonBody.validation && !jsonBody.error) {
+    throw jsonBody;
+  }
   return jsonBody;
 };
-var parseExitResponse = async (response) => {
+var getJsonObjectOrNull = async (response) => {
   assertResponseIsValid(response);
   const result = await parseResponseJson(response);
-  if (isObject(result) || result === null) {
-    return result;
-  }
-  return null;
+  return isObject(result) ? result : null;
 };
 var parseResponseJson = async (response) => {
   try {
@@ -6113,7 +6169,7 @@ var assertResponseIsValid = (response) => {
 var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var noop7 = () => {
 };
 var DynamicFlowComponent = ({
@@ -6132,7 +6188,7 @@ var DynamicFlowComponent = ({
   const {
     formErrors,
     globalError,
-    step: step31,
+    step: step35,
     models,
     etag,
     modelIsValid,
@@ -6142,25 +6198,23 @@ var DynamicFlowComponent = ({
     setSchemaModel
   } = useDynamicFlowState(initialStep);
   const [submitted, setSubmitted] = (0, import_react35.useState)(false);
-  const { loadingState, setLoadingState, loader } = useLoader(
+  const { isLoading, loader, setLoadingState } = useLoader(
     loaderConfig,
     initialStep ? "idle" : "initial"
   );
-  const logWarning = getLogger("warning", onLog, flowId, step31 == null ? void 0 : step31.key);
-  const logError = getLogger("error", onLog, flowId, step31 == null ? void 0 : step31.key);
-  const logCritical = getLogger("critical", onLog, flowId, step31 == null ? void 0 : step31.key);
+  const logCritical = getLogger("critical", onLog, flowId, (step35 == null ? void 0 : step35.id) || (step35 == null ? void 0 : step35.key));
   const analyticsMetadata = (0, import_react35.useMemo)(
     () => {
       var _a;
-      return __spreadValues({ flowId, stepId: step31 == null ? void 0 : step31.key }, (_a = step31 == null ? void 0 : step31.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, step31]
+    [flowId, step35]
   );
   const dispatchEvent = (0, import_react35.useMemo)(
     () => getEventDispatcher(onEvent, analyticsMetadata),
     [onEvent, analyticsMetadata]
   );
-  const triggerActionRequest = (0, import_react35.useCallback)(
+  const dfHttpClient = (0, import_react35.useCallback)(
     ({ action: action2, data, etag: etag2 }) => {
       const { url, method = "POST" } = action2;
       return httpClient(url != null ? url : "", {
@@ -6176,37 +6230,40 @@ var DynamicFlowComponent = ({
     },
     [httpClient, locale]
   );
-  const fetchNextStep = async (action2, data = {}) => {
-    setLoadingState(loadingState === "initial" ? "initial" : "submission");
+  const performAction = async (action2, data = {}) => {
+    setLoadingState(!step35 ? "initial" : "submission");
+    dispatchEvent("Dynamic Flow - Step Submitted", { actionId: action2.$id });
     try {
-      dispatchEvent("Dynamic Flow - Step Submitted", { actionId: action2.$id });
-      const response = await triggerActionRequest({ action: action2, data });
-      return handleFetchResponse(response, "submission");
+      const response = await dfHttpClient({ action: action2, data });
+      await handleResponse(response, "submission");
     } catch (error) {
-      handleFetchError(error, "Error fetching next step");
+      completeWithError(error, "Error fetching next step");
     }
   };
-  const fetchRefreshStep = async (action2, data, etag2) => {
+  const performRefresh = async (url, data, etag2) => {
     setLoadingState("refresh");
+    dispatchEvent("Dynamic Flow - Step Refreshed", { status: "pending" });
     try {
-      dispatchEvent("Dynamic Flow - Step Refreshed", { status: "pending" });
-      const response = await triggerActionRequest({ action: action2, data, etag: etag2 });
-      await handleFetchResponse(response, "refresh");
-      setLoadingState("idle");
+      const response = await dfHttpClient({ action: { url, method: "POST" }, data, etag: etag2 });
+      await handleResponse(response, "refresh");
     } catch (error) {
-      handleFetchError(error, "Error fetching refresh step");
+      completeWithError(error, "Error fetching refresh step");
     }
   };
-  const fetchExitResult = async (action2, data) => {
+  const performExitAction = async (action2, data) => {
+    setLoadingState("submission");
     try {
-      const response = await triggerActionRequest({ action: action2, data });
-      const exitResult = await parseExitResponse(response);
-      dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), action2.result));
+      const response = await dfHttpClient({ action: action2, data });
+      await handleExitResponse(response, action2.result);
     } catch (error) {
-      handleFetchError(error, "Error fetching exit result");
+      completeWithError(error, "Error fetching exit result");
     }
   };
-  const debouncedFetchRefresh = useDebouncedRefresh(fetchRefreshStep);
+  const handleExitResponse = async (response, actionResult) => {
+    const exitResult = await getJsonObjectOrNull(response);
+    dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), actionResult));
+  };
+  const debouncedRefresh = useDebouncedRefresh(performRefresh);
   const dispatchEventAndComplete = (0, import_react35.useCallback)(
     (result) => {
       dispatchEvent("Dynamic Flow - Flow Finished", { result: "success" });
@@ -6223,79 +6280,63 @@ var DynamicFlowComponent = ({
         $id: "#initial-step-request",
         method: "GET"
       }, initialAction);
-      void fetchNextStep(action2, action2.data);
+      void performAction(action2, action2.data);
     }
   }, [httpClient, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
-  const handleFetchResponse = async (response, fetchType) => {
-    if (response.ok) {
-      try {
-        const parsedResponse = await parseFetchResponse(response);
-        switch (parsedResponse.type) {
-          case "action":
-            void fetchNextStep(parsedResponse.action, parsedResponse.action.data);
-            return;
-          case "exit":
-            return dispatchEventAndComplete(parsedResponse.result);
-          case "step":
-          default: {
-            const { step: step32, etag: etag2 } = parsedResponse;
-            return fetchType === "submission" ? updateStepAfterSubmission(step32, etag2) : updateStepAfterRefresh(step32, 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 = (step32, etag2) => {
-    setStepAndEtag(step32, 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) => {
@@ -6316,62 +6357,37 @@ var DynamicFlowComponent = ({
   const refreshOnChangeIfNeeded = (props, updatedModels) => {
     const { triggerSchema } = props;
     if (shouldTriggerRefresh(props)) {
-      const url = triggerSchema.refreshFormUrl || (step31 == null ? void 0 : step31.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_runtime58.jsx)(LogProvider, { flowId, stepId: step31 == null ? void 0 : step31.key, onLog, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DynamicFlowProvider, { loading: loadingState !== "idle", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(HttpClientProvider, { httpClient, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime58.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: step31,
+      step: step35,
       model: combineModels2(models),
       submitted,
       globalError,
@@ -6384,7 +6400,7 @@ var DynamicFlowComponent = ({
     }
   ) }) }) }) });
 };
-var DynamicFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DynamicFlowComponent, __spreadValues({}, props)) });
+var DynamicFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DynamicFlowComponent, __spreadValues({}, props)) });
 var DynamicFlow_default = DynamicFlow;
 var combineModels2 = (formModels) => {
   return Object.values(formModels).reduce((previous, model) => __spreadValues(__spreadValues({}, previous), model), {});
@@ -6409,6 +6425,8 @@ __export(components_exports, {
   columns: () => columns_default,
   copyable: () => copyable_default,
   decision: () => decision_default,
+  decisionFlags: () => decision_flags_default,
+  decisionIcons: () => decision_icons_default,
   heading: () => heading_default,
   image: () => image_default,
   info: () => info_default,
@@ -6420,11 +6438,9 @@ __export(components_exports, {
 
 // src/fixtures/components/alert.ts
 var step = {
-  type: "form",
-  key: "Components/Alert",
+  id: "Components/Alert",
   title: "Alert Component",
   description: "Alerts can have different contexts.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6453,11 +6469,9 @@ var alert_default = step;
 
 // src/fixtures/components/box.ts
 var step2 = {
-  type: "form",
-  key: "Components/Box",
+  id: "Components/Box",
   title: "Box Component",
   description: "Box is a container for other layour components. It can have a border!",
-  actions: [],
   schemas: [],
   layout: ["xs", "sm", "md", "lg", "xl"].map((size) => ({
     type: "box",
@@ -6487,11 +6501,9 @@ var buttons = ["primary", "secondary", "negative", "link"].map(
   })
 );
 var step3 = {
-  type: "form",
-  key: "Components/Button",
+  id: "Components/Button",
   title: "Button Component",
   description: "Buttons typically trigger actions.",
-  actions: [],
   schemas: [
     {
       $id: "#schema",
@@ -6533,11 +6545,9 @@ var button_default = step3;
 
 // src/fixtures/components/columns.ts
 var step4 = {
-  type: "form",
-  key: "Components/Columns",
+  id: "Components/Columns",
   title: "Columns Component",
   description: `Arrange components in two columns (when there's enough space)`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6571,11 +6581,9 @@ var columns_default = step4;
 
 // src/fixtures/components/copyable.ts
 var step5 = {
-  key: "Components/Copyable",
-  type: "form",
+  id: "Components/Copyable",
   title: "Copyable Text",
   description: "Copyable Text Component.",
-  actions: [],
   layout: [
     {
       type: "paragraph",
@@ -6595,11 +6603,9 @@ var copyable_default = step5;
 
 // src/fixtures/components/decision.ts
 var step6 = {
-  type: "form",
-  key: "Components/Decision",
+  id: "Components/Decision",
   title: "Decision Component",
   description: "A step with a decision Component.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6642,6 +6648,17 @@ var step6 = {
             title: "",
             url: "external"
           }
+        },
+        {
+          title: "Currency flags are now supported as well",
+          disabled: false,
+          icon: {
+            name: "flag-eur"
+          },
+          action: {
+            title: "",
+            url: "external"
+          }
         }
       ]
     }
@@ -6649,13 +6666,68 @@ var step6 = {
 };
 var decision_default = step6;
 
-// src/fixtures/components/heading.ts
+// src/fixtures/components/decision-flags.ts
 var step7 = {
-  type: "form",
-  key: "Components/Heading",
+  id: "Components/Decision Flags",
+  title: "Decision Component",
+  description: "A step with a decision Component.",
+  schemas: [],
+  layout: [
+    {
+      type: "heading",
+      size: "sm",
+      text: "Please continue using one of the following options:"
+    },
+    {
+      type: "decision",
+      options: availableCurrencyFlags.map((currencyCode) => {
+        return {
+          title: `${currencyCode.toUpperCase()}`,
+          icon: {
+            name: `flag-${currencyCode}`
+          },
+          action: { url: "/" }
+        };
+      })
+    }
+  ]
+};
+var decision_flags_default = step7;
+
+// src/fixtures/components/decision-icons.ts
+var icons2 = __toESM(require("@transferwise/icons"));
+var step8 = {
+  id: "Components/Decision Icons",
+  title: "Decision Component",
+  description: "A step with a decision Component.",
+  schemas: [],
+  layout: [
+    {
+      type: "heading",
+      size: "sm",
+      text: "Please continue using one of the following options:"
+    },
+    {
+      type: "decision",
+      options: Object.keys(icons2).map((iconName) => {
+        return {
+          title: `${iconName} Icon`,
+          icon: {
+            name: iconName
+          },
+          action: { url: "/" }
+        };
+      })
+    }
+  ]
+};
+var decision_icons_default = step8;
+
+// src/fixtures/components/heading.ts
+var step9 = {
+  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",
@@ -6663,16 +6735,14 @@ var step7 = {
     size
   }))
 };
-var heading_default = step7;
+var heading_default = step9;
 
 // src/fixtures/components/image.ts
 var sizes = ["xs", "sm", "md", "lg", "xl"];
-var step8 = {
-  type: "form",
-  key: "Components/Image",
+var step10 = {
+  id: "Components/Image",
   title: "Image Component",
   description: 'Images can have different sizes: "xs", "sm", "md", "lg", "xl".',
-  actions: [],
   schemas: [],
   layout: sizes.flatMap((size) => [
     {
@@ -6682,21 +6752,19 @@ var step8 = {
     },
     {
       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
     }
   ])
 };
-var image_default = step8;
+var image_default = step10;
 
 // src/fixtures/components/info.ts
-var step9 = {
-  type: "form",
-  key: "Components/Info",
+var step11 = {
+  id: "Components/Info",
   title: "Info Component",
   description: "A block of markdown content.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6723,15 +6791,13 @@ But the best part? Bananas are biodegradable and environmentally-friendly, makin
     { type: "alert", markdown: "Links always open in a new tab.", context: "neutral" }
   ]
 };
-var info_default = step9;
+var info_default = step11;
 
 // src/fixtures/components/list.ts
-var step10 = {
-  type: "form",
-  key: "Components/List",
+var step12 = {
+  id: "Components/List",
   title: "List Component",
   description: "A list of items with optional states, subtitles, and images.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6759,15 +6825,13 @@ var step10 = {
     }
   ]
 };
-var list_default = step10;
+var list_default = step12;
 
 // src/fixtures/components/loading-indicator.ts
-var step11 = {
-  type: "form",
-  key: "Components/Loading Indicator",
+var step13 = {
+  id: "Components/Loading Indicator",
   title: "Loading Indicator Component",
   description: "A loading indicator to be displayed within a layout.",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6777,15 +6841,13 @@ var step11 = {
     }
   ]
 };
-var loading_indicator_default = step11;
+var loading_indicator_default = step13;
 
 // src/fixtures/components/paragraph.ts
-var step12 = {
-  type: "form",
-  key: "Components/Paragraph",
+var step14 = {
+  id: "Components/Paragraph",
   title: "Paragraph Component",
   description: `A block of plain text.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6807,15 +6869,13 @@ var step12 = {
     }
   ]
 };
-var paragraph_default = step12;
+var paragraph_default = step14;
 
 // src/fixtures/components/review.ts
-var step13 = {
-  type: "form",
-  key: "Components/Review",
+var step15 = {
+  id: "Components/Review",
   title: "Review Component",
   description: `Show a list of read-only fields.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -6869,7 +6929,7 @@ var step13 = {
     }
   ]
 };
-var review_default = step13;
+var review_default = step15;
 
 // src/fixtures/examples/index.ts
 var examples_exports = {};
@@ -6882,10 +6942,9 @@ __export(examples_exports, {
 });
 
 // src/fixtures/examples/camera-capture.ts
-var step14 = {
-  key: "Examples/Camera Capture",
+var step16 = {
+  id: "Examples/Camera Capture",
   title: "Camera Capture Example",
-  type: "form",
   schemas: [
     {
       properties: {
@@ -7002,15 +7061,13 @@ var step14 = {
   },
   refreshFormUrl: "/"
 };
-var camera_capture_default = step14;
+var camera_capture_default = step16;
 
 // src/fixtures/examples/recipient.ts
-var step15 = {
-  key: "Examples/Recipient Creation",
-  type: "form",
+var step17 = {
+  id: "Examples/Recipient Creation",
   title: "Recipient Creation Example",
   description: "A form step with the typical recipient creation form.",
-  actions: [],
   schemas: [
     {
       $id: "#new-recipient",
@@ -7317,22 +7374,12 @@ var step15 = {
     details: {}
   }
 };
-var recipient_default = step15;
+var recipient_default = step17;
 
 // src/fixtures/examples/recipient-update.ts
-var step16 = {
-  key: "Examples/Recipient Update",
-  type: "form",
+var step18 = {
+  id: "Examples/Recipient Update",
   title: "Edit recipient",
-  actions: [
-    {
-      title: "Update",
-      url: "/responses/recipientUpdate/?delay=5000",
-      type: "primary",
-      method: "PATCH",
-      $id: "submit"
-    }
-  ],
   schemas: [
     {
       $id: "form",
@@ -7564,19 +7611,21 @@ var step16 = {
     {
       type: "button",
       action: {
-        $ref: "submit"
+        $id: "submit",
+        title: "Update",
+        url: "/responses/recipientUpdate/?delay=5000",
+        type: "primary",
+        method: "PATCH"
       }
     }
   ]
 };
-var recipient_update_default = step16;
+var recipient_update_default = step18;
 
 // src/fixtures/examples/single-file-upload.ts
-var step17 = {
-  key: "Examples/Single File Upload",
-  type: "form",
+var step19 = {
+  id: "Examples/Single File Upload",
   title: "Single File Upload Example",
-  actions: [],
   schemas: [
     {
       $id: "#schema-1",
@@ -7669,13 +7718,12 @@ var step17 = {
     frontSide: 0
   }
 };
-var single_file_upload_default = step17;
+var single_file_upload_default = step19;
 
 // src/fixtures/examples/step-validation-errors.ts
-var step18 = {
-  key: "Examples/Step Validation Errors",
+var step20 = {
+  id: "Examples/Step Validation Errors",
   title: "Step with validation errors",
-  type: "form",
   errors: {
     validation: {
       "bridekeeper-questions": {
@@ -7683,7 +7731,6 @@ var step18 = {
       }
     }
   },
-  actions: [],
   layout: [
     {
       type: "form",
@@ -7746,7 +7793,7 @@ var step18 = {
     }
   ]
 };
-var step_validation_errors_default = step18;
+var step_validation_errors_default = step20;
 
 // src/fixtures/features/index.ts
 var features_exports = {};
@@ -7759,12 +7806,11 @@ __export(features_exports, {
 });
 
 // src/fixtures/features/action-response.ts
-var step19 = {
-  key: "Features/Action Response",
+var step21 = {
+  id: "Features/Action Response",
   title: "Action Response",
   description: "",
   type: "form",
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -7787,12 +7833,12 @@ var step19 = {
     }
   ]
 };
-var action_response_default = step19;
+var action_response_default = step21;
 
 // src/fixtures/features/external.ts
-var step20 = {
+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/" },
@@ -7817,15 +7863,13 @@ var step20 = {
       markdown: `If it didn't work, you can [reopen](http://google.com/) the tab`
     }
   ],
-  actions: [],
   schemas: []
 };
-var external_default = step20;
+var external_default = step22;
 
 // src/fixtures/features/persist-async.ts
-var step21 = {
-  type: "form",
-  key: "Features/Persist Async",
+var step23 = {
+  id: "Features/Persist Async",
   title: "Persist Async Feature",
   schemas: [
     {
@@ -7851,14 +7895,6 @@ var step21 = {
       }
     }
   ],
-  actions: [
-    {
-      title: "Submit Persist Async",
-      url: "/persist-async-submit",
-      method: "POST",
-      type: "primary"
-    }
-  ],
   layout: [
     {
       type: "form",
@@ -7866,12 +7902,11 @@ var step21 = {
     }
   ]
 };
-var persist_async_default = step21;
+var persist_async_default = step23;
 
 // src/fixtures/features/polling.ts
-var step22 = {
-  type: "form",
-  key: "Features/Polling",
+var step24 = {
+  id: "Features/Polling",
   title: "Polling Feature",
   description: "Polling feature in a form step.",
   polling: {
@@ -7898,15 +7933,14 @@ var step22 = {
       }
     }
   ],
-  actions: [],
   schemas: []
 };
-var polling_default = step22;
+var polling_default = step24;
 
 // src/fixtures/features/validation-async.ts
-var step23 = {
+var step25 = {
   type: "form",
-  key: "Features/Validation Async",
+  id: "Features/Validation Async",
   title: "Validation Async Feature",
   schemas: [
     {
@@ -7936,12 +7970,11 @@ var step23 = {
       }
     }
   ],
-  actions: [],
   model: {
     // name: 'Colin Robinson',
   }
 };
-var validation_async_default = step23;
+var validation_async_default = step25;
 
 // src/fixtures/layouts/index.ts
 var layouts_exports = {};
@@ -8209,30 +8242,10 @@ var layout3 = [
 var list_default2 = layout3;
 
 // src/fixtures/layouts/pay-in.ts
-var step24 = {
-  key: "PAY_ID",
+var step26 = {
+  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",
@@ -8294,18 +8307,30 @@ var step24 = {
     {
       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"
+        }
       }
     }
   ]
 };
-var pay_in_default = step24;
+var pay_in_default = step26;
 
 // src/fixtures/layouts/review.ts
 var layout4 = [
@@ -8551,12 +8576,10 @@ var action = { action: { url: "/responses/success", method: "POST" } };
 var action_default = action;
 
 // src/fixtures/responses/action-response-final.ts
-var step25 = {
-  type: "form",
-  key: "action-response-final",
+var step27 = {
+  id: "action-response-final",
   title: "Action Response Final Step",
   description: `This step was loaded as a result of an Action Response.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -8574,19 +8597,17 @@ var step25 = {
     }
   ]
 };
-var action_response_final_default = step25;
+var action_response_final_default = step27;
 
 // src/fixtures/responses/exit.ts
 var exit = { id: "123456", name: "Bob Loblaw", country: "US" };
 var exit_default = exit;
 
 // src/fixtures/responses/recipient-update-final.ts
-var step26 = {
-  type: "form",
-  key: "recipient-update-final",
+var step28 = {
+  id: "recipient-update-final",
   title: "Recipient Update Final Step",
   description: `The recipient has been updated.`,
-  actions: [],
   schemas: [],
   layout: [
     {
@@ -8604,11 +8625,13 @@ var step26 = {
     }
   ]
 };
-var recipient_update_final_default = step26;
+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,
@@ -8616,12 +8639,10 @@ __export(schemas_exports, {
 });
 
 // src/fixtures/schemas/basic-form.ts
-var step27 = {
-  key: "Schemas/Basic Form",
+var step29 = {
+  id: "Schemas/Basic Form",
   title: "Simple Form",
   description: "A simple form with text fields and a checkbox.",
-  type: "form",
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -8654,15 +8675,13 @@ var step27 = {
     }
   ]
 };
-var basic_form_default = step27;
+var basic_form_default = step29;
 
 // src/fixtures/schemas/number-and-integer.ts
-var step28 = {
-  key: "Schemas/Number And Integer",
+var step30 = {
+  id: "Schemas/Number And Integer",
   title: "Number and Integer Schemas",
   description: "Number and Integer Schemas.",
-  type: "form",
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -8697,7 +8716,7 @@ var step28 = {
     }
   ]
 };
-var number_and_integer_default = step28;
+var number_and_integer_default = step30;
 
 // src/fixtures/schemas/one-of.ts
 var currencies = [
@@ -8762,13 +8781,11 @@ var currencies = [
   ["ZAR", "South African rand"],
   ["ZMW", "Zambian kwacha"]
 ];
-var step29 = {
-  key: "Schemas/OneOf",
+var step31 = {
+  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",
@@ -8779,6 +8796,7 @@ var step29 = {
         "account-type-radio": {
           title: 'Personal or Business Account? (oneOf schema with two options default to control: "radio")',
           analyticsId: "account-type-radio",
+          control: "radio",
           oneOf: [
             {
               title: "Personal",
@@ -8919,15 +8937,13 @@ var step29 = {
     }
   ]
 };
-var one_of_default = step29;
+var one_of_default = step31;
 
 // src/fixtures/schemas/string-formats.ts
-var step30 = {
-  key: "Schemas/String Formats",
+var step32 = {
+  id: "Schemas/String Formats",
   title: "String Schema Formats",
   description: "String schemas with different formats (password, date, telephone).",
-  type: "form",
-  actions: [],
   schemas: [
     {
       $id: "#the-schema",
@@ -8983,21 +8999,142 @@ var step30 = {
     "date-lookup": "2023-01-01"
   }
 };
-var string_formats_default = step30;
+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
       }
@@ -9351,10 +9488,10 @@ var pl_default = {
   "dynamicFlows.CameraCapture.reviewRetry": "Nie, spr\xF3buj ponownie",
   "dynamicFlows.CameraCapture.reviewSubmit": "Tak, prze\u015Blij",
   "dynamicFlows.ControlFeedback.maxLength": "Prosimy wprowadzi\u0107 do {maxLength} znak\xF3w.",
-  "dynamicFlows.ControlFeedback.maximum": "Wprowad\u017A liczb\u0119 {maximum} lub mniejsz\u0105.",
+  "dynamicFlows.ControlFeedback.maximum": "Wprowad\u017A liczb\u0119 r\xF3wn\u0105 lub mniejsz\u0105 ni\u017C {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "Wprowad\u017A dat\u0119 nie p\xF3\u017Aniejsz\u0105 ni\u017C {maximum}.",
   "dynamicFlows.ControlFeedback.minLength": "Prosz\u0119 wpisa\u0107 co najmniej {minLength} znak\xF3w.",
-  "dynamicFlows.ControlFeedback.minimum": "Wprowad\u017A liczb\u0119 {minimum} lub wi\u0119ksz\u0105.",
+  "dynamicFlows.ControlFeedback.minimum": "Wprowad\u017A liczb\u0119 r\xF3wn\u0105 lub wi\u0119ksz\u0105 ni\u017C {minimum}.",
   "dynamicFlows.ControlFeedback.minimumDate": "Wprowad\u017A dat\u0119 nie wcze\u015Bniejsz\u0105 ni\u017C {minimum}.",
   "dynamicFlows.ControlFeedback.pattern": "Wprowad\u017A t\u0119 warto\u015B\u0107 w prawid\u0142owym formacie.",
   "dynamicFlows.ControlFeedback.patternDate": "Wprowad\u017A dat\u0119 w prawid\u0142owym formacie.",
@@ -9542,10 +9679,10 @@ var tr_default = {
 var zh_default = {
   "dynamicFlows.ArraySchema.maxItemsError": "\u8ACB\u6DFB\u52A0\u4E0D\u8D85\u904E{maxItems}\u9805\u3002",
   "dynamicFlows.ArraySchema.minItemsError": "\u8ACB\u81F3\u5C11\u6DFB\u52A0{minItems}\u9805\u3002",
-  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "\u4F60\u76EE\u524D\u4F7F\u7528\u7684\u700F\u89BD\u5668\u4E0D\u652F\u6301\u76F8\u6A5F\u529F\u80FD\u3002\u8ACB\u5617\u8A66\u4F7F\u7528\u5176\u4ED6\u700F\u89BD\u5668\u6216\u5176\u4ED6\u88DD\u7F6E\uFF0C\u6216\u8005\u4F60\u53EF\u4EE5\u4E0B\u8F09\u6211\u5011\u7684\u61C9\u7528\u7A0B\u5F0F\u3002",
-  "dynamicFlows.CameraCapture.CameraNotSupported.title": "\u4E0D\u652F\u6301\u76F8\u6A5F\u529F\u80FD",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "\u4F60\u76EE\u524D\u4F7F\u7528\u7684\u700F\u89BD\u5668\u4E0D\u652F\u6301\u76F8\u6A5F\u3002\u8ACB\u5617\u8A66\u4F7F\u7528\u5176\u4ED6\u700F\u89BD\u5668\u6216\u5176\u4ED6\u88DD\u7F6E\uFF0C\u6216\u8005\u4F60\u53EF\u4EE5\u4E0B\u8F09\u6211\u5011\u7684\u61C9\u7528\u7A0B\u5F0F\u3002",
+  "dynamicFlows.CameraCapture.CameraNotSupported.title": "\u4E0D\u652F\u6301\u76F8\u6A5F",
   "dynamicFlows.CameraCapture.NoCameraAccess.action": "\u5141\u8A31\u53D6\u7528\u76F8\u6A5F",
-  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "\u4F60\u53EF\u4EE5\u5728\u700F\u89BD\u5668\u7684\u8A2D\u5B9A\u4E2D\u958B\u555F\u76F8\u6A5F\u5B58\u53D6\u6B0A\u9650",
+  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "\u4F60\u53EF\u4EE5\u5728\u700F\u89BD\u5668\u7684\u8A2D\u5B9A\u4E2D\u958B\u555F\u76F8\u6A5F\u5B58\u53D6\u6B0A\u9650\u3002",
   "dynamicFlows.CameraCapture.NoCameraAccess.title": "\u6211\u5011\u7121\u6CD5\u53D6\u7528\u4F60\u7684\u76F8\u6A5F",
   "dynamicFlows.CameraCapture.reviewInstructions": "\u4F60\u7684\u7167\u7247\u662F\u5426\u5B8C\u6574\u3001\u6E05\u6670\u53CA\u53EF\u8B80\uFF1F",
   "dynamicFlows.CameraCapture.reviewRetry": "\u5426\uFF0C\u518D\u8A66\u4E00\u6B21",
@@ -9560,13 +9697,13 @@ var zh_default = {
   "dynamicFlows.ControlFeedback.patternDate": "\u8ACB\u4EE5\u6B63\u78BA\u683C\u5F0F\u8F38\u5165\u65E5\u671F\u3002",
   "dynamicFlows.ControlFeedback.required": "\u8ACB\u586B\u5BEB\u6B64\u6B04\u4F4D\u3002",
   "dynamicFlows.ControlFeedback.type": "\u932F\u8AA4\u7684\u985E\u578B",
-  "dynamicFlows.DynamicExternal.retryTitle": "\u91CD\u65B0\u958B\u555F\u8996\u7A97",
+  "dynamicFlows.DynamicExternal.retryTitle": "\u91CD\u65B0\u6253\u958B\u8996\u7A97",
   "dynamicFlows.DynamicParagraph.copied": "\u8907\u88FD\u5230\u526A\u8CBC\u677F",
   "dynamicFlows.DynamicParagraph.copy": "\u8907\u88FD",
   "dynamicFlows.ErrorBoundary.errorAlert": "\u5662\uFF01\u51FA\u4E86\u4E9B\u554F\u984C...",
   "dynamicFlows.ErrorBoundary.retry": "\u91CD\u8A66",
   "dynamicFlows.ExternalConfirmation.cancel": "\u53D6\u6D88",
-  "dynamicFlows.ExternalConfirmation.description": "\u8ACB\u78BA\u8A8D\u4F60\u60F3\u5728\u700F\u89BD\u5668\u7684\u65B0\u5206\u9801\u4E2D\u958B\u555F**{origin}**\u3002",
+  "dynamicFlows.ExternalConfirmation.description": "\u8ACB\u78BA\u8A8D\u4F60\u662F\u5426\u8981\u5728\u700F\u89BD\u5668\u7684\u65B0\u5206\u9801\u6253\u958B**{origin}**\u3002",
   "dynamicFlows.ExternalConfirmation.open": "\u5728\u65B0\u5206\u9801\u4E2D\u958B\u555F",
   "dynamicFlows.ExternalConfirmation.title": "\u8ACB\u78BA\u8A8D",
   "dynamicFlows.Help.ariaLabel": "\u6309\u6B64\u67E5\u770B\u8A73\u60C5\u3002",