@wise/dynamic-flow-client 3.10.0 → 3.11.1

package/build/main.js

@@ -1291,11 +1291,14 @@ var isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.form
 var isSchemaWithPersistAsync = (schema) => "persistAsync" in schema && !isNullish(schema.persistAsync);
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({ back, external, loadingState, trackEvent }, children) => ({
+var stepComponentToProps = ({ back, description, error, external, loadingState, title, trackEvent }, children) => ({
   type: "step",
   back,
+  description,
+  error,
   external,
   loadingState,
+  title,
   trackEvent,
   children
 });
@@ -6519,27 +6522,6 @@ var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context =
   context: mapLegacyContext(context)
 });
 
-// src/revamp/domain/components/HeadingComponent.ts
-var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
-  type: "heading"
-}, headingProps), {
-  getSubmittableValue: async () => null,
-  getSummary: () => ({}),
-  // Noop
-  getLocalValue: () => null,
-  validate: () => true
-});
-
-// src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
-var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
-  uid,
-  align: mapLegacyAlign(align),
-  control,
-  margin,
-  size,
-  text
-});
-
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
   type: "box",
@@ -7783,38 +7765,32 @@ var getComponentForLocalValueKey = (key, component) => {
 
 // src/revamp/domain/components/utils/isPartialLocalValueMatch.ts
 var isPartialLocalValueMatch = (partialValue, component) => {
-  if (isArray(partialValue) && component.type === "repeatable") {
-    const children = component.getChildren();
-    return partialValue.every((value, index) => {
-      const childComponent = children[index];
-      return childComponent ? isPartialLocalValueMatch(value, childComponent) : false;
-    });
+  if (!component) {
+    return false;
   }
   const componentValue = component.getLocalValue();
   if (component.type === "const") {
     return compareLocalValue(partialValue, componentValue);
   }
   if (isObjectLocalValue(partialValue) && isObjectLocalValue(componentValue)) {
-    const allKeys = Array.from(
-      /* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(componentValue)])
-    );
-    const matchingKeys = allKeys.filter(
-      (key) => !isNullish(partialValue[key]) && !isNullish(componentValue[key])
-    );
-    return matchingKeys.length > 0 && matchingKeys.every((key) => {
-      const componentForKey = getComponentForLocalValueKey(key, component);
-      return componentForKey ? isPartialLocalValueMatch(partialValue[key], componentForKey) : false;
-    });
+    return isPartialObjectMatch(partialValue, componentValue, component);
   }
-  if (partialValue instanceof File && componentValue instanceof File) {
-    return areEquivalentFiles(partialValue, componentValue);
-  }
-  if ("isPersisted" in component && component.isPersisted) {
-    return true;
-  }
-  return compareLocalValue(partialValue, componentValue);
+  return true;
+};
+var isPartialObjectMatch = (partialValue, componentValue, component) => {
+  const resultByKey = getMatchingKeys(partialValue, componentValue).map((key) => {
+    const componentForKey = getComponentForLocalValueKey(key, component);
+    if (componentForKey && componentForKey.type === "const") {
+      return isPartialLocalValueMatch(partialValue[key], componentForKey);
+    }
+    return null;
+  });
+  return resultByKey.includes(true) && !resultByKey.includes(false);
+};
+var getMatchingKeys = (a, b) => {
+  const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]));
+  return allKeys.filter((key) => !isNullish(a[key]) && !isNullish(b[key]));
 };
-var areEquivalentFiles = (fileA, fileB) => fileA.name === fileB.name && fileA.type === fileB.type && fileA.size === fileB.size;
 
 // src/revamp/domain/components/SelectInputComponent.ts
 var createSelectInputComponent = (selectProps, updateComponent) => {
@@ -8140,6 +8116,19 @@ var toBase64 = async (file) => new Promise((resolve, reject) => {
   reader.addEventListener("error", reject);
   reader.readAsDataURL(file);
 });
+var base64dataUrltoFile = (dataurl, filename) => {
+  if (!isBase64DataUrl(dataurl)) {
+    return null;
+  }
+  const [, base64data] = dataurl.split(",");
+  return new File([base64ToBytes(base64data)], filename, { type: getMimeType(dataurl) });
+};
+var isBase64DataUrl = (dataurl) => dataurl.startsWith("data:") && dataurl.includes("base64") && dataurl.includes(",");
+var getMimeType = (base64dataUrl) => base64dataUrl.substring("data:".length).split(";")[0];
+var base64ToBytes = (base64) => {
+  const charCodes = atob(base64).split("").map((m) => m.charCodeAt(0));
+  return Uint8Array.from(charCodes);
+};
 
 // src/revamp/domain/components/UploadInputComponent.ts
 var createUploadInputComponent = (uploadInputProps, updateComponent) => {
@@ -8241,6 +8230,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
 
 // src/revamp/domain/mappers/schema/stringSchemaToComponent/stringSchemaToUploadInputComponent.ts
 var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
+  var _a;
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const { accepts, autocompleteHint, maxSize, validationMessages } = schema;
   const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
@@ -8248,7 +8238,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
   const { performPersistAsync } = getPersistAsyncInitialState(schemaMapperProps, mapperProps);
   const persistedState = performPersistAsync ? getInitialPersistedState(null, model) : getInitialPersistedState();
   const validLocalValue = isFile(localValue) ? localValue : null;
-  const value = performPersistAsync ? validLocalValue : null;
+  const value = (_a = getFileFromModel(model)) != null ? _a : validLocalValue;
   return createUploadInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       accepts,
@@ -8265,6 +8255,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
     updateComponent
   );
 };
+var getFileFromModel = (model) => isString(model) ? base64dataUrltoFile(model, "") : null;
 
 // src/revamp/domain/components/TextInputComponent.ts
 var createTextInputComponent = (textInputProps, updateComponent) => {
@@ -9250,6 +9241,27 @@ var formLayoutToComponent = (uid, { schemaId, schema: schemaRef, control, margin
   });
 };
 
+// src/revamp/domain/components/HeadingComponent.ts
+var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
+  type: "heading"
+}, headingProps), {
+  getSubmittableValue: async () => null,
+  getSummary: () => ({}),
+  // Noop
+  getLocalValue: () => null,
+  validate: () => true
+});
+
+// src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
+var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
+  uid,
+  align: mapLegacyAlign(align),
+  control,
+  margin,
+  size,
+  text
+});
+
 // src/revamp/domain/components/ImageComponent.ts
 var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
   type: "image"
@@ -9722,7 +9734,7 @@ var mapStepToComponent = (_a) => {
   ]);
   var _a2, _b2;
   const { httpClient, step, updateComponent } = restProps;
-  const { id, navigation, external, key, layout = [], polling } = step;
+  const { id, description, errors, external, key, layout = [], navigation, polling, title } = step;
   const backNavigation = (_a2 = navigation == null ? void 0 : navigation.back) != null ? _a2 : navigation == null ? void 0 : navigation.backButton;
   const back = backNavigation ? {
     title: backNavigation.title,
@@ -9759,34 +9771,21 @@ var mapStepToComponent = (_a) => {
       onRefresh
     }))
   );
-  const additionalComponents = makeAdditionalComponents(step, uid, displayStepTitle);
   const stepComponent = createStepComponent({
     uid,
-    components: [...additionalComponents, ...layoutComponents],
     back,
+    components: layoutComponents,
+    description,
+    error: errors == null ? void 0 : errors.error,
     external,
     loadingState,
     stepPolling,
     updateComponent,
+    title: displayStepTitle ? title : void 0,
     trackEvent
   });
   return stepComponent;
 };
-var makeAdditionalComponents = (step, uid, displayStepTitle) => {
-  const { title, errors } = step;
-  const heading = title && displayStepTitle ? headingLayoutToComponent(`${uid}.title`, {
-    type: "heading",
-    text: title,
-    align: "center",
-    size: "lg"
-  }) : void 0;
-  const stepError = (errors == null ? void 0 : errors.error) ? alertLayoutToComponent(`${uid}.global-error`, {
-    type: "alert",
-    markdown: errors.error,
-    context: "negative"
-  }) : void 0;
-  return [...heading ? [heading] : [], ...stepError ? [stepError] : []];
-};
 
 // src/revamp/flow/executeRefresh.ts
 var executeRefresh = async (props) => {
@@ -12296,7 +12295,7 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title }) => {
-    const orientation = control === "horizontal" ? "HORIZONTAL_RIGHT_ALIGNED" : "VERTICAL_ONE_COLUMN";
+    const orientation = mapControlToDefinitionListLayout(control);
     const action = callToAction ? {
       text: callToAction.title,
       onClick: (event) => {
@@ -12321,6 +12320,21 @@ var ReviewRenderer = {
   }
 };
 var ReviewRenderer_default = ReviewRenderer;
+var mapControlToDefinitionListLayout = (control) => {
+  switch (control) {
+    case "horizontal":
+    case "horizontal-end-aligned":
+      return "HORIZONTAL_RIGHT_ALIGNED";
+    case "horizontal-start-aligned":
+      return "HORIZONTAL_LEFT_ALIGNED";
+    case "vertical-two-column":
+      return "VERTICAL_TWO_COLUMN";
+    case "vertical":
+    case "vertical-one-column":
+    default:
+      return "VERTICAL_ONE_COLUMN";
+  }
+};
 var getFieldValue = (value, help, orientation) => {
   if (help) {
     return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
@@ -12446,13 +12460,14 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // src/revamp/wise/renderers/step/StepRenderer.tsx
+var import_components39 = require("@transferwise/components");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, loadingState, external, trackEvent, children } = props;
+  const { back, description, error, external, loadingState, title, trackEvent, children } = props;
   const value = (0, import_react20.useMemo)(() => ({ loadingState, trackEvent }), [loadingState, trackEvent]);
   const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
   if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
@@ -12460,6 +12475,9 @@ function StepRendererComponent(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BackButton_default, __spreadValues({}, back)) : null,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h2", { className: "text-xs-center m-b-2", children: title }) : void 0,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xs-center m-b-2", children: description }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components39.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -13829,10 +13847,10 @@ var import_classnames16 = __toESM(require_classnames());
 var import_react52 = require("react");
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-var import_components40 = require("@transferwise/components");
+var import_components41 = require("@transferwise/components");
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
-var import_components39 = require("@transferwise/components");
+var import_components40 = require("@transferwise/components");
 
 // src/legacy/layout/icon/FlagIcon.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
@@ -13883,10 +13901,10 @@ var DynamicIcon_default2 = DynamicIcon2;
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var getNavigationOptionMedia = ({ icon, image }) => {
   if (icon == null ? void 0 : icon.name) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components39.Avatar, { type: import_components39.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DynamicIcon_default2, { type: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components40.Avatar, { type: import_components40.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DynamicIcon_default2, { type: icon.name }) });
   }
   if (icon == null ? void 0 : icon.text) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components39.Avatar, { type: import_components39.AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components40.Avatar, { type: import_components40.AvatarType.INITIALS, children: icon.text });
   }
   if (image == null ? void 0 : image.url) {
     const { url, text } = image;
@@ -13930,7 +13948,7 @@ var import_jsx_runtime69 = require("react/jsx-runtime");
 var DynamicAlert = (props) => {
   const alert = props.component;
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-    import_components40.Alert,
+    import_components41.Alert,
     {
       type: mapContextToAlertType(legacy_mapContext(alert.context)),
       className: getMargin2(alert.margin),
@@ -14014,7 +14032,7 @@ var getBoxWidthClasses = (component) => {
 var DynamicBox_default = DynamicBox;
 
 // src/legacy/layout/button/DynamicButton.tsx
-var import_components41 = require("@transferwise/components");
+var import_components42 = require("@transferwise/components");
 
 // src/legacy/layout/button/utils.ts
 var priorities = {
@@ -14074,7 +14092,7 @@ function DynamicButton(props) {
   const { loading } = useDynamicFlow();
   const className = getMargin2(component.margin || "md");
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    import_components41.Button,
+    import_components42.Button,
     {
       size: getButtonSize(component.size),
       type: priority === "tertiary" ? void 0 : type,
@@ -14142,12 +14160,12 @@ var getWidth = (bias) => {
 var DynamicColumns_default = DynamicColumns;
 
 // src/legacy/layout/decision/DynamicDecision.tsx
-var import_components42 = require("@transferwise/components");
+var import_components43 = require("@transferwise/components");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getMargin2(component.margin), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_components42.NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    import_components42.NavigationOption,
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getMargin2(component.margin), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_components43.NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    import_components43.NavigationOption,
     {
       title: option.title,
       content: option.description,
@@ -14172,7 +14190,7 @@ var DynamicDivider = ({ component }) => {
 var DynamicDivider_default = DynamicDivider;
 
 // src/legacy/layout/external/DynamicExternal.tsx
-var import_components43 = require("@transferwise/components");
+var import_components44 = require("@transferwise/components");
 var import_react31 = require("react");
 var import_react_intl19 = require("react-intl");
 
@@ -14203,9 +14221,9 @@ var DynamicExternal = ({ component, onAction }) => {
   }) : void 0;
   useExternalStepPolling(pollingConfiguration, onAction);
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components43.Loader, { size: import_components43.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components44.Loader, { size: import_components44.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components43.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components44.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
   ] });
 };
 var DynamicExternal_default = DynamicExternal;
@@ -14214,7 +14232,7 @@ var DynamicExternal_default = DynamicExternal;
 var import_react45 = require("react");
 
 // src/legacy/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
-var import_components44 = require("@transferwise/components");
+var import_components45 = require("@transferwise/components");
 var import_classnames7 = __toESM(require_classnames());
 var import_react32 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
@@ -14234,7 +14252,7 @@ function AllOfSchema(props) {
   };
   const [models, setModels] = (0, import_react32.useState)(splitModel(props.model, props.schema.allOf));
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-    props.schema.title && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_components44.Header, { title: props.schema.title }),
+    props.schema.title && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_components45.Header, { title: props.schema.title }),
     props.schema.description && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { children: props.schema.description }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -14262,12 +14280,12 @@ AllOfSchema.defaultProps = {
 var AllOfSchema_default = AllOfSchema;
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-var import_components46 = require("@transferwise/components");
+var import_components47 = require("@transferwise/components");
 var import_classnames8 = __toESM(require_classnames());
 var import_react33 = require("react");
 
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
-var import_components45 = require("@transferwise/components");
+var import_components46 = require("@transferwise/components");
 var import_formatting2 = require("@transferwise/formatting");
 var import_react_intl20 = require("react-intl");
 var import_jsx_runtime77 = require("react/jsx-runtime");
@@ -14280,9 +14298,9 @@ function ControlFeedback(props) {
   const isDescriptionVisible = props.schema.type !== "boolean" && props.schema.description && !isErrorVisible && !isValidationVisible;
   const hasInfoMessage = Boolean(props.infoMessage);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components45.InlineAlert, { type: "error", children: props.errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components45.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_components45.InlineAlert, { type: "info", children: [
+    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components46.InlineAlert, { type: "error", children: props.errors }) : null,
+    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components46.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
+    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_components46.InlineAlert, { type: "info", children: [
       isDescriptionVisible && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: props.schema.description }),
       hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: props.infoMessage })
     ] })
@@ -14474,7 +14492,7 @@ function MultipleFileUploadSchema(props) {
   const feedbackId = `${uid}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_classnames8.default)("form-group", { "has-error": showError }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components46.UploadInput, __spreadValues({}, uploadInputProps)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components47.UploadInput, __spreadValues({}, uploadInputProps)) }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       ControlFeedback_default,
       {
@@ -14505,7 +14523,7 @@ function getSuccessfullyProcessedFiles(allFiles) {
   return allFiles.filter((file) => !file.error && file.status === "succeeded");
 }
 function convertFileIdsToComponentFileObjects(fileIds) {
-  return fileIds.map((id) => isValidId(id) ? { id, status: import_components46.Status.SUCCEEDED } : null).filter((item) => item !== null);
+  return fileIds.map((id) => isValidId(id) ? { id, status: import_components47.Status.SUCCEEDED } : null).filter((item) => item !== null);
 }
 function isValidId(id) {
   return isNumber3(id) || isString2(id);
@@ -14516,13 +14534,13 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multiSelectSchema/MultiSelectSchema.tsx
-var import_components48 = require("@transferwise/components");
+var import_components49 = require("@transferwise/components");
 var import_classnames9 = __toESM(require_classnames());
 var import_react34 = require("react");
 var import_react_intl23 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
-var import_components47 = require("@transferwise/components");
+var import_components48 = require("@transferwise/components");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
@@ -14574,17 +14592,17 @@ var getIconPropertyForSelectOption = (icon) => {
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.Avatar, { type: import_components47.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("img", { src: image.url, alt: "" }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components48.Avatar, { type: import_components48.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("img", { src: image.url, alt: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.Avatar, { type: import_components47.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DynamicIcon_default2, { type: icon.name }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components48.Avatar, { type: import_components48.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DynamicIcon_default2, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.Avatar, { type: import_components47.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components48.Avatar, { type: import_components48.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -14668,7 +14686,7 @@ function MultiSelectSchema({
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: (0, import_classnames9.default)("d-flex flex-column", formGroupClasses), children: [
     schema.title ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { htmlFor: id, children: schema.title }) : void 0,
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-      import_components48.SelectInput,
+      import_components49.SelectInput,
       {
         id,
         multiple: true,
@@ -14693,7 +14711,7 @@ function MultiSelectSchema({
           if (withinTrigger) {
             return selected && index === selected[0] ? getFormattedMessage() : void 0;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components48.SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
+          return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components49.SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
         },
         onChange: broadcastModelChange
       }
@@ -14723,17 +14741,17 @@ var getInitialModelIndices2 = (model, options) => {
 };
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
-var import_components50 = require("@transferwise/components");
+var import_components51 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
 var import_react36 = require("react");
 var import_react_intl25 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
-var import_components49 = require("@transferwise/components");
+var import_components50 = require("@transferwise/components");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 function ItemSummaryOption2({ item, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-    import_components49.NavigationOption,
+    import_components50.NavigationOption,
     {
       media: getNavigationOptionMedia(item),
       title: item.title,
@@ -15079,7 +15097,7 @@ function RepeatableSchema({
     "has-error": (_a = errors && !isEmpty(errors)) != null ? _a : submitted && validations.length
   };
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { id, className: (0, import_classnames10.default)(formGroupClasses), children: [
-    schema.title && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_components50.Header, { title: schema.title }),
+    schema.title && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_components51.Header, { title: schema.title }),
     itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       ItemSummaryOption2,
       {
@@ -15089,7 +15107,7 @@ function RepeatableSchema({
       JSON.stringify(itemSummary)
     )),
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-      import_components50.NavigationOption,
+      import_components51.NavigationOption,
       {
         media: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_icons4.Plus, {}),
         title: schema.addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
@@ -15098,7 +15116,7 @@ function RepeatableSchema({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-      import_components50.Modal,
+      import_components51.Modal,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? schema.addItemTitle : schema.editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
@@ -15194,7 +15212,7 @@ ArraySchema.defaultProps = {
 var ArraySchema_default = ArraySchema;
 
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
-var import_components51 = require("@transferwise/components");
+var import_components52 = require("@transferwise/components");
 var import_classnames11 = __toESM(require_classnames());
 var import_react37 = require("react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
@@ -15236,7 +15254,7 @@ function ObjectSchema(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("fieldset", { children: [
-      props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_components51.Header, { title: props.schema.title, as: "legend" }),
+      props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_components52.Header, { title: props.schema.title, as: "legend" }),
       props.schema.description && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("p", { children: [
         " ",
         props.schema.description,
@@ -15274,21 +15292,21 @@ ObjectSchema.defaultProps = {
 var ObjectSchema_default = ObjectSchema;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-var import_components54 = require("@transferwise/components");
+var import_components55 = require("@transferwise/components");
 var import_classnames12 = __toESM(require_classnames());
 var import_react40 = require("react");
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
-var import_components52 = require("@transferwise/components");
+var import_components53 = require("@transferwise/components");
 var import_react_intl26 = require("react-intl");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 function Help2(props) {
   const intl = (0, import_react_intl26.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-    import_components52.Info,
+    import_components53.Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_components52.Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_components53.Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default.helpAria)
@@ -15301,7 +15319,7 @@ var Help_default2 = Help2;
 var import_react39 = require("react");
 
 // src/legacy/formControl/FormControl.tsx
-var import_components53 = require("@transferwise/components");
+var import_components54 = require("@transferwise/components");
 var import_react38 = require("react");
 
 // src/legacy/formControl/utils/value-utils.ts
@@ -15577,7 +15595,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
     switch (type) {
       case FormControlType.RADIO:
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.RadioGroup,
+          import_components54.RadioGroup,
           {
             radios: options.map(this.mapOption),
             name,
@@ -15587,7 +15605,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
         );
       case FormControlType.CHECKBOX:
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.Checkbox,
+          import_components54.Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
@@ -15605,7 +15623,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
         const items = options;
         const selected = this.getSelectedOption(options);
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "d-flex flex-column", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.SelectInput,
+          import_components54.SelectInput,
           {
             id,
             items: items.map((value2) => ({
@@ -15615,7 +15633,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
             })),
             value: selected != null ? selected : null,
             renderValue: ({ hideIconInTrigger, icon, label: label2, note, secondary }, withinTrigger) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-              import_components53.SelectInputOptionContent,
+              import_components54.SelectInputOptionContent,
               {
                 title: label2,
                 note: withinTrigger ? note != null ? note : secondary : note,
@@ -15644,7 +15662,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
       }
       case FormControlType.TAB:
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.Tabs,
+          import_components54.Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
@@ -15729,7 +15747,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
       case FormControlType.DATE:
       case FormControlType.DATETIME:
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.DateInput,
+          import_components54.DateInput,
           {
             dayAutoComplete: this.getAutocompleteValue({ suffix: "-day" }),
             yearAutoComplete: this.getAutocompleteValue({ suffix: "-year" }),
@@ -15745,7 +15763,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
         );
       case FormControlType.DATELOOKUP: {
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.DateLookup,
+          import_components54.DateLookup,
           {
             value: getSafeDateStringValue(value),
             min: minDate,
@@ -15763,7 +15781,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
       }
       case FormControlType.TEL:
         return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          import_components53.PhoneNumberInput,
+          import_components54.PhoneNumberInput,
           {
             disabled,
             countryCode,
@@ -15795,7 +15813,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-            import_components53.TextareaWithDisplayFormat,
+            import_components54.TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, textareaProps), {
@@ -15817,7 +15835,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-expect-error - TODO: Remove this once Upload is migrated to TypeScript
           /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-            import_components53.Upload,
+            import_components54.Upload,
             __spreadProps(__spreadValues({}, uploadProps), {
               usAccept: uploadProps.usAccept || "*",
               usDisabled: uploadProps.usDisabled || disabled,
@@ -15855,7 +15873,7 @@ var _FormControl = class _FormControl extends import_react38.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-            import_components53.InputWithDisplayFormat,
+            import_components54.InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, inputProps), {
@@ -16185,7 +16203,7 @@ function getTitleAndHelp(schema, forId) {
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_components54.Header, { title: (_a = schema.title) != null ? _a : "" }) });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_components55.Header, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -16225,7 +16243,7 @@ var import_classnames13 = __toESM(require_classnames());
 var import_react42 = require("react");
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
-var import_components55 = require("@transferwise/components");
+var import_components56 = require("@transferwise/components");
 var import_react41 = require("react");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 function UploadInputAdapter(props) {
@@ -16243,7 +16261,7 @@ function UploadInputAdapter(props) {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react41.useMemo)(() => fileId ? [{ id: fileId, status: import_components55.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react41.useMemo)(() => fileId ? [{ id: fileId, status: import_components56.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(String(httpOptions.url), {
@@ -16261,7 +16279,7 @@ function UploadInputAdapter(props) {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-    import_components55.UploadInput,
+    import_components56.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -16399,7 +16417,7 @@ var getSelectionFromModel = (schema, model) => {
 };
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
-var import_components56 = require("@transferwise/components");
+var import_components57 = require("@transferwise/components");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
@@ -16411,13 +16429,13 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_components56.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_components57.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
 };
 PromotedOneOfCheckboxControl.defaultProps = {};
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
-var import_components57 = require("@transferwise/components");
+var import_components58 = require("@transferwise/components");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 function PromotedOneOfRadioControl(props) {
   var _a, _b;
@@ -16438,7 +16456,7 @@ function PromotedOneOfRadioControl(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "form-group", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
-      import_components57.RadioGroup,
+      import_components58.RadioGroup,
       {
         name: "promoted-selection",
         selectedValue: selection,
@@ -16529,7 +16547,7 @@ function getOtherOneOf(schema) {
 var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_components58 = require("@transferwise/components");
+var import_components59 = require("@transferwise/components");
 var import_react_intl28 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.ts
@@ -16553,7 +16571,7 @@ function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
   const { formatMessage } = (0, import_react_intl28.useIntl)();
   const value = getValueForSchema({ schema, model, formatMessage });
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_components58.DefinitionList, { layout: import_components58.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_components59.DefinitionList, { layout: import_components59.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -16778,7 +16796,7 @@ function DynamicForm({
 var DynamicForm_default = DynamicForm;
 
 // src/legacy/layout/heading/DynamicHeading.tsx
-var import_components59 = require("@transferwise/components");
+var import_components60 = require("@transferwise/components");
 var import_classnames14 = __toESM(require_classnames());
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
@@ -16805,30 +16823,30 @@ var DisplayHeading2 = ({ size, text, classes }) => {
   switch (size) {
     case "xs":
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_components59.Display, { type: "display-small", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_components60.Display, { type: "display-small", className: classes, children: text });
     case "xl":
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_components59.Display, { type: "display-large", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_components60.Display, { type: "display-large", className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_components59.Display, { type: "display-medium", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_components60.Display, { type: "display-medium", className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
 // src/legacy/layout/markdown/DynamicMarkdown.tsx
-var import_components60 = require("@transferwise/components");
+var import_components61 = require("@transferwise/components");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_components60.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_components61.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
 };
 var DynamicInfo = ({ component }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: getTextAlignmentAndMargin2(component), children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_components60.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: getTextAlignmentAndMargin2(component), children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_components61.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/legacy/layout/image/DynamicImage.tsx
-var import_components61 = require("@transferwise/components");
+var import_components62 = require("@transferwise/components");
 var import_react47 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 function DynamicImage({ component: image }) {
@@ -16847,7 +16865,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Image, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components62.Image, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL2 = (imageBlob) => (
   // we can safely assume the type of reader.result is string
@@ -16883,7 +16901,7 @@ var getImageSource2 = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/legacy/layout/instructions/DynamicInstructions.tsx
-var import_components62 = require("@transferwise/components");
+var import_components63 = require("@transferwise/components");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var doContext2 = ["positive", "neutral"];
 var dontContext2 = ["warning", "negative"];
@@ -16892,8 +16910,8 @@ var DynamicInstructions = ({ component }) => {
   const dos = items.filter((item) => doContext2.includes(item.context)).map(({ text }) => text);
   const donts = items.filter((item) => dontContext2.includes(item.context)).map(({ text }) => text);
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components62.Header, { title: component.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components62.InstructionsList, { dos, donts })
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components63.Header, { title: component.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components63.InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
@@ -17003,11 +17021,11 @@ function DynamicLayout(props) {
 var DynamicLayout_default = DynamicLayout;
 
 // src/legacy/layout/list/DynamicStatusList.tsx
-var import_components63 = require("@transferwise/components");
+var import_components64 = require("@transferwise/components");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var DynamicStatusList = ({ component }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components63.Header, { title: component.title }) : null,
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components64.Header, { title: component.title }) : null,
     component.items.map(mapListItemToSummary)
   ] });
 };
@@ -17017,7 +17035,7 @@ var mapListItemToSummary = ({ title, description, icon, status }) => {
     title,
     description
   }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(DynamicIcon_default2, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components63.Summary, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components64.Summary, __spreadValues({}, props));
 };
 var statusListMap = {
   done: "done",
@@ -17033,12 +17051,12 @@ var statusMap = __spreadValues(__spreadValues({}, statusListMap), legacyStatusMa
 var DynamicStatusList_default = DynamicStatusList;
 
 // src/legacy/layout/loadingIndicator/DynamicLoadingIndicator.tsx
-var import_components64 = require("@transferwise/components");
+var import_components65 = require("@transferwise/components");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin = "md", size = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-    import_components64.Loader,
+    import_components65.Loader,
     {
       size,
       classNames: {
@@ -17051,14 +17069,14 @@ var DynamicLoadingIndicator = ({ component }) => {
 var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-var import_components66 = require("@transferwise/components");
+var import_components67 = require("@transferwise/components");
 var import_react_intl29 = require("react-intl");
 
 // src/legacy/layout/paragraph/useSnackBarIfAvailable.ts
-var import_components65 = require("@transferwise/components");
+var import_components66 = require("@transferwise/components");
 var import_react48 = require("react");
 function useSnackBarIfAvailable2() {
-  const context = (0, import_react48.useContext)(import_components65.SnackbarContext);
+  const context = (0, import_react48.useContext)(import_components66.SnackbarContext);
   return context ? context.createSnackbar : noop3;
 }
 function noop3() {
@@ -17099,7 +17117,7 @@ function CopyableDynamicParagraph({ component }) {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components66.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components67.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 function noop4() {
@@ -17107,7 +17125,7 @@ function noop4() {
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/legacy/layout/review/DynamicReview.tsx
-var import_components67 = require("@transferwise/components");
+var import_components68 = require("@transferwise/components");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => review.fields.map(({ label, value, help }, index) => ({
   key: String(index),
@@ -17128,9 +17146,21 @@ var getFieldValue2 = (value, help, orientation) => {
   }
   return value;
 };
-var getReviewLayout = (review) => {
+var getDefinitionListLayout = (review) => {
   const orientation = review.control || review.orientation;
-  return orientation === "horizontal" ? "HORIZONTAL_RIGHT_ALIGNED" : "VERTICAL_ONE_COLUMN";
+  switch (orientation) {
+    case "horizontal":
+    case "horizontal-end-aligned":
+      return "HORIZONTAL_RIGHT_ALIGNED";
+    case "horizontal-start-aligned":
+      return "HORIZONTAL_LEFT_ALIGNED";
+    case "vertical-two-column":
+      return "VERTICAL_TWO_COLUMN";
+    case "vertical":
+    case "vertical-one-column":
+    default:
+      return "VERTICAL_ONE_COLUMN";
+  }
 };
 function DynamicReview(props) {
   const review = props.component;
@@ -17145,12 +17175,12 @@ function DynamicReview(props) {
       }
     }
   });
-  const orientation = getReviewLayout(review);
+  const orientation = getDefinitionListLayout(review);
   const callToAction = review.callToAction ? getReviewAction2(review.callToAction.title, review.callToAction.action) : null;
   const legacyCallToAction = !callToAction && review.action ? getReviewAction2(review.action.title || "", review.action) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_components67.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_components67.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_components68.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_components68.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }
 var DynamicReview_default = DynamicReview;
@@ -17160,13 +17190,13 @@ var import_react50 = require("react");
 var import_icons5 = require("@transferwise/icons");
 
 // src/legacy/layout/search/SearchInput.tsx
-var import_components68 = require("@transferwise/components");
+var import_components69 = require("@transferwise/components");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("label", { className: "control-label d-inline", children: [
     title,
     /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-      import_components68.Input,
+      import_components69.Input,
       {
         type: "text",
         value,
@@ -17179,15 +17209,15 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 };
 
 // src/legacy/layout/search/SearchResults.tsx
-var import_components69 = require("@transferwise/components");
+var import_components70 = require("@transferwise/components");
 var import_react_intl30 = require("react-intl");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 function SearchResults2({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components69.NavigationOptionsList, { children: results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-    import_components69.NavigationOption,
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components70.NavigationOptionsList, { children: results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    import_components70.NavigationOption,
     {
       title: result.title,
       content: result.description,
@@ -17288,7 +17318,7 @@ var addQueryParameter2 = (url, key, value) => {
 };
 
 // src/legacy/layout/search/DynamicSearch.tsx
-var import_components70 = require("@transferwise/components");
+var import_components71 = require("@transferwise/components");
 var import_classnames15 = __toESM(require_classnames());
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var DEBOUNCE_TIME2 = 400;
@@ -17329,7 +17359,7 @@ function DynamicSearch({ component, onAction }) {
     return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: (0, import_classnames15.default)(getMargin2(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("label", { className: "control-label d-inline", children: [
       title,
       /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "m-t-1", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-        import_components70.Typeahead,
+        import_components71.Typeahead,
         {
           id: "typeahead-input-id",
           name: "typeahead-input-name",
@@ -17384,7 +17414,7 @@ function TypeaheadFooter2({
   emptyMessage
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_components70.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_components71.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
   }
   if (state === "error" && results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ErrorResult2, { onRetrySearch }) });
@@ -17397,7 +17427,7 @@ function TypeaheadFooter2({
 var DynamicSearch_default = DynamicSearch;
 
 // src/legacy/layout/modal/DynamicModal.tsx
-var import_components71 = require("@transferwise/components");
+var import_components72 = require("@transferwise/components");
 var import_react51 = require("react");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 function DynamicModal(props) {
@@ -17405,9 +17435,9 @@ function DynamicModal(props) {
   const { component, onAction } = props;
   const { margin = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: getTextAlignmentAndMargin2({ margin }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components71.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components72.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-      import_components71.Modal,
+      import_components72.Modal,
       {
         scroll: "content",
         open: visible,
@@ -17960,7 +17990,7 @@ var CameraCapture_messages_default = (0, import_react_intl33.defineMessages)({
 });
 
 // src/legacy/step/cameraStep/cameraCapture/components/bottomBar/BottomBar.tsx
-var import_components72 = require("@transferwise/components");
+var import_components73 = require("@transferwise/components");
 var import_react_intl34 = require("react-intl");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(CaptureButton, { onClick: onCapture }) });
@@ -17971,24 +18001,24 @@ var ReviewBottomBar = ({
   const intl = (0, import_react_intl34.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-      import_components72.Button,
+      import_components73.Button,
       {
         className: "m-b-1",
         block: true,
-        size: import_components72.Size.MEDIUM,
-        type: import_components72.ControlType.ACCENT,
+        size: import_components73.Size.MEDIUM,
+        type: import_components73.ControlType.ACCENT,
         onClick: onSubmit,
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-      import_components72.Button,
+      import_components73.Button,
       {
         className: "m-b-2",
         block: true,
-        size: import_components72.Size.MEDIUM,
-        type: import_components72.ControlType.ACCENT,
-        priority: import_components72.Priority.SECONDARY,
+        size: import_components73.Size.MEDIUM,
+        type: import_components73.ControlType.ACCENT,
+        priority: import_components73.Priority.SECONDARY,
         onClick: onRetry,
         children: intl.formatMessage(CameraCapture_messages_default.reviewRetry)
       }
@@ -18040,13 +18070,13 @@ function OrientationLockOverlay() {
 var OrientationLockOverlay_default = OrientationLockOverlay;
 
 // src/legacy/step/cameraStep/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
-var import_components73 = require("@transferwise/components");
+var import_components74 = require("@transferwise/components");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 function CameraErrorScreen({ title, description, actionButton, onAction }) {
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h2", { className: "text-xs-center m-b-3", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-xs-center m-b-5", children: description }),
-    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_components73.Button, { block: true, onClick: onAction, children: actionButton })
+    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_components74.Button, { block: true, onClick: onAction, children: actionButton })
   ] }) }) });
 }
 var CameraErrorScreen_default = CameraErrorScreen;
@@ -18606,7 +18636,7 @@ function getOrigin2(url) {
 }
 
 // src/legacy/dynamicFlow/BackButton.tsx
-var import_components75 = require("@transferwise/components");
+var import_components76 = require("@transferwise/components");
 var import_icons6 = require("@transferwise/icons");
 var import_jsx_runtime125 = require("react/jsx-runtime");
 function BackButton2({ title, action, onAction }) {
@@ -18622,7 +18652,7 @@ function BackButton2({ title, action, onAction }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_components75.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_components76.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
       ]
     }
   );
@@ -18799,19 +18829,19 @@ var getSchemaReference = (component) => {
 var isInlineSchema = (schema) => schema !== void 0 && typeof schema === "object" && !Object.hasOwnProperty.call(schema, "$ref");
 
 // src/legacy/dynamicFlow/utils/useLoader.tsx
-var import_components76 = require("@transferwise/components");
+var import_components77 = require("@transferwise/components");
 var import_react65 = require("react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
-    size: import_components76.Size.EXTRA_LARGE,
+    size: import_components77.Size.EXTRA_LARGE,
     initial: true,
     submission: false
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react65.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-    import_components76.Loader,
+    import_components77.Loader,
     {
       size: config.size,
       classNames: { "tw-loader": "tw-loader m-x-auto" },