@wise/dynamic-flow-client 3.21.2 → 3.22.0

package/build/main.js

@@ -1474,7 +1474,7 @@ var allOfComponentToProps = ({ control, description, help, title }, children) =>
 
 // src/revamp/renderers/mappers/utils/inputComponentToProps.ts
 var inputComponentToProps = (component, type) => {
-  var _a, _b;
+  var _a;
   const {
     autoComplete,
     control,
@@ -1486,29 +1486,46 @@ var inputComponentToProps = (component, type) => {
     placeholder,
     required,
     title,
+    validationAsyncState,
     onBlur,
     onFocus
   } = component;
-  const validationState = componentHasValidationState(component) ? component.validationState : void 0;
-  const { messages } = validationState != null ? validationState : {};
+  const { messages } = validationAsyncState != null ? validationAsyncState : {};
   return {
     type,
     autoComplete,
     control,
-    description: (_a = messages == null ? void 0 : messages.success) != null ? _a : description,
+    description,
     disabled,
-    error: (_b = messages == null ? void 0 : messages.error) != null ? _b : errors[0],
+    error: (_a = messages == null ? void 0 : messages.error) != null ? _a : errors == null ? void 0 : errors[0],
     help,
     id,
     label: title,
     placeholder,
     required,
+    validationState: getValidationState(errors, validationAsyncState),
     value: component.getLocalValue(),
     onBlur: onBlur.bind(component),
     onFocus: onFocus.bind(component)
   };
 };
-var componentHasValidationState = (component) => Boolean("validationState" in component && component.validationState);
+var getValidationState = (errors, validationAsyncState) => {
+  if (validationAsyncState) {
+    if (validationAsyncState == null ? void 0 : validationAsyncState.messages.error) {
+      return { status: "invalid", message: validationAsyncState == null ? void 0 : validationAsyncState.messages.error };
+    }
+    if (validationAsyncState == null ? void 0 : validationAsyncState.messages.success) {
+      return { status: "valid", message: validationAsyncState == null ? void 0 : validationAsyncState.messages.success };
+    }
+  }
+  if (errors) {
+    if (errors.length > 0) {
+      return { status: "invalid", message: errors[0] };
+    }
+    return { status: "valid" };
+  }
+  return void 0;
+};
 
 // src/revamp/renderers/mappers/booleanInputComponentToProps.ts
 var booleanInputComponentToProps = (component) => {
@@ -1756,17 +1773,27 @@ var repeatableComponentToProps = (component, children, editableItemChildren) =>
     description,
     editableItem: editableItemChildren,
     editItemTitle,
+    error: errors == null ? void 0 : errors[0],
     items: itemProps,
     maxItems,
     minItems,
     title,
-    error: errors[0],
+    validationState: getValidationState2(errors),
     onAdd: onAdd.bind(component),
     onEdit: onEdit.bind(component),
     onSave: onSave.bind(component),
     onRemove: onRemove.bind(component)
   };
 };
+var getValidationState2 = (errors) => {
+  if (errors) {
+    if (errors.length > 0) {
+      return { status: "invalid", message: errors[0] };
+    }
+    return { status: "valid" };
+  }
+  return void 0;
+};
 
 // src/revamp/renderers/mappers/reviewComponentToProps.ts
 var reviewComponentToProps = ({
@@ -7392,18 +7419,18 @@ var getDebouncedPerformRefresh = (performRefresh) => performRefresh ? debounce(p
 // src/revamp/domain/features/validationAsync/getComponentValidationAsync.ts
 var getComponentValidationAsync = (update, performValidationAsync) => (
   /**
-   * Will update the validationState when a new request is made, and will update
+   * Will update the validationAsyncState when a new request is made, and will update
    * the description or set errors when the request completes.
    */
-  async (validationState, currentValue) => {
-    const { abortController, lastSubmitted } = validationState;
+  async (validationAsyncState, currentValue) => {
+    const { abortController, lastSubmitted } = validationAsyncState;
     if (lastSubmitted === currentValue) {
       return;
     }
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue)) {
       update((draft) => {
-        draft.validationState = {
+        draft.validationAsyncState = {
           abortController: newAbortController,
           lastSubmitted: currentValue,
           messages: {}
@@ -7415,7 +7442,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     const newSubmission = performValidationAsync({ value: currentValue, signal }).then((message) => {
       update((draft) => {
         if (message) {
-          draft.validationState.messages.success = message;
+          draft.validationAsyncState.messages.success = message;
         }
       });
       return message;
@@ -7424,11 +7451,11 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
         return null;
       }
       update((draft) => {
-        draft.validationState.messages.error = error.message;
+        draft.validationAsyncState.messages.error = error.message;
       });
     });
     update((draft) => {
-      draft.validationState = {
+      draft.validationAsyncState = {
         abortController: newAbortController,
         lastSubmitted: currentValue,
         messages: {}
@@ -7483,7 +7510,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     onChange(updatedValue) {
       update((draft) => {
         draft.errors = [];
-        draft.validationState.messages = {};
+        draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
@@ -7532,7 +7559,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, numberComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationState, this.getLocalValue()).catch(() => {
+          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -7844,7 +7871,7 @@ var mapCommonSchemaProps = (schemaMapperProps) => {
     control,
     description,
     disabled: schemaHasDisabled(schema) ? schema.disabled : false,
-    errors: isString(validationErrors) ? [validationErrors] : [],
+    errors: isString(validationErrors) ? [validationErrors] : void 0,
     hidden: Boolean(hidden),
     keywords,
     required: Boolean(required),
@@ -7903,8 +7930,8 @@ var getValidationMessage = (json) => {
   return isString(message) ? message : null;
 };
 
-// src/revamp/domain/features/validationAsync/getInitialValidationState.ts
-var getInitialValidationState = () => ({
+// src/revamp/domain/features/validationAsync/getInitialValidationAsyncState.ts
+var getInitialValidationAsyncState = () => ({
   abortController: new AbortController(),
   lastSubmitted: null,
   messages: {}
@@ -7913,8 +7940,8 @@ var getInitialValidationState = () => ({
 // src/revamp/domain/mappers/schema/utils/getValidationAsyncInitialState.ts
 var getValidationAsyncInitialState = (schemaMapperProps, mapperProps) => {
   const performValidationAsync = getValidationAsyncFn(schemaMapperProps, mapperProps);
-  const validationState = getInitialValidationState();
-  return { performValidationAsync, validationState };
+  const validationAsyncState = getInitialValidationAsyncState();
+  return { performValidationAsync, validationAsyncState };
 };
 var getValidationAsyncFn = (schemaMapperProps, mapperProps) => {
   const { schema } = schemaMapperProps;
@@ -7943,7 +7970,7 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -7962,7 +7989,7 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
       maximum,
       minimum,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8224,7 +8251,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     onChange(updatedValue) {
       update((draft) => {
         draft.errors = [];
-        draft.validationState.messages = {};
+        draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
@@ -8273,7 +8300,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, integerComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationState, this.getLocalValue()).catch(() => {
+          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -8292,7 +8319,7 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -8312,7 +8339,7 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
       minimum,
       persistedState,
       value,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8515,7 +8542,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     onChange(updatedValue) {
       update((draft) => {
         draft.errors = [];
-        draft.validationState.messages = {};
+        draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
       performRefresh == null ? void 0 : performRefresh();
@@ -8566,7 +8593,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, dateInputComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationState, this.getLocalValue()).catch(() => {
+          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -8590,7 +8617,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -8609,7 +8636,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       maximumDate,
       value,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8821,7 +8848,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     onChange(updatedValue) {
       update((draft) => {
         draft.errors = [];
-        draft.validationState.messages = {};
+        draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
@@ -8870,7 +8897,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, inputComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationState, this.getLocalValue()).catch(() => {
+          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -8899,7 +8926,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -8921,7 +8948,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
       minLength,
       value,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8973,7 +9000,7 @@ var createContainerComponent = (containerProps) => __spreadProps(__spreadValues(
   }
 });
 
-// src/revamp/domain/components/repeatableComponent/RepeatableComponent.ts
+// src/revamp/domain/components/RepeatableComponent.ts
 var createRepeatableComponent = (repeatableProps, updateComponent) => {
   const _a = repeatableProps, {
     uid,
@@ -9118,7 +9145,8 @@ var arraySchemaToRepeatableComponent = (schemaMapperProps, mapperProps) => {
       schema: items,
       localValue: editableValue,
       model: localValueToJsonElement(editableValue),
-      validationErrors: void 0
+      validationErrors: void 0,
+      required: true
     },
     mapperProps
   );
@@ -9400,7 +9428,7 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
       onSelect(indices) {
         inputComponent.onSelect.call(this, indices);
         if (this.validate()) {
-          validateAsync(this.validationState, this.getLocalValue()).catch(() => {
+          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -9451,7 +9479,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
   const { maxItems, minItems, title, validationMessages } = schema;
   const { getErrorMessageFunctions, onRefresh, onValueChange, updateComponent } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -9470,7 +9498,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
       options,
       required,
       title,
-      validationState,
+      validationAsyncState,
       performValidationAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       onValueChange
@@ -9646,7 +9674,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, booleanComponent), {
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
-        validateAsync(this.validationState, this.getLocalValue()).catch(() => {
+        validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
         });
       }
     });
@@ -9664,7 +9692,7 @@ var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -9675,7 +9703,7 @@ var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       value: value != null ? value : false,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh,
       performValidationAsync,
@@ -10210,13 +10238,44 @@ var createStatusListComponent = (statusListProps) => __spreadProps(__spreadValue
 });
 
 // src/revamp/domain/mappers/layout/statusListLayoutToComponent.ts
-var statusListLayoutToComponent = (uid, { control, items, margin = "md", title }) => createStatusListComponent({
+var statusListLayoutToComponent = (uid, { control, items, margin = "md", title }, { onAction, onLink }) => createStatusListComponent({
   uid,
   control,
-  items,
+  items: items.map((item) => {
+    var _a, _b, _c;
+    return __spreadProps(__spreadValues({}, item), {
+      href: (_c = (_b = (_a = item == null ? void 0 : item.callToAction) == null ? void 0 : _a.behavior) == null ? void 0 : _b.link) == null ? void 0 : _c.url,
+      callToAction: item.callToAction ? getItemCallToAction(item.callToAction, onAction, onLink) : void 0
+    });
+  }),
   margin,
   title
 });
+var getItemCallToAction = (callToAction, onAction, onLink) => {
+  const { accessibilityDescription, behavior, title } = callToAction;
+  if (behavior.link) {
+    const { url } = behavior.link;
+    return {
+      accessibilityDescription,
+      href: url,
+      title,
+      onClick: () => {
+        void onLink(url);
+      }
+    };
+  }
+  if (behavior.action) {
+    const { action } = behavior;
+    return {
+      accessibilityDescription,
+      title,
+      onClick: () => {
+        void onAction(action);
+      }
+    };
+  }
+  return void 0;
+};
 
 // src/revamp/domain/mappers/layout/listLayoutToComponent.ts
 var listLayoutToComponent = (uid, { control, items, margin = "md", title }) => createStatusListComponent({
@@ -10283,7 +10342,7 @@ var mapLayoutToComponent = (uid, layout, mapperProps) => {
     case "search":
       return searchLayoutToComponent(uid, layout, mapperProps);
     case "status-list":
-      return statusListLayoutToComponent(uid, layout);
+      return statusListLayoutToComponent(uid, layout, mapperProps);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -11165,10 +11224,29 @@ function LabelContentWithHelp({ text, help }) {
 
 // ../renderers/src/components/FieldInput.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function FieldInput({ id, children, label, error, description, help }) {
+function FieldInput({ id, children, label, validation, description, help }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components4.Field, { id, label: labelContent, hint: description, error, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_components4.Field,
+    {
+      id,
+      label: labelContent,
+      description,
+      message: validation == null ? void 0 : validation.message,
+      sentiment: mapStatusToSentiment(validation),
+      children
+    }
+  );
 }
+var mapStatusToSentiment = (validation) => {
+  if (validation) {
+    if (validation.status === "valid") {
+      return "positive";
+    }
+    return "negative";
+  }
+  return void 0;
+};
 var FieldInput_default = FieldInput;
 
 // ../renderers/src/BooleanInputRenderer.tsx
@@ -11177,9 +11255,27 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var BooleanInputRenderer = {
   canRenderType: "input-boolean",
   render: (props) => {
-    const _a = props, { id, control, label = "", description, help, error, type, value } = _a, rest = __objRest(_a, ["id", "control", "label", "description", "help", "error", "type", "value"]);
+    const _a = props, {
+      id,
+      control,
+      label = "",
+      description,
+      help,
+      type,
+      validationState,
+      value
+    } = _a, rest = __objRest(_a, [
+      "id",
+      "control",
+      "label",
+      "description",
+      "help",
+      "type",
+      "validationState",
+      "value"
+    ]);
     const checkboxProps = __spreadProps(__spreadValues({}, rest), { label, secondary: description, checked: value });
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldInput_default, { id, label: "", description: "", error, help, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components5.Checkbox, __spreadValues({ id }, checkboxProps)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldInput_default, { id, label: "", description: "", validation: validationState, help, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components5.Checkbox, __spreadValues({ id }, checkboxProps)) });
   }
 };
 var BooleanInputRenderer_default = BooleanInputRenderer;
@@ -11404,23 +11500,33 @@ var DateInputRenderer = {
       control,
       label,
       description,
-      error,
       type,
       help,
+      validationState,
       value: initialValue
     } = _a, rest = __objRest(_a, [
       "id",
       "control",
       "label",
       "description",
-      "error",
       "type",
       "help",
+      "validationState",
       "value"
     ]);
     const value = initialValue != null ? initialValue : "";
     const inputProps = __spreadProps(__spreadValues({}, rest), { value, id });
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VariableDateInput_default, { control, inputProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VariableDateInput_default, { control, inputProps })
+      }
+    );
   }
 };
 var DateInputRenderer_default = DateInputRenderer;
@@ -11708,23 +11814,33 @@ var import_jsx_runtime30 = require("react/jsx-runtime");
 var IntegerInputRenderer = {
   canRenderType: "input-integer",
   render: (props) => {
-    const _a = props, { id, label, error, description, help, type, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "error", "description", "help", "type", "value", "onChange"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_components14.Input,
-      __spreadValues({
+    const _a = props, { id, label, description, help, type, validationState, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "description", "help", "type", "validationState", "value", "onChange"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      FieldInput_default,
+      {
         id,
-        name: id,
-        type: "number",
-        step: "1",
-        pattern: "\\d+",
-        value: value != null ? value : "",
-        onChange: ({ target: { value: newValue } }) => {
-          const parsedValue = Number.parseInt(newValue, 10);
-          onChange(Number.isNaN(parsedValue) ? null : parsedValue);
-        },
-        onWheel
-      }, rest)
-    ) });
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_components14.Input,
+          __spreadValues({
+            id,
+            name: id,
+            type: "number",
+            step: "1",
+            pattern: "\\d+",
+            value: value != null ? value : "",
+            onChange: ({ target: { value: newValue } }) => {
+              const parsedValue = Number.parseInt(newValue, 10);
+              onChange(Number.isNaN(parsedValue) ? null : parsedValue);
+            },
+            onWheel
+          }, rest)
+        )
+      }
+    );
   }
 };
 var IntegerInputRenderer_default = IntegerInputRenderer;
@@ -11830,10 +11946,10 @@ function MultiSelectInputRendererComponent(props) {
     disabled,
     label,
     help,
-    error,
     options,
     placeholder,
     selectedIndices,
+    validationState,
     onSelect
   } = props;
   const mergedIndices = stagedIndices != null ? stagedIndices : selectedIndices;
@@ -11864,39 +11980,49 @@ function MultiSelectInputRendererComponent(props) {
     };
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components19.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_components19.SelectInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    FieldInput_default,
     {
       id,
-      items: options.map((option, index) => {
-        var _a, _b, _c;
-        return {
-          type: "option",
-          value: index,
-          filterMatchers: [
-            ...(_a = option.keywords) != null ? _a : [],
-            (_b = option.title) != null ? _b : "",
-            (_c = option.description) != null ? _c : ""
-          ],
-          disabled: option.disabled
-        };
-      }),
-      disabled,
-      placeholder,
-      value: mergedIndices,
-      renderValue,
-      multiple: true,
-      onChange: (values) => {
-        setStagedIndices(values);
-      },
-      onClose: () => {
-        if (stagedIndices) {
-          onSelect(stagedIndices);
-          setStagedIndices(void 0);
+      label,
+      help,
+      description,
+      validation: validationState,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        import_components19.SelectInput,
+        {
+          id,
+          items: options.map((option, index) => {
+            var _a, _b, _c;
+            return {
+              type: "option",
+              value: index,
+              filterMatchers: [
+                ...(_a = option.keywords) != null ? _a : [],
+                (_b = option.title) != null ? _b : "",
+                (_c = option.description) != null ? _c : ""
+              ],
+              disabled: option.disabled
+            };
+          }),
+          disabled,
+          placeholder,
+          value: mergedIndices,
+          renderValue,
+          multiple: true,
+          onChange: (values) => {
+            setStagedIndices(values);
+          },
+          onClose: () => {
+            if (stagedIndices) {
+              onSelect(stagedIndices);
+              setStagedIndices(void 0);
+            }
+          }
         }
-      }
+      )
     }
-  ) });
+  );
 }
 var MultiSelectInputRenderer_default = MultiSelectInputRenderer;
 
@@ -11912,8 +12038,8 @@ function UploadFieldInput({
   children,
   label,
   description,
-  error,
-  help
+  help,
+  validation
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
@@ -11921,12 +12047,12 @@ function UploadFieldInput({
     "div",
     {
       className: (0, import_classnames3.default)("form-group d-block", {
-        "has-error": !!error
+        "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { htmlFor: id, className: "control-label", children: labelContent }),
         children,
-        error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components20.InlineAlert, { type: "negative", id: descriptionId, children: error })
+        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components20.InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
       ]
     }
   );
@@ -11969,10 +12095,10 @@ var MultiUploadInputRenderer = {
       label,
       description,
       disabled,
-      error,
       maxSize,
       maxItems,
       uploadLabel,
+      validationState,
       onUpload,
       onDelete
     } = props;
@@ -11985,22 +12111,32 @@ var MultiUploadInputRenderer = {
     };
     const onDeleteFile = async (fileId) => onDelete(String(fileId));
     const descriptionId = description ? `${id}-description` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(UploadFieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_components21.UploadInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      UploadFieldInput_default,
       {
         id,
-        "aria-describedby": descriptionId,
+        label,
         description,
-        disabled,
-        fileTypes: getAcceptsString(accepts),
-        maxFiles: maxItems,
-        multiple: true,
-        sizeLimit: maxSize ? toKilobytes(maxSize) : void 0,
-        uploadButtonTitle: uploadLabel,
-        onDeleteFile,
-        onUploadFile
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          import_components21.UploadInput,
+          {
+            id,
+            "aria-describedby": descriptionId,
+            description,
+            disabled,
+            fileTypes: getAcceptsString(accepts),
+            maxFiles: maxItems,
+            multiple: true,
+            sizeLimit: maxSize ? toKilobytes(maxSize) : void 0,
+            uploadButtonTitle: uploadLabel,
+            onDeleteFile,
+            onUploadFile
+          }
+        )
       }
-    ) });
+    );
   }
 };
 var MultiUploadInputRenderer_default = MultiUploadInputRenderer;
@@ -12011,21 +12147,31 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 var NumberInputRenderer = {
   canRenderType: "input-number",
   render: (props) => {
-    const _a = props, { id, label, error, description, help, type, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "error", "description", "help", "type", "value", "onChange"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_components22.Input,
-      __spreadValues({
+    const _a = props, { id, label, description, help, type, validationState, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "description", "help", "type", "validationState", "value", "onChange"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      FieldInput_default,
+      {
         id,
-        name: id,
-        type: "number",
-        value: value != null ? value : "",
-        onChange: ({ target: { value: newValue } }) => {
-          const parsedValue = Number.parseFloat(newValue);
-          onChange(Number.isNaN(parsedValue) ? null : parsedValue);
-        },
-        onWheel
-      }, rest)
-    ) });
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_components22.Input,
+          __spreadValues({
+            id,
+            name: id,
+            type: "number",
+            value: value != null ? value : "",
+            onChange: ({ target: { value: newValue } }) => {
+              const parsedValue = Number.parseFloat(newValue);
+              onChange(Number.isNaN(parsedValue) ? null : parsedValue);
+            },
+            onWheel
+          }, rest)
+        )
+      }
+    );
   }
 };
 var NumberInputRenderer_default = NumberInputRenderer;
@@ -12145,9 +12291,9 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
-    error,
     items,
     title,
+    validationState,
     onEdit,
     onAdd,
     onSave,
@@ -12183,7 +12329,7 @@ function Repeatable(props) {
       "div",
       {
         className: (0, import_classnames5.default)("form-group", {
-          "has-error": error
+          "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
         }),
         children: [
           items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
@@ -12196,7 +12342,7 @@ function Repeatable(props) {
               onClick: () => onAddItem()
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.InlineAlert, { type: "negative", children: error })
+          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.InlineAlert, { type: "negative", children: validationState.message })
         ]
       }
     ),
@@ -12235,7 +12381,7 @@ function ItemSummaryOption({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-var import_components26 = require("@transferwise/components");
+var import_components27 = require("@transferwise/components");
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
 var import_react_intl16 = require("react-intl");
@@ -12261,22 +12407,26 @@ var generic_error_messages_default2 = (0, import_react_intl15.defineMessages)({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
+var import_components26 = require("@transferwise/components");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function ErrorResult({ state }) {
   const intl = (0, import_react_intl16.useIntl)();
+  const buttonVisualProps = {
+    priority: "tertiary",
+    size: "sm",
+    style: { marginTop: "-2px", padding: "0", width: "auto", display: "inline" }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default2.genericError),
     "\xA0",
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      "a",
-      {
-        href: "/",
-        onClick: (e) => {
-          e.preventDefault();
+      import_components26.Button,
+      __spreadProps(__spreadValues({}, buttonVisualProps), {
+        onClick: () => {
           state.onRetry();
         },
         children: intl.formatMessage(generic_error_messages_default2.retry)
-      }
+      })
     )
   ] });
 }
@@ -12296,8 +12446,8 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = (0, import_react14.useState)(false);
   const trackEvent = useTrackEvent();
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_components26.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      import_components27.Input,
       {
         id,
         name: id,
@@ -12333,16 +12483,16 @@ function SearchResultContent({
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components26.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components27.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults({
   state
 }) {
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components26.NavigationOptionsList, { children: state.results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components27.NavigationOptionsList, { children: state.results.map((result) => {
     const { icon, image } = result;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_components26.NavigationOption,
+      import_components27.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -12363,7 +12513,7 @@ function SearchResults({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
-var import_components27 = require("@transferwise/components");
+var import_components28 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_react15 = require("react");
 var import_react_intl17 = require("react-intl");
@@ -12379,8 +12529,8 @@ function InlineSearchRenderer({
   const [hasSearched, setHasSearched] = (0, import_react15.useState)(false);
   const trackEvent = useTrackEvent();
   const intl = (0, import_react_intl17.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_components27.Typeahead,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_components28.Typeahead,
     {
       id: "typeahead-input-id",
       intl,
@@ -12426,7 +12576,7 @@ function mapResultToTypeaheadOption(result) {
 }
 function TypeaheadFooter({ state, isLoading }) {
   if (state.type === "noResults") {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components27.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components28.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ErrorResult, { state }) });
@@ -12447,7 +12597,7 @@ var SearchRenderer = {
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
-var import_components28 = require("@transferwise/components");
+var import_components29 = require("@transferwise/components");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function RadioInputRendererComponent(props) {
   const {
@@ -12455,36 +12605,46 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      import_components28.RadioGroup,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      FieldInput_default,
       {
-        name: id,
-        radios: options.map((option, index) => ({
-          label: option.title,
-          value: index,
-          secondary: option.description,
-          disabled: option.disabled || disabled,
-          avatar: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionMedia, { icon: option.icon, image: option.image })
-        })),
-        selectedValue: selectedIndex != null ? selectedIndex : void 0,
-        onChange: onSelect
-      },
-      `${id}-${selectedIndex}`
-    ) }) }),
+        id,
+        label,
+        help,
+        description,
+        validation: validationState,
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_components29.RadioGroup,
+          {
+            name: id,
+            radios: options.map((option, index) => ({
+              label: option.title,
+              value: index,
+              secondary: option.description,
+              disabled: option.disabled || disabled,
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+            })),
+            selectedValue: selectedIndex != null ? selectedIndex : void 0,
+            onChange: onSelect
+          },
+          `${id}-${selectedIndex}`
+        ) })
+      }
+    ),
     children
   ] });
 }
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
-var import_components29 = require("@transferwise/components");
+var import_components30 = require("@transferwise/components");
 var import_react16 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
@@ -12493,11 +12653,11 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   (0, import_react16.useEffect)(() => {
@@ -12506,41 +12666,51 @@ function TabInputRendererComponent(props) {
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      import_components29.Tabs,
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      FieldInput_default,
       {
-        name: id,
-        selected: selectedIndex != null ? selectedIndex : 0,
-        tabs: options.map((option) => ({
-          title: option.title,
-          // if we pass null, we get some props-types console errors
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          content: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {}),
-          disabled: option.disabled || disabled
-        })),
-        onTabSelect: onSelect
+        id,
+        label,
+        help,
+        description,
+        validation: validationState,
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_components30.Tabs,
+          {
+            name: id,
+            selected: selectedIndex != null ? selectedIndex : 0,
+            tabs: options.map((option) => ({
+              title: option.title,
+              // if we pass null, we get some props-types console errors
+              // eslint-disable-next-line react/jsx-no-useless-fragment
+              content: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {}),
+              disabled: option.disabled || disabled
+            })),
+            onTabSelect: onSelect
+          }
+        )
       }
-    ) }),
+    ),
     children
   ] });
 }
 var isValidIndex = (index, options) => index !== null && index >= 0 && index < options;
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
-var import_components31 = require("@transferwise/components");
+var import_components32 = require("@transferwise/components");
 
 // ../renderers/src/SelectInputRenderer/SelectTriggerMedia.tsx
-var import_components30 = require("@transferwise/components");
+var import_components31 = require("@transferwise/components");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function SelectTriggerMedia({ icon, image }) {
   if (image == null ? void 0 : image.url) {
     return null;
   }
   if (icon && "name" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components30.Avatar, { type: import_components30.AvatarType.ICON, size: 24, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components31.Avatar, { type: import_components31.AvatarType.ICON, size: 24, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicIcon_default, { name: icon.name }) });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components30.Avatar, { type: import_components30.AvatarType.ICON, size: 24, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components31.Avatar, { type: import_components31.AvatarType.ICON, size: 24, children: icon.text });
   }
   return null;
 }
@@ -12553,13 +12723,13 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     placeholder,
     required,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   const items = options.map(
@@ -12587,54 +12757,84 @@ function SelectInputRendererComponent(props) {
       description: option.description,
       icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OptionMedia, { icon: option.icon, image: option.image })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components31.SelectInputOptionContent, __spreadValues({}, contentProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components32.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_components31.SelectInput,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      FieldInput_default,
       {
-        name: id,
-        placeholder,
-        items,
-        disabled,
-        value: selectedIndex,
-        renderValue,
-        filterable: items.length >= 8,
-        onChange: onSelect,
-        onClear: required ? void 0 : () => onSelect(null)
+        id,
+        label,
+        help,
+        description,
+        validation: validationState,
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_components32.SelectInput,
+          {
+            name: id,
+            placeholder,
+            items,
+            disabled,
+            value: selectedIndex,
+            renderValue,
+            filterable: items.length >= 8,
+            onChange: onSelect,
+            onClear: required ? void 0 : () => onSelect(null)
+          }
+        )
       }
-    ) }),
+    ),
     children
   ] });
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
 var import_react17 = require("react");
-var import_components32 = require("@transferwise/components");
+var import_components33 = require("@transferwise/components");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
-  const { id, children, description, error, help, label, options, selectedIndex, onSelect } = props;
+  const {
+    id,
+    children,
+    description,
+    help,
+    label,
+    options,
+    selectedIndex,
+    validationState,
+    onSelect
+  } = props;
   (0, import_react17.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_components32.SegmentedControl,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      FieldInput_default,
       {
-        name: `${id}-segmented-control`,
-        value: String(selectedIndex),
-        mode: "view",
-        segments: options.map((option, index) => ({
-          id: String(index),
-          value: String(index),
-          label: option.title,
-          controls: `${id}-children`
-        })),
-        onChange: (value) => onSelect(Number(value))
+        id,
+        label,
+        help,
+        description,
+        validation: validationState,
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_components33.SegmentedControl,
+          {
+            name: `${id}-segmented-control`,
+            value: String(selectedIndex),
+            mode: "view",
+            segments: options.map((option, index) => ({
+              id: String(index),
+              value: String(index),
+              label: option.title,
+              controls: `${id}-children`
+            })),
+            onChange: (value) => onSelect(Number(value))
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { id: `${id}-children`, children })
   ] });
 }
@@ -12661,21 +12861,28 @@ var SelectInputRenderer = {
 var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
-var import_components33 = require("@transferwise/components");
+var import_components34 = require("@transferwise/components");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var StatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components33.Header, { title }) : null,
-    items.map(({ description, icon, status, title: itemTitle }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_components33.Summary,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components34.Header, { title }) : null,
+    items.map(({ callToAction, description, icon, status, title: itemTitle }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      import_components34.Summary,
       {
         title: itemTitle,
         description,
         icon: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DynamicIcon_default, { name: icon.name }) : null,
-        status: mapStatus(status)
+        status: mapStatus(status),
+        action: callToAction ? {
+          "aria-label": callToAction.accessibilityDescription,
+          href: callToAction.href,
+          text: callToAction.title,
+          target: callToAction.href ? "_blank" : void 0,
+          onClick: callToAction.href ? void 0 : callToAction.onClick
+        } : void 0
       },
-      `${title}/${description || ""}`
+      `${itemTitle}/${description || ""}`
     ))
   ] })
 };
@@ -12688,7 +12895,7 @@ var mapStatus = (status) => {
 };
 
 // ../renderers/src/components/VariableTextInput.tsx
-var import_components34 = require("@transferwise/components");
+var import_components35 = require("@transferwise/components");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function VariableTextInput({
   control,
@@ -12714,37 +12921,37 @@ function TextInput(_a) {
   if (typeof displayFormat === "string") {
     const inputProps = __spreadValues({ id, name: id, className: "form-control" }, rest);
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      import_components34.InputWithDisplayFormat,
+      import_components35.InputWithDisplayFormat,
       __spreadValues({
         displayPattern: displayFormat,
         onChange: (newValue) => onChange(newValue)
       }, inputProps)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components34.Input, __spreadValues({ id, name: id, onChange: (e) => onChange(e.target.value) }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components35.Input, __spreadValues({ id, name: id, onChange: (e) => onChange(e.target.value) }, rest));
 }
 function TextAreaInput(_a) {
   var _b = _a, { id, displayFormat, onChange } = _b, rest = __objRest(_b, ["id", "displayFormat", "onChange"]);
   const textAreaProps = __spreadValues({ id, name: id }, rest);
   return typeof displayFormat === "string" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_components34.TextareaWithDisplayFormat,
+    import_components35.TextareaWithDisplayFormat,
     __spreadValues({
       displayPattern: displayFormat,
       onChange: (newValue) => onChange(newValue)
     }, textAreaProps)
-  ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components34.TextArea, __spreadValues({ onChange: (e) => onChange(e.target.value) }, textAreaProps));
+  ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components35.TextArea, __spreadValues({ onChange: (e) => onChange(e.target.value) }, textAreaProps));
 }
 function NumericInput(_a) {
   var _b = _a, { id, displayFormat, onChange } = _b, rest = __objRest(_b, ["id", "displayFormat", "onChange"]);
   const numericProps = __spreadValues({ id, name: id, onWheel }, rest);
   return typeof displayFormat === "string" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_components34.InputWithDisplayFormat,
+    import_components35.InputWithDisplayFormat,
     __spreadValues({
       displayPattern: displayFormat,
       onChange: (newValue) => onChange(numericValueOrNull(newValue))
     }, numericProps)
   ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_components34.Input,
+    import_components35.Input,
     __spreadValues({
       onChange: ({ target: { value: newValue } }) => onChange(numericValueOrNull(newValue))
     }, numericProps)
@@ -12752,7 +12959,7 @@ function NumericInput(_a) {
 }
 function PhoneNumberInput(_a) {
   var _b = _a, { value } = _b, rest = __objRest(_b, ["value"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components34.PhoneNumberInput, __spreadValues({ initialValue: value }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components35.PhoneNumberInput, __spreadValues({ initialValue: value }, rest));
 }
 var VariableTextInput_default = VariableTextInput;
 
@@ -12771,6 +12978,7 @@ var TextInputRenderer = {
       maxLength,
       minLength,
       type,
+      validationState,
       value: initialValue
     } = _a, rest = __objRest(_a, [
       "id",
@@ -12782,22 +12990,33 @@ var TextInputRenderer = {
       "maxLength",
       "minLength",
       "type",
+      "validationState",
       "value"
     ]);
     const value = initialValue != null ? initialValue : "";
     const inputProps = __spreadProps(__spreadValues({}, rest), { value, id });
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VariableTextInput_default, { control, inputProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VariableTextInput_default, { control, inputProps })
+      }
+    );
   }
 };
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_components35 = require("@transferwise/components");
+var import_components36 = require("@transferwise/components");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var UploadInputRenderer = {
   canRenderType: "input-upload",
   render: (props) => {
-    const { id, accepts, error, label, description, disabled, maxSize, onUpload } = props;
+    const { id, accepts, label, description, disabled, maxSize, validationState, onUpload } = props;
     const onUploadFile = async (formData) => {
       const file = formData.get("file");
       return onUpload(file).then(() => ({
@@ -12809,19 +13028,28 @@ var UploadInputRenderer = {
     };
     return (
       // We don't pass help here as there is no sensible place to display it
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(UploadFieldInput_default, { id, label: void 0, description: void 0, error, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        import_components35.UploadInput,
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        UploadFieldInput_default,
         {
           id,
-          description,
-          disabled,
-          fileTypes: getAcceptsString(accepts),
-          sizeLimit: maxSize ? toKilobytes(maxSize) : void 0,
-          uploadButtonTitle: label,
-          onDeleteFile,
-          onUploadFile
+          label: void 0,
+          description: void 0,
+          validation: validationState,
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_components36.UploadInput,
+            {
+              id,
+              description,
+              disabled,
+              fileTypes: getAcceptsString(accepts),
+              sizeLimit: maxSize ? toKilobytes(maxSize) : void 0,
+              uploadButtonTitle: label,
+              onDeleteFile,
+              onUploadFile
+            }
+          )
         }
-      ) })
+      )
     );
   }
 };
@@ -12836,10 +13064,10 @@ var LargeUploadRenderer = {
       label,
       description,
       disabled,
-      error,
       help,
       maxSize,
       type,
+      validationState,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -12848,10 +13076,10 @@ var LargeUploadRenderer = {
       "label",
       "description",
       "disabled",
-      "error",
       "help",
       "maxSize",
       "type",
+      "validationState",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id });
@@ -12864,21 +13092,31 @@ var LargeUploadRenderer = {
         throw e;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      import_components35.Upload,
-      __spreadProps(__spreadValues({}, uploadProps), {
-        usAccept: getAcceptsString(accepts),
-        usDisabled: disabled,
-        onSuccess: onUploadFile,
-        onFailure: async () => onUpload(null),
-        onCancel: async () => onUpload(null)
-      })
-    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          import_components36.Upload,
+          __spreadProps(__spreadValues({}, uploadProps), {
+            usAccept: getAcceptsString(accepts),
+            usDisabled: disabled,
+            onSuccess: onUploadFile,
+            onFailure: async () => onUpload(null),
+            onCancel: async () => onUpload(null)
+          })
+        )
+      }
+    );
   }
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-var import_components36 = require("@transferwise/components");
+var import_components37 = require("@transferwise/components");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
@@ -12892,9 +13130,9 @@ var ReviewRenderer = {
       }
     } : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components36.Header, { title: title != null ? title : "", action }),
+      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components37.Header, { title: title != null ? title : "", action }),
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-        import_components36.DefinitionList,
+        import_components37.DefinitionList,
         {
           layout: orientation,
           definitions: fields.map(({ label, value, help }, index) => ({
@@ -12970,7 +13208,7 @@ var external_confirmation_messages_default = (0, import_react_intl18.defineMessa
 });
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_components37 = require("@transferwise/components");
+var import_components38 = require("@transferwise/components");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ExternalConfirmationDialog({
   external,
@@ -12979,10 +13217,10 @@ function ExternalConfirmationDialog({
   const { formatMessage } = (0, import_react_intl19.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components37.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components38.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        import_components37.Button,
+        import_components38.Button,
         {
           block: true,
           className: "m-b-2",
@@ -12995,7 +13233,7 @@ function ExternalConfirmationDialog({
           children: formatMessage(external_confirmation_messages_default.open)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components37.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components38.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
     ] }) })
   ] }) });
 }
@@ -13024,23 +13262,21 @@ function useExternal(url) {
 }
 
 // ../renderers/src/step/BackButton.tsx
-var import_components38 = require("@transferwise/components");
+var import_components39 = require("@transferwise/components");
 var import_icons3 = require("@transferwise/icons");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "m-b-2", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    "a",
+    "button",
     {
-      href: "/",
+      type: "button",
       className: "df-back-btn",
+      title,
       "aria-label": title,
-      onClick: (event) => {
-        event.preventDefault();
-        onClick();
-      },
+      onClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_components38.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_components39.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -13048,7 +13284,7 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components39 = require("@transferwise/components");
+var import_components40 = require("@transferwise/components");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
@@ -13064,10 +13300,10 @@ 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 || description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components39.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components40.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
       description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components39.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components40.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -14518,10 +14754,10 @@ var import_classnames15 = __toESM(require_classnames());
 var import_react53 = require("react");
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-var import_components41 = require("@transferwise/components");
+var import_components42 = require("@transferwise/components");
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
-var import_components40 = require("@transferwise/components");
+var import_components41 = require("@transferwise/components");
 
 // src/legacy/layout/icon/FlagIcon.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -14572,10 +14808,10 @@ var DynamicIcon_default2 = DynamicIcon2;
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var getNavigationOptionMedia = ({ icon, image }) => {
   if (icon == null ? void 0 : icon.name) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components40.Avatar, { type: import_components40.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicIcon_default2, { type: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components41.Avatar, { type: import_components41.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicIcon_default2, { type: icon.name }) });
   }
   if (icon == null ? void 0 : icon.text) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components40.Avatar, { type: import_components40.AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components41.Avatar, { type: import_components41.AvatarType.INITIALS, children: icon.text });
   }
   if (image == null ? void 0 : image.url) {
     const { url, text } = image;
@@ -14619,7 +14855,7 @@ var import_jsx_runtime71 = require("react/jsx-runtime");
 var DynamicAlert = ({ component: alert }) => {
   const { context, markdown, margin } = alert;
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    import_components41.Alert,
+    import_components42.Alert,
     {
       type: mapContextToAlertType(legacy_mapContext(context)),
       className: getMargin2(margin),
@@ -14722,7 +14958,7 @@ var getBoxWidthClasses = (component) => {
 var DynamicBox_default = DynamicBox;
 
 // src/legacy/layout/button/DynamicButton.tsx
-var import_components42 = require("@transferwise/components");
+var import_components43 = require("@transferwise/components");
 
 // src/legacy/layout/button/utils.ts
 var priorities = {
@@ -14794,7 +15030,7 @@ function DynamicButtonWithoutBehavior(props) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    import_components42.Button,
+    import_components43.Button,
     {
       size: getButtonSize(component.size),
       type: priority === "tertiary" ? void 0 : type,
@@ -14826,7 +15062,7 @@ function DynamicButtonWithBehavior(props) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    import_components42.Button,
+    import_components43.Button,
     {
       size: getButtonSize(component.size),
       type: priority === "tertiary" ? void 0 : type,
@@ -14894,15 +15130,15 @@ var getWidth = (bias) => {
 var DynamicColumns_default = DynamicColumns;
 
 // src/legacy/layout/decision/DynamicDecision.tsx
-var import_components43 = require("@transferwise/components");
+var import_components44 = require("@transferwise/components");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
   const { margin, options, title } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: getMargin2(margin), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components43.Header, { as: "h2", title }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components43.NavigationOptionsList, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-      import_components43.NavigationOption,
+    title && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components44.Header, { as: "h2", title }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components44.NavigationOptionsList, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      import_components44.NavigationOption,
       {
         title: option.title,
         content: option.description,
@@ -14928,7 +15164,7 @@ var DynamicDivider = ({ component }) => {
 var DynamicDivider_default = DynamicDivider;
 
 // src/legacy/layout/external/DynamicExternal.tsx
-var import_components44 = require("@transferwise/components");
+var import_components45 = require("@transferwise/components");
 var import_react32 = require("react");
 var import_react_intl21 = require("react-intl");
 
@@ -14959,9 +15195,9 @@ var DynamicExternal = ({ component, onAction }) => {
   }) : void 0;
   useExternalStepPolling(pollingConfiguration, onAction);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components44.Loader, { size: import_components44.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components45.Loader, { size: import_components45.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components44.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components45.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
   ] });
 };
 var DynamicExternal_default = DynamicExternal;
@@ -14970,7 +15206,7 @@ var DynamicExternal_default = DynamicExternal;
 var import_react46 = require("react");
 
 // src/legacy/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
-var import_components45 = require("@transferwise/components");
+var import_components46 = require("@transferwise/components");
 var import_classnames6 = __toESM(require_classnames());
 var import_react33 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
@@ -14982,7 +15218,7 @@ var getSchemaColumnClasses = (width) => ({
   "col-sm-4": width === "sm"
 });
 function AllOfSchema(props) {
-  const { disabled = false } = props;
+  const { disabled = false, hideTitle = false } = props;
   const onChangeModelIndex = (index, onChangeProps) => {
     const modelSchema = props.schema.allOf[index];
     models[index] = getValidObjectModelParts(onChangeProps.model, modelSchema) || {};
@@ -14991,7 +15227,7 @@ function AllOfSchema(props) {
   };
   const [models, setModels] = (0, import_react33.useState)(splitModel(props.model, props.schema.allOf));
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-    props.schema.title && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components45.Header, { title: props.schema.title }),
+    props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components46.Header, { title: props.schema.title }),
     props.schema.description && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { children: props.schema.description }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -15016,12 +15252,12 @@ function AllOfSchema(props) {
 var AllOfSchema_default = AllOfSchema;
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-var import_components47 = require("@transferwise/components");
+var import_components48 = require("@transferwise/components");
 var import_classnames7 = __toESM(require_classnames());
 var import_react34 = require("react");
 
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
-var import_components46 = require("@transferwise/components");
+var import_components47 = require("@transferwise/components");
 var import_formatting2 = require("@transferwise/formatting");
 var import_react_intl22 = require("react-intl");
 var import_jsx_runtime79 = require("react/jsx-runtime");
@@ -15034,9 +15270,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_runtime79.jsxs)("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components46.InlineAlert, { type: "error", children: errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components46.InlineAlert, { type: "error", children: validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: mergedValidationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_components46.InlineAlert, { type: "info", children: [
+    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.InlineAlert, { type: "error", children: errors }) : null,
+    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.InlineAlert, { type: "error", children: validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: mergedValidationMessages[validation] }, validation)) }) : null,
+    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_components47.InlineAlert, { type: "info", children: [
       isDescriptionVisible && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: props.schema.description }),
       hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: props.infoMessage })
     ] })
@@ -15221,7 +15457,7 @@ function MultipleFileUploadSchema(props) {
   const feedbackId = `${uid}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: (0, import_classnames7.default)("form-group", { "has-error": showError }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components47.UploadInput, __spreadValues({}, uploadInputProps)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components48.UploadInput, __spreadValues({}, uploadInputProps)) }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       ControlFeedback_default,
       {
@@ -15244,7 +15480,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_components47.Status.SUCCEEDED } : null).filter((item) => item !== null);
+  return fileIds.map((id) => isValidId(id) ? { id, status: import_components48.Status.SUCCEEDED } : null).filter((item) => item !== null);
 }
 function isValidId(id) {
   return isNumber3(id) || isString2(id);
@@ -15255,13 +15491,13 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multiSelectSchema/MultiSelectSchema.tsx
-var import_components49 = require("@transferwise/components");
+var import_components50 = require("@transferwise/components");
 var import_classnames8 = __toESM(require_classnames());
 var import_react35 = require("react");
 var import_react_intl26 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
-var import_components48 = require("@transferwise/components");
+var import_components49 = require("@transferwise/components");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
@@ -15313,17 +15549,17 @@ var getIconPropertyForSelectOption = (icon) => {
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components48.Avatar, { type: import_components48.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("img", { src: image.url, alt: "" }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components49.Avatar, { type: import_components49.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("img", { src: image.url, alt: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components48.Avatar, { type: import_components48.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DynamicIcon_default2, { type: icon.name }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components49.Avatar, { type: import_components49.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DynamicIcon_default2, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components48.Avatar, { type: import_components48.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components49.Avatar, { type: import_components49.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -15417,7 +15653,7 @@ function MultiSelectSchema({
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_classnames8.default)("d-flex flex-column", formGroupClasses), children: [
     schema.title ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("label", { htmlFor: id, children: schema.title }) : void 0,
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      import_components49.SelectInput,
+      import_components50.SelectInput,
       {
         id,
         multiple: true,
@@ -15442,7 +15678,7 @@ function MultiSelectSchema({
           if (withinTrigger) {
             return selected && index === selected[0] ? getFormattedMessage() : void 0;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components49.SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
+          return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components50.SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
         },
         onChange: broadcastModelChange
       }
@@ -15472,17 +15708,17 @@ var getInitialModelIndices2 = (model, options) => {
 };
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
-var import_components51 = require("@transferwise/components");
+var import_components52 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
 var import_react37 = require("react");
 var import_react_intl29 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
-var import_components50 = require("@transferwise/components");
+var import_components51 = require("@transferwise/components");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 function ItemSummaryOption2({ item, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-    import_components50.NavigationOption,
+    import_components51.NavigationOption,
     {
       media: getNavigationOptionMedia(item),
       title: item.title,
@@ -15853,7 +16089,7 @@ function RepeatableSchema({
     "has-error": (_a = errors && !isEmpty(errors)) != null ? _a : submitted && validations.length
   };
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { id, className: (0, import_classnames9.default)(formGroupClasses), children: [
-    schema.title && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_components51.Header, { title: schema.title }),
+    schema.title && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_components52.Header, { title: schema.title }),
     itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       ItemSummaryOption2,
       {
@@ -15863,7 +16099,7 @@ function RepeatableSchema({
       JSON.stringify(itemSummary)
     )),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-      import_components51.NavigationOption,
+      import_components52.NavigationOption,
       {
         media: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_icons4.Plus, {}),
         title: schema.addItemTitle || formatMessage(repeatable_messages_default2.addItemTitle),
@@ -15872,7 +16108,7 @@ function RepeatableSchema({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-      import_components51.Modal,
+      import_components52.Modal,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? schema.addItemTitle : schema.editItemTitle) || formatMessage(repeatable_messages_default2.addItemTitle),
@@ -15961,7 +16197,7 @@ var ArraySchema = (props) => {
 var ArraySchema_default = ArraySchema;
 
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
-var import_components52 = require("@transferwise/components");
+var import_components53 = require("@transferwise/components");
 var import_classnames10 = __toESM(require_classnames());
 var import_react38 = require("react");
 var import_jsx_runtime88 = require("react/jsx-runtime");
@@ -16004,7 +16240,7 @@ function ObjectSchema(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("fieldset", { children: [
-      props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_components52.Header, { title: props.schema.title, as: "legend" }),
+      props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_components53.Header, { title: props.schema.title, as: "legend" }),
       props.schema.description && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("p", { children: [
         " ",
         props.schema.description,
@@ -16038,12 +16274,12 @@ function ObjectSchema(props) {
 var ObjectSchema_default = ObjectSchema;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-var import_components55 = require("@transferwise/components");
+var import_components56 = require("@transferwise/components");
 var import_classnames11 = __toESM(require_classnames());
 var import_react41 = require("react");
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
-var import_components53 = require("@transferwise/components");
+var import_components54 = require("@transferwise/components");
 var import_react_intl31 = require("react-intl");
 
 // src/common/messages/help.messages.ts
@@ -16061,10 +16297,10 @@ var import_jsx_runtime89 = require("react/jsx-runtime");
 function Help2(props) {
   const intl = (0, import_react_intl31.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-    import_components53.Info,
+    import_components54.Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_components53.Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_components54.Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default2.helpAria)
@@ -16078,7 +16314,7 @@ var import_react40 = require("react");
 var import_react_intl32 = require("react-intl");
 
 // src/legacy/formControl/FormControl.tsx
-var import_components54 = require("@transferwise/components");
+var import_components55 = require("@transferwise/components");
 var import_react39 = require("react");
 
 // src/legacy/formControl/utils/value-utils.ts
@@ -16356,7 +16592,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
     switch (type) {
       case FormControlType.RADIO:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.RadioGroup,
+          import_components55.RadioGroup,
           {
             radios: options.map(this.mapOption),
             name,
@@ -16372,7 +16608,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         );
       case FormControlType.CHECKBOX:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.Checkbox,
+          import_components55.Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
@@ -16390,7 +16626,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         const items = options;
         const selected = this.getSelectedOption(options);
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "d-flex flex-column", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.SelectInput,
+          import_components55.SelectInput,
           {
             id,
             UNSAFE_triggerButtonProps: {
@@ -16406,7 +16642,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
             })),
             value: selected != null ? selected : null,
             renderValue: ({ hideIconInTrigger, icon, label: label2, note, secondary }, withinTrigger) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-              import_components54.SelectInputOptionContent,
+              import_components55.SelectInputOptionContent,
               {
                 title: label2,
                 note: withinTrigger ? note != null ? note : secondary : note,
@@ -16435,7 +16671,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       }
       case FormControlType.TAB:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.Tabs,
+          import_components55.Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
@@ -16520,7 +16756,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       case FormControlType.DATE:
       case FormControlType.DATETIME:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.DateInput,
+          import_components55.DateInput,
           {
             "aria-labelledby": labelledBy,
             dayAutoComplete: this.getAutocompleteValue({ suffix: "-day" }),
@@ -16537,7 +16773,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         );
       case FormControlType.DATELOOKUP: {
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.DateLookup,
+          import_components55.DateLookup,
           {
             value: getSafeDateStringValue(value),
             min: minDate,
@@ -16555,7 +16791,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       }
       case FormControlType.TEL:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.PhoneNumberInput,
+          import_components55.PhoneNumberInput,
           {
             disabled,
             countryCode,
@@ -16587,7 +16823,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-            import_components54.TextareaWithDisplayFormat,
+            import_components55.TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, textareaProps), {
@@ -16606,7 +16842,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       case FormControlType.FILE:
       case FormControlType.UPLOAD: {
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components54.Upload,
+          import_components55.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept: uploadProps.usAccept || "*",
             usDisabled: uploadProps.usDisabled || disabled,
@@ -16643,7 +16879,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-            import_components54.InputWithDisplayFormat,
+            import_components55.InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, inputProps), {
@@ -16983,7 +17219,7 @@ function getTitleAndHelp(schema, forId, labelId) {
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_components55.Header, { title: (_a = schema.title) != null ? _a : "" }) });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_components56.Header, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -17021,7 +17257,7 @@ var import_react43 = require("react");
 var import_react_intl33 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
-var import_components56 = require("@transferwise/components");
+var import_components57 = require("@transferwise/components");
 var import_react42 = require("react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 function UploadInputAdapter(props) {
@@ -17039,7 +17275,7 @@ function UploadInputAdapter(props) {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react42.useMemo)(() => fileId ? [{ id: fileId, status: import_components56.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react42.useMemo)(() => fileId ? [{ id: fileId, status: import_components57.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(String(httpOptions.url), {
@@ -17059,7 +17295,7 @@ function UploadInputAdapter(props) {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-    import_components56.UploadInput,
+    import_components57.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -17194,7 +17430,7 @@ var getSelectionFromModel = (schema, model) => {
 };
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
-var import_components57 = require("@transferwise/components");
+var import_components58 = require("@transferwise/components");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
@@ -17206,12 +17442,12 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_components57.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_components58.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
 };
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
-var import_components58 = require("@transferwise/components");
+var import_components59 = require("@transferwise/components");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 function PromotedOneOfRadioControl(props) {
   var _a, _b;
@@ -17232,7 +17468,7 @@ function PromotedOneOfRadioControl(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "form-group", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-      import_components58.RadioGroup,
+      import_components59.RadioGroup,
       {
         name: "promoted-selection",
         selectedValue: selection,
@@ -17323,7 +17559,7 @@ function getOtherOneOf(schema) {
 var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_components59 = require("@transferwise/components");
+var import_components60 = require("@transferwise/components");
 var import_react_intl35 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.ts
@@ -17347,7 +17583,7 @@ function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
   const { formatMessage } = (0, import_react_intl35.useIntl)();
   const value = getValueForSchema({ schema, model, formatMessage });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_components59.DefinitionList, { layout: import_components59.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_components60.DefinitionList, { layout: import_components60.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -17571,7 +17807,7 @@ function DynamicForm({
 var DynamicForm_default = DynamicForm;
 
 // src/legacy/layout/heading/DynamicHeading.tsx
-var import_components60 = require("@transferwise/components");
+var import_components61 = require("@transferwise/components");
 var import_classnames13 = __toESM(require_classnames());
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
@@ -17598,30 +17834,30 @@ var DisplayHeading2 = ({ size, text, classes }) => {
   switch (size) {
     case "xs":
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components60.Display, { type: "display-small", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Display, { type: "display-small", className: classes, children: text });
     case "xl":
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components60.Display, { type: "display-large", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Display, { type: "display-large", className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components60.Display, { type: "display-medium", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Display, { type: "display-medium", className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
 // src/legacy/layout/markdown/DynamicMarkdown.tsx
-var import_components61 = require("@transferwise/components");
+var import_components62 = require("@transferwise/components");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components61.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components62.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
 };
 var DynamicInfo = ({ component }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2(component), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components61.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2(component), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components62.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/legacy/layout/image/DynamicImage.tsx
-var import_components62 = require("@transferwise/components");
+var import_components63 = require("@transferwise/components");
 var import_react48 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 function DynamicImage({ component: image }) {
@@ -17640,7 +17876,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_components62.Image, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_components63.Image, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL2 = (imageBlob) => (
   // we can safely assume the type of reader.result is string
@@ -17676,7 +17912,7 @@ var getImageSource2 = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/legacy/layout/instructions/DynamicInstructions.tsx
-var import_components63 = require("@transferwise/components");
+var import_components64 = require("@transferwise/components");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var doContext2 = ["positive", "neutral"];
 var dontContext2 = ["warning", "negative"];
@@ -17685,8 +17921,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_runtime107.jsxs)("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components63.Header, { title: component.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components63.InstructionsList, { dos, donts })
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components64.Header, { title: component.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components64.InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
@@ -17796,21 +18032,49 @@ function DynamicLayout(props) {
 var DynamicLayout_default = DynamicLayout;
 
 // src/legacy/layout/list/DynamicStatusList.tsx
-var import_components64 = require("@transferwise/components");
+var import_components65 = require("@transferwise/components");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var DynamicStatusList = ({ component }) => {
+var DynamicStatusList = ({ component, onAction }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components64.Header, { title: component.title }) : null,
-    component.items.map(mapListItemToSummary)
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components65.Header, { title: component.title }) : null,
+    component.items.map((item) => mapListItemToSummary(item, onAction))
   ] });
 };
-var mapListItemToSummary = ({ title, description, icon, status }) => {
-  const props = __spreadValues(__spreadValues({
+var mapListItemToSummary = (props, onAction) => {
+  const { title, description, icon, status } = props;
+  const summaryProps = __spreadValues(__spreadValues({
     key: `${title}/${description || ""}`,
     title,
-    description
+    description,
+    action: "callToAction" in props ? callToActionToSummaryAction(props == null ? void 0 : props.callToAction, onAction) : void 0
   }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(DynamicIcon_default2, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components64.Summary, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components65.Summary, __spreadValues({}, summaryProps));
+};
+var callToActionToSummaryAction = (callToAction, onAction) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, behavior, title } = callToAction;
+  if (behavior.link) {
+    const { link } = behavior;
+    return {
+      text: title,
+      "aria-label": accessibilityDescription,
+      href: link.url,
+      target: "_blank"
+    };
+  }
+  if (behavior.action) {
+    const { action } = behavior;
+    return {
+      text: title,
+      "aria-label": accessibilityDescription,
+      onClick: () => {
+        onAction(action);
+      }
+    };
+  }
+  return void 0;
 };
 var statusListMap = {
   done: "done",
@@ -17826,12 +18090,12 @@ var statusMap = __spreadValues(__spreadValues({}, statusListMap), legacyStatusMa
 var DynamicStatusList_default = DynamicStatusList;
 
 // src/legacy/layout/loadingIndicator/DynamicLoadingIndicator.tsx
-var import_components65 = require("@transferwise/components");
+var import_components66 = require("@transferwise/components");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin = "md", size = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-    import_components65.Loader,
+    import_components66.Loader,
     {
       size,
       classNames: {
@@ -17844,7 +18108,7 @@ var DynamicLoadingIndicator = ({ component }) => {
 var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-var import_components67 = require("@transferwise/components");
+var import_components68 = require("@transferwise/components");
 var import_react_intl37 = require("react-intl");
 
 // src/common/messages/paragraph.messages.ts
@@ -17863,10 +18127,10 @@ var paragraph_messages_default2 = (0, import_react_intl36.defineMessages)({
 });
 
 // src/legacy/layout/paragraph/useSnackBarIfAvailable.ts
-var import_components66 = require("@transferwise/components");
+var import_components67 = require("@transferwise/components");
 var import_react49 = require("react");
 function useSnackBarIfAvailable2() {
-  const context = (0, import_react49.useContext)(import_components66.SnackbarContext);
+  const context = (0, import_react49.useContext)(import_components67.SnackbarContext);
   return context ? context.createSnackbar : noop3;
 }
 function noop3() {
@@ -17903,7 +18167,7 @@ function CopyableDynamicParagraph({ component }) {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_components67.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default2.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_components68.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default2.copy) })
   ] });
 }
 function noop4() {
@@ -17911,7 +18175,7 @@ function noop4() {
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/legacy/layout/review/DynamicReview.tsx
-var import_components68 = require("@transferwise/components");
+var import_components69 = require("@transferwise/components");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => review.fields.map(({ label, value, help }, index) => ({
   key: String(index),
@@ -17965,8 +18229,8 @@ function DynamicReview(props) {
   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_runtime112.jsxs)("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components68.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components68.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components69.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components69.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }
 var DynamicReview_default = DynamicReview;
@@ -17976,13 +18240,13 @@ var import_react51 = require("react");
 var import_icons5 = require("@transferwise/icons");
 
 // src/legacy/layout/search/SearchInput.tsx
-var import_components69 = require("@transferwise/components");
+var import_components70 = require("@transferwise/components");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("label", { className: "control-label d-inline", children: [
     title,
     /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-      import_components69.Input,
+      import_components70.Input,
       {
         type: "text",
         value,
@@ -17995,15 +18259,15 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 };
 
 // src/legacy/layout/search/SearchResults.tsx
-var import_components70 = require("@transferwise/components");
+var import_components71 = require("@transferwise/components");
 var import_react_intl38 = require("react-intl");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 function SearchResults2({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components70.NavigationOptionsList, { children: results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-    import_components70.NavigationOption,
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components71.NavigationOptionsList, { children: results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    import_components71.NavigationOption,
     {
       title: result.title,
       content: result.description,
@@ -18104,7 +18368,7 @@ var addQueryParameter2 = (url, key, value) => {
 };
 
 // src/legacy/layout/search/DynamicSearch.tsx
-var import_components71 = require("@transferwise/components");
+var import_components72 = require("@transferwise/components");
 var import_classnames14 = __toESM(require_classnames());
 var import_react_intl39 = require("react-intl");
 var import_jsx_runtime115 = require("react/jsx-runtime");
@@ -18147,7 +18411,7 @@ function DynamicSearch({ component, onAction }) {
     return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: (0, import_classnames14.default)(getMargin2(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("label", { className: "control-label d-inline", children: [
       title,
       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "m-t-1", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-        import_components71.Typeahead,
+        import_components72.Typeahead,
         {
           id: "typeahead-input-id",
           intl,
@@ -18203,7 +18467,7 @@ function TypeaheadFooter2({
   emptyMessage
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_components71.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_components72.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_runtime115.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ErrorResult2, { onRetrySearch }) });
@@ -18216,7 +18480,7 @@ function TypeaheadFooter2({
 var DynamicSearch_default = DynamicSearch;
 
 // src/legacy/layout/modal/DynamicModal.tsx
-var import_components72 = require("@transferwise/components");
+var import_components73 = require("@transferwise/components");
 var import_react52 = require("react");
 var import_jsx_runtime116 = require("react/jsx-runtime");
 function DynamicModal(props) {
@@ -18224,9 +18488,9 @@ function DynamicModal(props) {
   const { component, onAction } = props;
   const { margin = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: getTextAlignmentAndMargin2({ margin }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_components72.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_components73.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-      import_components72.Modal,
+      import_components73.Modal,
       {
         scroll: "content",
         open: visible,
@@ -18777,7 +19041,7 @@ var CameraCapture_messages_default = (0, import_react_intl42.defineMessages)({
 });
 
 // src/common/cameraCapture/components/bottomBar/BottomBar.tsx
-var import_components73 = require("@transferwise/components");
+var import_components74 = require("@transferwise/components");
 var import_react_intl43 = require("react-intl");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(CaptureButton, { onClick: onCapture }) });
@@ -18788,24 +19052,24 @@ var ReviewBottomBar = ({
   const intl = (0, import_react_intl43.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      import_components73.Button,
+      import_components74.Button,
       {
         className: "m-b-1",
         block: true,
-        size: import_components73.Size.MEDIUM,
-        type: import_components73.ControlType.ACCENT,
+        size: import_components74.Size.MEDIUM,
+        type: import_components74.ControlType.ACCENT,
         onClick: onSubmit,
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      import_components73.Button,
+      import_components74.Button,
       {
         className: "m-b-2",
         block: true,
-        size: import_components73.Size.MEDIUM,
-        type: import_components73.ControlType.ACCENT,
-        priority: import_components73.Priority.SECONDARY,
+        size: import_components74.Size.MEDIUM,
+        type: import_components74.ControlType.ACCENT,
+        priority: import_components74.Priority.SECONDARY,
         onClick: onRetry,
         children: intl.formatMessage(CameraCapture_messages_default.reviewRetry)
       }
@@ -19090,13 +19354,13 @@ function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstru
 var Overlay_default = Overlay;
 
 // src/common/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
-var import_components74 = require("@transferwise/components");
+var import_components75 = require("@transferwise/components");
 var import_jsx_runtime123 = require("react/jsx-runtime");
 function CameraErrorScreen({ title, description, actionButton, onAction }) {
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h2", { className: "text-xs-center m-b-3", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-xs-center m-b-5", children: description }),
-    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_components74.Button, { block: true, onClick: onAction, children: actionButton })
+    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_components75.Button, { block: true, onClick: onAction, children: actionButton })
   ] }) }) });
 }
 var CameraErrorScreen_default = CameraErrorScreen;
@@ -19450,7 +19714,7 @@ function getOrigin2(url) {
 }
 
 // src/legacy/dynamicFlow/BackButton.tsx
-var import_components76 = require("@transferwise/components");
+var import_components77 = require("@transferwise/components");
 var import_icons6 = require("@transferwise/icons");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 function BackButton2({ title, action, onAction }) {
@@ -19466,7 +19730,7 @@ function BackButton2({ title, action, onAction }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_components76.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_components77.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -19643,19 +19907,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_components77 = require("@transferwise/components");
+var import_components78 = require("@transferwise/components");
 var import_react66 = require("react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
-    size: import_components77.Size.EXTRA_LARGE,
+    size: import_components78.Size.EXTRA_LARGE,
     initial: true,
     submission: false
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react66.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-    import_components77.Loader,
+    import_components78.Loader,
     {
       size: config.size,
       classNames: { "tw-loader": "tw-loader m-x-auto" },