@wise/dynamic-flow-client 3.21.2 → 3.22.1

package/build/main.js

@@ -524,7 +524,8 @@ var de_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Bitte lade mindestens {minItems} Datei(en) hoch.",
   "dynamicFlows.PersistAsyncSchema.genericError": "Da ist etwas schiefgegangen. Versuche es bitte nochmal.",
   "dynamicFlows.ReadOnlySchema.no": "Nein",
-  "dynamicFlows.ReadOnlySchema.yes": "Ja"
+  "dynamicFlows.ReadOnlySchema.yes": "Ja",
+  "dynamicFlows.SearchLayout.loading": "L\xE4dt..."
 };
 
 // src/i18n/en.json
@@ -574,7 +575,8 @@ var en_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Please upload at least {minItems} file(s).",
   "dynamicFlows.PersistAsyncSchema.genericError": "Something went wrong, please try again.",
   "dynamicFlows.ReadOnlySchema.no": "No",
-  "dynamicFlows.ReadOnlySchema.yes": "Yes"
+  "dynamicFlows.ReadOnlySchema.yes": "Yes",
+  "dynamicFlows.SearchLayout.loading": "Loading..."
 };
 
 // src/i18n/es.json
@@ -624,7 +626,8 @@ var es_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Sube al menos {minItems} archivo(s).",
   "dynamicFlows.PersistAsyncSchema.genericError": "Ha habido un error. Int\xE9ntalo de nuevo.",
   "dynamicFlows.ReadOnlySchema.no": "No",
-  "dynamicFlows.ReadOnlySchema.yes": "S\xED"
+  "dynamicFlows.ReadOnlySchema.yes": "S\xED",
+  "dynamicFlows.SearchLayout.loading": "Cargando..."
 };
 
 // src/i18n/fr.json
@@ -674,7 +677,8 @@ var fr_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Veuillez t\xE9l\xE9charger au moins {minItems} fichier(s).",
   "dynamicFlows.PersistAsyncSchema.genericError": "Une erreur s'est produite, veuillez r\xE9essayer.",
   "dynamicFlows.ReadOnlySchema.no": "Non",
-  "dynamicFlows.ReadOnlySchema.yes": "Oui"
+  "dynamicFlows.ReadOnlySchema.yes": "Oui",
+  "dynamicFlows.SearchLayout.loading": "Chargement..."
 };
 
 // src/i18n/hu.json
@@ -724,7 +728,8 @@ var hu_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "K\xE9r\xFCnk, hogy legal\xE1bb {minItems} f\xE1jlt t\xF6lts fel.",
   "dynamicFlows.PersistAsyncSchema.genericError": "Valami hiba t\xF6rt\xE9nt. K\xE9r\xFCnk, pr\xF3b\xE1ld \xFAjra.",
   "dynamicFlows.ReadOnlySchema.no": "Nem",
-  "dynamicFlows.ReadOnlySchema.yes": "Igen"
+  "dynamicFlows.ReadOnlySchema.yes": "Igen",
+  "dynamicFlows.SearchLayout.loading": "Bet\xF6lt\xE9s..."
 };
 
 // src/i18n/id.json
@@ -774,7 +779,8 @@ var id_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Harap unggah sedikitnya {minItems} file.",
   "dynamicFlows.PersistAsyncSchema.genericError": "Terjadi kesalahan, mohon coba lagi.",
   "dynamicFlows.ReadOnlySchema.no": "Tidak",
-  "dynamicFlows.ReadOnlySchema.yes": "Ya"
+  "dynamicFlows.ReadOnlySchema.yes": "Ya",
+  "dynamicFlows.SearchLayout.loading": "Memuat..."
 };
 
 // src/i18n/it.json
@@ -824,7 +830,8 @@ var it_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Carica almeno {minItems} file.",
   "dynamicFlows.PersistAsyncSchema.genericError": "Qualcosa \xE8 andato storto. Riprova.",
   "dynamicFlows.ReadOnlySchema.no": "No",
-  "dynamicFlows.ReadOnlySchema.yes": "S\xEC"
+  "dynamicFlows.ReadOnlySchema.yes": "S\xEC",
+  "dynamicFlows.SearchLayout.loading": "Caricamento..."
 };
 
 // src/i18n/ja.json
@@ -874,7 +881,8 @@ var ja_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "{minItems}\u500B\u4EE5\u4E0A\u306E\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.PersistAsyncSchema.genericError": "\u554F\u984C\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.ReadOnlySchema.no": "\u3044\u3044\u3048",
-  "dynamicFlows.ReadOnlySchema.yes": "\u306F\u3044"
+  "dynamicFlows.ReadOnlySchema.yes": "\u306F\u3044",
+  "dynamicFlows.SearchLayout.loading": "\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026"
 };
 
 // src/i18n/pl.json
@@ -924,7 +932,8 @@ var pl_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Prze\u015Blij co najmniej nast\u0119puj\u0105c\u0105 liczb\u0119 plik\xF3w: {minItems}.",
   "dynamicFlows.PersistAsyncSchema.genericError": "Wyst\u0105pi\u0142 b\u0142\u0105d, prosimy spr\xF3bowa\u0107 ponownie.",
   "dynamicFlows.ReadOnlySchema.no": "Nie",
-  "dynamicFlows.ReadOnlySchema.yes": "Tak"
+  "dynamicFlows.ReadOnlySchema.yes": "Tak",
+  "dynamicFlows.SearchLayout.loading": "Trwa \u0142adowanie..."
 };
 
 // src/i18n/pt.json
@@ -974,7 +983,8 @@ var pt_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Por favor, envie pelo menos {minItems} arquivo(s).",
   "dynamicFlows.PersistAsyncSchema.genericError": "Ocorreu um erro. Por favor, tente novamente.",
   "dynamicFlows.ReadOnlySchema.no": "N\xE3o",
-  "dynamicFlows.ReadOnlySchema.yes": "Sim"
+  "dynamicFlows.ReadOnlySchema.yes": "Sim",
+  "dynamicFlows.SearchLayout.loading": "Carregando..."
 };
 
 // src/i18n/ro.json
@@ -1024,7 +1034,8 @@ var ro_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Te rug\u0103m s\u0103 \xEEncarci cel pu\u021Bin {minItems} fi\u0219ier(e).",
   "dynamicFlows.PersistAsyncSchema.genericError": "Ceva nu a mers bine, te rug\u0103m s\u0103 \xEEncerci din nou.",
   "dynamicFlows.ReadOnlySchema.no": "Nu",
-  "dynamicFlows.ReadOnlySchema.yes": "Da"
+  "dynamicFlows.ReadOnlySchema.yes": "Da",
+  "dynamicFlows.SearchLayout.loading": "Se \xEEncarc\u0103..."
 };
 
 // src/i18n/ru.json
@@ -1074,7 +1085,8 @@ var ru_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u043F\u043E \u043A\u0440\u0430\u0439\u043D\u0435\u0439 \u043C\u0435\u0440\u0435 {minItems} \u0444\u0430\u0439\u043B(-\u0430/\u043E\u0432).",
   "dynamicFlows.PersistAsyncSchema.genericError": "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A, \u043F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0435\u0449\u0435 \u0440\u0430\u0437.",
   "dynamicFlows.ReadOnlySchema.no": "\u041D\u0435\u0442",
-  "dynamicFlows.ReadOnlySchema.yes": "\u0414\u0430"
+  "dynamicFlows.ReadOnlySchema.yes": "\u0414\u0430",
+  "dynamicFlows.SearchLayout.loading": "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430..."
 };
 
 // src/i18n/th.json
@@ -1124,7 +1136,8 @@ var th_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minItems} \u0E44\u0E1F\u0E25\u0E4C",
   "dynamicFlows.PersistAsyncSchema.genericError": "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E1A\u0E32\u0E07\u0E2D\u0E22\u0E48\u0E32\u0E07 \u0E42\u0E1B\u0E23\u0E14\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07",
   "dynamicFlows.ReadOnlySchema.no": "\u0E44\u0E21\u0E48\u0E43\u0E0A\u0E48",
-  "dynamicFlows.ReadOnlySchema.yes": "\u0E43\u0E0A\u0E48"
+  "dynamicFlows.ReadOnlySchema.yes": "\u0E43\u0E0A\u0E48",
+  "dynamicFlows.SearchLayout.loading": "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..."
 };
 
 // src/i18n/tr.json
@@ -1174,7 +1187,8 @@ var tr_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "L\xFCtfen en az {minItems} dosya y\xFCkleyin.",
   "dynamicFlows.PersistAsyncSchema.genericError": "Bir \u015Feyler ters gitti, l\xFCtfen tekrar deneyin.",
   "dynamicFlows.ReadOnlySchema.no": "Hay\u0131r",
-  "dynamicFlows.ReadOnlySchema.yes": "Evet"
+  "dynamicFlows.ReadOnlySchema.yes": "Evet",
+  "dynamicFlows.SearchLayout.loading": "Y\xFCkleniyor..."
 };
 
 // src/i18n/zh_CN.json
@@ -1224,7 +1238,8 @@ var zh_CN_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u8BF7\u4E0A\u4F20\u81F3\u5C11 {minItems} \u4E2A\u6587\u4EF6\u3002",
   "dynamicFlows.PersistAsyncSchema.genericError": "\u51FA\u9519\u4E86\uFF0C\u8BF7\u91CD\u8BD5\u3002",
   "dynamicFlows.ReadOnlySchema.no": "\u5426",
-  "dynamicFlows.ReadOnlySchema.yes": "\u662F"
+  "dynamicFlows.ReadOnlySchema.yes": "\u662F",
+  "dynamicFlows.SearchLayout.loading": "\u6B63\u5728\u52A0\u8F7D\u2026"
 };
 
 // src/i18n/zh_HK.json
@@ -1274,7 +1289,8 @@ var zh_HK_default = {
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u8ACB\u4E0A\u8F09\u81F3\u5C11{minItems}\u500B\u6A94\u6848\u3002",
   "dynamicFlows.PersistAsyncSchema.genericError": "\u51FA\u73FE\u4E86\u554F\u984C\uFF0C\u8ACB\u518D\u8A66\u4E00\u6B21\u3002",
   "dynamicFlows.ReadOnlySchema.no": "\u5426",
-  "dynamicFlows.ReadOnlySchema.yes": "\u662F"
+  "dynamicFlows.ReadOnlySchema.yes": "\u662F",
+  "dynamicFlows.SearchLayout.loading": "\u8F09\u5165\u4E2D\u2026"
 };
 
 // src/i18n/index.ts
@@ -1472,9 +1488,20 @@ var allOfComponentToProps = ({ control, description, help, title }, children) =>
   title
 });
 
+// src/revamp/renderers/mappers/utils/mapErrorsToValidationState.ts
+var mapErrorsToValidationState = (errors) => {
+  if (errors) {
+    if (errors.length > 0) {
+      return { status: "invalid", message: errors[0] };
+    }
+    return { status: "valid" };
+  }
+  return void 0;
+};
+
 // src/revamp/renderers/mappers/utils/inputComponentToProps.ts
 var inputComponentToProps = (component, type) => {
-  var _a, _b;
+  var _a;
   const {
     autoComplete,
     control,
@@ -1486,29 +1513,40 @@ 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 };
+    }
+  }
+  return mapErrorsToValidationState(errors);
+};
 
 // src/revamp/renderers/mappers/booleanInputComponentToProps.ts
 var booleanInputComponentToProps = (component) => {
@@ -1666,15 +1704,14 @@ var modalComponentToProps = ({ content, control, margin, trigger }, components)
 
 // src/revamp/renderers/mappers/multiUploadInputComponentToProps.ts
 var multiUploadInputComponentToProps = (component) => {
-  const { accepts, fileMap, maxSize, minItems, maxItems, uploadLabel } = component;
-  const findIdByValue = (file) => Object.keys(fileMap).find((id) => fileMap[id] === file);
-  const fileList = Object.values(fileMap).map((file) => {
-    var _a;
-    return {
-      id: (_a = findIdByValue(file)) != null ? _a : "",
-      file
-    };
-  });
+  const { accepts, errorsMap, fileMap, maxSize, minItems, maxItems, uploadLabel } = component;
+  const fileList = Object.entries(fileMap).map(
+    ([id, file]) => ({
+      id,
+      file,
+      validationState: mapErrorsToValidationState(errorsMap[id])
+    })
+  );
   return __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-upload-multi")), {
     accepts,
     maxSize,
@@ -1756,11 +1793,12 @@ 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: mapErrorsToValidationState(errors),
     onAdd: onAdd.bind(component),
     onEdit: onEdit.bind(component),
     onSave: onSave.bind(component),
@@ -7392,18 +7430,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 +7453,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 +7462,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 +7521,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 +7570,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 +7882,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 +7941,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 +7951,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 +7981,7 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -7962,7 +8000,7 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
       maximum,
       minimum,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8224,7 +8262,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 +8311,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 +8330,7 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -8312,7 +8350,7 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
       minimum,
       persistedState,
       value,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8515,7 +8553,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 +8604,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 +8628,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -8609,7 +8647,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       maximumDate,
       value,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8821,7 +8859,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 +8908,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 +8937,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -8921,7 +8959,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
       minLength,
       value,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       performValidationAsync,
@@ -8973,7 +9011,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 +9156,8 @@ var arraySchemaToRepeatableComponent = (schemaMapperProps, mapperProps) => {
       schema: items,
       localValue: editableValue,
       model: localValueToJsonElement(editableValue),
-      validationErrors: void 0
+      validationErrors: void 0,
+      required: true
     },
     mapperProps
   );
@@ -9161,9 +9200,28 @@ var getRandomInt = () => Math.floor(Math.random() * 1e8);
 
 // src/revamp/domain/components/MultiUploadInputComponent.ts
 var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
-  const _a = uploadInputProps, { uid, id, checks, format, performPersistAsync, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "id", "checks", "format", "performPersistAsync", "onValueChange", "summariser"]);
+  const _a = uploadInputProps, {
+    uid,
+    id,
+    checks,
+    fileChecks,
+    format,
+    performPersistAsync,
+    onValueChange,
+    summariser
+  } = _a, rest = __objRest(_a, [
+    "uid",
+    "id",
+    "checks",
+    "fileChecks",
+    "format",
+    "performPersistAsync",
+    "onValueChange",
+    "summariser"
+  ]);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const getFileValidationErrors = getLocalValueValidator(fileChecks);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -9176,6 +9234,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     uid,
     id,
     format: "base64",
+    errorsMap: {},
     fileMap: {},
     onBlur() {
       getAndSetValidationErrors(this.getLocalValue());
@@ -9190,13 +9249,17 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
         update((draft) => {
           draft.value.splice(fileIndex, 1);
           const _a2 = draft.fileMap, { [fileId]: _ } = _a2, files = __objRest(_a2, [__restKey(fileId)]);
+          const _b = draft.errorsMap, { [fileId]: removedErrors } = _b, fileErrors = __objRest(_b, [__restKey(fileId)]);
           draft.fileMap = files;
+          draft.errorsMap = fileErrors;
         });
       }
     },
     async onUpload(file, fileId) {
+      const fileErrors = getFileValidationErrors(file);
       update((draft) => {
         draft.fileMap[fileId] = file;
+        draft.errorsMap[fileId] = fileErrors;
         draft.value = [...this.value, file];
         draft.errors = [];
       });
@@ -9217,7 +9280,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     },
     validate() {
       const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      return messages.length === 0 && Object.values(this.errorsMap).every((errors) => errors.length === 0);
     }
   }, rest);
   if (!performPersistAsync) {
@@ -9276,6 +9339,7 @@ var arraySchemaToMultiUploadComponent = (schemaMapperProps, mapperProps) => {
       accepts,
       autoComplete: "off",
       checks: schema.hidden ? [] : checks,
+      fileChecks: [],
       format,
       maxSize,
       minItems,
@@ -9400,7 +9464,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 +9515,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 +9534,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
       options,
       required,
       title,
-      validationState,
+      validationAsyncState,
       performValidationAsync,
       performRefresh: getPerformRefresh(schema, onRefresh),
       onValueChange
@@ -9646,7 +9710,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 +9728,7 @@ var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
     schemaMapperProps,
     mapperProps
   );
-  const { performValidationAsync, validationState } = getValidationAsyncInitialState(
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
@@ -9675,7 +9739,7 @@ var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       value: value != null ? value : false,
       persistedState,
-      validationState,
+      validationAsyncState,
       performPersistAsync,
       performRefresh,
       performValidationAsync,
@@ -10210,13 +10274,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 +10378,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 +11260,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 +11291,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 +11536,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 +11850,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 +11982,10 @@ function MultiSelectInputRendererComponent(props) {
     disabled,
     label,
     help,
-    error,
     options,
     placeholder,
     selectedIndices,
+    validationState,
     onSelect
   } = props;
   const mergedIndices = stagedIndices != null ? stagedIndices : selectedIndices;
@@ -11864,39 +12016,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 +12074,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 +12083,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 +12131,10 @@ var MultiUploadInputRenderer = {
       label,
       description,
       disabled,
-      error,
       maxSize,
       maxItems,
       uploadLabel,
+      validationState,
       onUpload,
       onDelete
     } = props;
@@ -11985,22 +12147,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 +12183,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 +12327,9 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
-    error,
     items,
     title,
+    validationState,
     onEdit,
     onAdd,
     onSave,
@@ -12183,7 +12365,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 +12378,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 +12417,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,28 +12443,45 @@ 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)
-      }
+      })
     )
   ] });
 }
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_react14 = require("react");
+
+// ../renderers/src/messages/search.messages.ts
+var import_react_intl17 = require("react-intl");
+var search_messages_default = (0, import_react_intl17.defineMessages)({
+  loading: {
+    id: "df.wise.SearchLayout.loading",
+    defaultMessage: "Loading...",
+    description: "A message shown to the user while their search is being processed, before results appear."
+  }
+});
+
+// ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
+var import_react_intl18 = require("react-intl");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function BlockSearchRendererComponent({
   id,
@@ -12295,9 +12494,10 @@ function BlockSearchRendererComponent({
 }) {
   const [hasSearched, setHasSearched] = (0, import_react14.useState)(false);
   const trackEvent = useTrackEvent();
+  const { formatMessage } = (0, import_react_intl18.useIntl)();
   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,
@@ -12313,7 +12513,7 @@ function BlockSearchRendererComponent({
         }
       }
     ) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: "Loading..." }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SearchResultContent, { state, onChange })
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SearchResultContent, { state, onChange })
   ] });
 }
 function SearchResultContent({
@@ -12333,16 +12533,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,10 +12563,10 @@ 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");
+var import_react_intl19 = require("react-intl");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
@@ -12378,9 +12578,9 @@ 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,
+  const intl = (0, import_react_intl19.useIntl)();
+  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,
@@ -12425,14 +12625,15 @@ function mapResultToTypeaheadOption(result) {
   };
 }
 function TypeaheadFooter({ state, isLoading }) {
+  const { formatMessage } = (0, import_react_intl19.useIntl)();
   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 }) });
   }
   if (state.type === "pending" || isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "m-t-2 m-x-2", children: "Loading..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
   }
   return null;
 }
@@ -12447,7 +12648,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 +12656,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 +12704,11 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   (0, import_react16.useEffect)(() => {
@@ -12506,41 +12717,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 +12774,13 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     placeholder,
     required,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   const items = options.map(
@@ -12587,54 +12808,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 +12912,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 +12946,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 +12972,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 +13010,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 +13029,7 @@ var TextInputRenderer = {
       maxLength,
       minLength,
       type,
+      validationState,
       value: initialValue
     } = _a, rest = __objRest(_a, [
       "id",
@@ -12782,22 +13041,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 +13079,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 +13115,10 @@ var LargeUploadRenderer = {
       label,
       description,
       disabled,
-      error,
       help,
       maxSize,
       type,
+      validationState,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -12848,10 +13127,10 @@ var LargeUploadRenderer = {
       "label",
       "description",
       "disabled",
-      "error",
       "help",
       "maxSize",
       "type",
+      "validationState",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id });
@@ -12864,21 +13143,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 +13181,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) => ({
@@ -12942,11 +13231,11 @@ var getFieldValue = (value, help, orientation) => {
 var import_react19 = require("react");
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_react_intl19 = require("react-intl");
+var import_react_intl21 = require("react-intl");
 
 // ../renderers/src/messages/external-confirmation.messages.ts
-var import_react_intl18 = require("react-intl");
-var external_confirmation_messages_default = (0, import_react_intl18.defineMessages)({
+var import_react_intl20 = require("react-intl");
+var external_confirmation_messages_default = (0, import_react_intl20.defineMessages)({
   title: {
     id: "df.wise.ExternalConfirmation.title",
     defaultMessage: "Please confirm",
@@ -12970,19 +13259,19 @@ 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,
   onClose
 }) {
-  const { formatMessage } = (0, import_react_intl19.useIntl)();
+  const { formatMessage } = (0, import_react_intl21.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 +13284,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 +13313,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 +13335,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 +13351,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
   ] });
 }
@@ -13541,7 +13828,7 @@ function isReference(block) {
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
 var import_react67 = require("react");
-var import_react_intl50 = require("react-intl");
+var import_react_intl53 = require("react-intl");
 
 // src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
 var import_react25 = require("react");
@@ -14463,11 +14750,11 @@ function useExternalStepPolling(polling, onAction) {
 
 // src/legacy/common/hooks/usePersistAsync/usePersistAsync.ts
 var import_react55 = require("react");
-var import_react_intl41 = require("react-intl");
+var import_react_intl44 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
 var import_react54 = require("react");
-var import_react_intl40 = require("react-intl");
+var import_react_intl43 = require("react-intl");
 
 // src/legacy/common/constants/DateMode.ts
 var DateMode = {
@@ -14518,10 +14805,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 +14859,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 +14906,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 +15009,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 +15081,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 +15113,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 +15181,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,13 +15215,13 @@ 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");
+var import_react_intl23 = require("react-intl");
 
 // src/legacy/layout/external/DynamicExternal.messages.ts
-var import_react_intl20 = require("react-intl");
-var DynamicExternal_messages_default = (0, import_react_intl20.defineMessages)({
+var import_react_intl22 = require("react-intl");
+var DynamicExternal_messages_default = (0, import_react_intl22.defineMessages)({
   retryTitle: {
     id: "dynamicFlows.DynamicExternal.retryTitle",
     defaultMessage: "Reopen window",
@@ -14946,7 +15233,7 @@ var DynamicExternal_messages_default = (0, import_react_intl20.defineMessages)({
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var DynamicExternal = ({ component, onAction }) => {
   const { requestUrl, responseHandlers, polling, retryTitle } = component;
-  const intl = (0, import_react_intl21.useIntl)();
+  const intl = (0, import_react_intl23.useIntl)();
   const openExternalUrl = (0, import_react32.useCallback)(
     () => window.open(requestUrl, "df-external-window"),
     [requestUrl]
@@ -14959,9 +15246,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 +15257,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 +15269,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 +15278,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,14 +15303,14 @@ 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_react_intl24 = require("react-intl");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 function ControlFeedback(props) {
   const { errors = "", validations = [], validationMessages = {} } = props;
@@ -15034,16 +15321,16 @@ 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 })
     ] })
   ] });
 }
 function useDefaultValidationMessages(schema) {
-  const { formatMessage, locale } = (0, import_react_intl22.useIntl)();
+  const { formatMessage, locale } = (0, import_react_intl24.useIntl)();
   const formattedMessages = {
     type: formatMessage(validation_messages_default.type),
     minimum: formatMessage(validation_messages_default.minimum, {
@@ -15130,11 +15417,11 @@ function constructUploadError(response) {
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/utils/useFormattedDefaultErrorMessages.tsx
-var import_react_intl24 = require("react-intl");
+var import_react_intl26 = require("react-intl");
 
 // src/legacy/common/messages.ts
-var import_react_intl23 = require("react-intl");
-var messages_default = (0, import_react_intl23.defineMessages)({
+var import_react_intl25 = require("react-intl");
+var messages_default = (0, import_react_intl25.defineMessages)({
   required: {
     id: "dynamicFlows.DefaultErrorMessages.required",
     defaultMessage: "Please fill out this field.",
@@ -15147,7 +15434,7 @@ function useFormattedDefaultErrorMessages({
   maxItems,
   minItems
 }) {
-  const { formatMessage } = (0, import_react_intl24.useIntl)();
+  const { formatMessage } = (0, import_react_intl26.useIntl)();
   const { maxFileSizeError, maxItemsError, minItemsError } = multi_file_upload_messages_default;
   return {
     maxFileSizeErrorMessage: formatMessage(maxFileSizeError),
@@ -15221,7 +15508,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 +15531,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 +15542,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");
+var import_react_intl28 = 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 +15600,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;
@@ -15352,8 +15639,8 @@ var getDisabled = (disabled) => {
 };
 
 // src/common/messages/multi-select.messages.ts
-var import_react_intl25 = require("react-intl");
-var multi_select_messages_default2 = (0, import_react_intl25.defineMessages)({
+var import_react_intl27 = require("react-intl");
+var multi_select_messages_default2 = (0, import_react_intl27.defineMessages)({
   summary: {
     id: "dynamicFlows.MultiSelect.summary",
     defaultMessage: "{first} and {count} more",
@@ -15371,7 +15658,7 @@ function MultiSelectSchema({
   errors,
   onChange
 }) {
-  const { formatMessage, locale } = (0, import_react_intl26.useIntl)();
+  const { formatMessage, locale } = (0, import_react_intl28.useIntl)();
   const { disabled, items, validationMessages, placeholder } = schema;
   const options = items.oneOf.map((item) => mapConstSchemaToOption(item, "select"));
   const id = (0, import_react35.useMemo)(() => schema.$id || generateRandomId(), [schema.$id]);
@@ -15417,7 +15704,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 +15729,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 +15759,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");
+var import_react_intl31 = 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,
@@ -15494,8 +15781,8 @@ function ItemSummaryOption2({ item, onClick }) {
 }
 
 // src/common/messages/repeatable.messages.ts
-var import_react_intl27 = require("react-intl");
-var repeatable_messages_default2 = (0, import_react_intl27.defineMessages)({
+var import_react_intl29 = require("react-intl");
+var repeatable_messages_default2 = (0, import_react_intl29.defineMessages)({
   addItemTitle: {
     id: "dynamicFlows.ArraySchema.addItemTitle",
     defaultMessage: "Add Item",
@@ -15520,7 +15807,7 @@ var repeatable_messages_default2 = (0, import_react_intl27.defineMessages)({
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchemaStep.tsx
 var import_react36 = require("react");
-var import_react_intl28 = require("react-intl");
+var import_react_intl30 = require("react-intl");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 function RepeatableSchemaStep({
   type,
@@ -15531,7 +15818,7 @@ function RepeatableSchemaStep({
   onModelChange,
   onAction
 }) {
-  const { formatMessage } = (0, import_react_intl28.useIntl)();
+  const { formatMessage } = (0, import_react_intl30.useIntl)();
   const [filename, setFilename] = (0, import_react36.useState)(void 0);
   const step = {
     layout: [
@@ -15838,7 +16125,7 @@ function RepeatableSchema({
     setEditableItem({ item: null, model: null });
     setOpenModalType(null);
   };
-  const { formatMessage } = (0, import_react_intl29.useIntl)();
+  const { formatMessage } = (0, import_react_intl31.useIntl)();
   const validations = getValidationFailures(model, schema, required);
   const base64ValidationMessages = useFormattedDefaultErrorMessages({
     minItems: schema.minItems,
@@ -15853,7 +16140,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 +16150,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 +16159,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 +16248,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 +16291,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,17 +16325,17 @@ 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_react_intl31 = require("react-intl");
+var import_components54 = require("@transferwise/components");
+var import_react_intl33 = require("react-intl");
 
 // src/common/messages/help.messages.ts
-var import_react_intl30 = require("react-intl");
-var help_messages_default2 = (0, import_react_intl30.defineMessages)({
+var import_react_intl32 = require("react-intl");
+var help_messages_default2 = (0, import_react_intl32.defineMessages)({
   helpAria: {
     id: "dynamicFlows.Help.ariaLabel",
     defaultMessage: "Click here for more info.",
@@ -16059,12 +16346,12 @@ var help_messages_default2 = (0, import_react_intl30.defineMessages)({
 // src/legacy/jsonSchemaForm/help/Help.tsx
 var import_jsx_runtime89 = require("react/jsx-runtime");
 function Help2(props) {
-  const intl = (0, import_react_intl31.useIntl)();
+  const intl = (0, import_react_intl33.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)
@@ -16075,10 +16362,10 @@ var Help_default2 = Help2;
 
 // src/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
 var import_react40 = require("react");
-var import_react_intl32 = require("react-intl");
+var import_react_intl34 = 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 +16643,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 +16659,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 +16677,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 +16693,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 +16722,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 +16807,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 +16824,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 +16842,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 +16874,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 +16893,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 +16930,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), {
@@ -16781,7 +17068,7 @@ function SchemaFormControl(props) {
     labelledBy
   } = props;
   const log = useLogger();
-  const intl = (0, import_react_intl32.useIntl)();
+  const intl = (0, import_react_intl34.useIntl)();
   const getSanitisedValue = (value2) => isNativeInput(schema.type) && (isNull3(value2) || isUndefined3(value2)) ? "" : value2;
   const onModelChange = (value2, type, metadata) => {
     onChange(getValidBasicModelOrNull(value2, schema), type, metadata);
@@ -16983,7 +17270,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) {
@@ -17018,10 +17305,10 @@ var OneOfSchema_default = OneOfSchema;
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
 var import_classnames12 = __toESM(require_classnames());
 var import_react43 = require("react");
-var import_react_intl33 = require("react-intl");
+var import_react_intl35 = 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 +17326,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 +17346,7 @@ function UploadInputAdapter(props) {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-    import_components56.UploadInput,
+    import_components57.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -17085,7 +17372,7 @@ function PersistAsyncBlobSchema(props) {
   const [persistAsyncValidations, setPersistAsyncValidations] = (0, import_react43.useState)(null);
   const [validations, setValidations] = (0, import_react43.useState)([]);
   const [changed, setChanged] = (0, import_react43.useState)(false);
-  const intl = (0, import_react_intl33.useIntl)();
+  const intl = (0, import_react_intl35.useIntl)();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   (0, import_react43.useEffect)(() => {
@@ -17194,7 +17481,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 +17493,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 +17519,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,12 +17610,12 @@ function getOtherOneOf(schema) {
 var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_components59 = require("@transferwise/components");
-var import_react_intl35 = require("react-intl");
+var import_components60 = require("@transferwise/components");
+var import_react_intl37 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.ts
-var import_react_intl34 = require("react-intl");
-var ReadOnlySchema_messages_default = (0, import_react_intl34.defineMessages)({
+var import_react_intl36 = require("react-intl");
+var ReadOnlySchema_messages_default = (0, import_react_intl36.defineMessages)({
   yes: {
     id: "dynamicFlows.ReadOnlySchema.yes",
     defaultMessage: "Yes",
@@ -17345,9 +17632,9 @@ var ReadOnlySchema_messages_default = (0, import_react_intl34.defineMessages)({
 var import_jsx_runtime100 = require("react/jsx-runtime");
 function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
-  const { formatMessage } = (0, import_react_intl35.useIntl)();
+  const { formatMessage } = (0, import_react_intl37.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 +17858,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 +17885,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 +17927,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 +17963,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 +17972,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 +18083,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 +18141,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,12 +18159,12 @@ var DynamicLoadingIndicator = ({ component }) => {
 var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-var import_components67 = require("@transferwise/components");
-var import_react_intl37 = require("react-intl");
+var import_components68 = require("@transferwise/components");
+var import_react_intl39 = require("react-intl");
 
 // src/common/messages/paragraph.messages.ts
-var import_react_intl36 = require("react-intl");
-var paragraph_messages_default2 = (0, import_react_intl36.defineMessages)({
+var import_react_intl38 = require("react-intl");
+var paragraph_messages_default2 = (0, import_react_intl38.defineMessages)({
   copy: {
     id: "dynamicFlows.DynamicParagraph.copy",
     defaultMessage: "Copy",
@@ -17863,10 +18178,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() {
@@ -17881,7 +18196,7 @@ function BasicDynamicParagraph({ component }) {
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("p", { className: `np-text-body-large ${getTextAlignmentAndMargin2(component)}`, children: component.text });
 }
 function CopyableDynamicParagraph({ component }) {
-  const { formatMessage } = (0, import_react_intl37.useIntl)();
+  const { formatMessage } = (0, import_react_intl39.useIntl)();
   const createSnackbar = useSnackBarIfAvailable2();
   const { text } = component;
   const copy = () => {
@@ -17903,7 +18218,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 +18226,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 +18280,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 +18291,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 +18310,15 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 };
 
 // src/legacy/layout/search/SearchResults.tsx
-var import_components70 = require("@transferwise/components");
-var import_react_intl38 = require("react-intl");
+var import_components71 = require("@transferwise/components");
+var import_react_intl40 = 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,
@@ -18016,7 +18331,7 @@ function SearchResults2({ results, emptyMessage, onSelect }) {
   )) });
 }
 function ErrorResult2({ onRetrySearch }) {
-  const intl = (0, import_react_intl38.useIntl)();
+  const intl = (0, import_react_intl40.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
@@ -18104,14 +18419,26 @@ 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_react_intl42 = require("react-intl");
+
+// src/common/messages/search.messages.ts
+var import_react_intl41 = require("react-intl");
+var search_messages_default2 = (0, import_react_intl41.defineMessages)({
+  loading: {
+    id: "dynamicFlows.SearchLayout.loading",
+    defaultMessage: "Loading...",
+    description: "A message shown to the user while their search is being processed, before results appear."
+  }
+});
+
+// src/legacy/layout/search/DynamicSearch.tsx
 var import_jsx_runtime115 = require("react/jsx-runtime");
 var DEBOUNCE_TIME2 = 400;
 function DynamicSearch({ component, onAction }) {
   const [query, setQuery] = (0, import_react51.useState)("");
-  const intl = (0, import_react_intl39.useIntl)();
+  const intl = (0, import_react_intl42.useIntl)();
   const { control, title, margin, url, method, param, emptyMessage } = component;
   const { status, results, search } = useSearch({ url, method, param });
   const onEvent = useEventDispatcher();
@@ -18143,11 +18470,12 @@ function DynamicSearch({ component, onAction }) {
     setQuery(query);
     void search(query);
   };
+  const loadingMessage = intl.formatMessage(search_messages_default2.loading);
   if (control === "inline") {
     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,
@@ -18160,6 +18488,7 @@ function DynamicSearch({ component, onAction }) {
               state: status,
               results,
               emptyMessage,
+              loadingMessage,
               onRetrySearch
             }
           ),
@@ -18197,26 +18526,27 @@ function mapResultToTypeaheadOption2(result) {
   };
 }
 function TypeaheadFooter2({
+  emptyMessage,
+  loadingMessage,
   results,
   state,
-  onRetrySearch,
-  emptyMessage
+  onRetrySearch
 }) {
   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 }) });
   }
   if (state === "loading" || results.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "m-t-2 m-x-2", children: "Loading..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "m-t-2 m-x-2", children: loadingMessage });
   }
   return null;
 }
 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 +18554,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,
@@ -18385,7 +18715,7 @@ var controlTypesWithPersistOnChange = /* @__PURE__ */ new Set([
 ]);
 function PersistAsyncBasicSchema(props) {
   const { schema, required = false, submitted, errors, onChange, onPersistAsync } = props;
-  const intl = (0, import_react_intl40.useIntl)();
+  const intl = (0, import_react_intl43.useIntl)();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const [persistAsyncModel, setPersistAsyncModel] = (0, import_react54.useState)(null);
@@ -18480,7 +18810,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 var usePersistAsync = (persistAsync) => {
   const [abortController, setAbortController] = (0, import_react55.useState)(null);
   const httpClient = useHttpClient();
-  const intl = (0, import_react_intl41.useIntl)();
+  const intl = (0, import_react_intl44.useIntl)();
   const { schema } = persistAsync;
   async function handlePersistAsync(model) {
     const isInvalidSchema = model instanceof Blob ? !isBlobSchema2(schema) : !isValidSchema(model, schema);
@@ -18713,12 +19043,12 @@ var import_react63 = require("react");
 
 // src/common/cameraCapture/CameraCapture.tsx
 var import_react62 = require("react");
-var import_react_intl46 = require("react-intl");
+var import_react_intl49 = require("react-intl");
 var import_react_webcam = __toESM(require("react-webcam"));
 
 // src/common/cameraCapture/CameraCapture.messages.ts
-var import_react_intl42 = require("react-intl");
-var CameraCapture_messages_default = (0, import_react_intl42.defineMessages)({
+var import_react_intl45 = require("react-intl");
+var CameraCapture_messages_default = (0, import_react_intl45.defineMessages)({
   reviewSubmit: {
     id: "dynamicFlows.CameraCapture.reviewSubmit",
     defaultMessage: "Yes, submit",
@@ -18777,35 +19107,35 @@ var CameraCapture_messages_default = (0, import_react_intl42.defineMessages)({
 });
 
 // src/common/cameraCapture/components/bottomBar/BottomBar.tsx
-var import_components73 = require("@transferwise/components");
-var import_react_intl43 = require("react-intl");
+var import_components74 = require("@transferwise/components");
+var import_react_intl46 = 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 }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
-  const intl = (0, import_react_intl43.useIntl)();
+  const intl = (0, import_react_intl46.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)
       }
@@ -18824,11 +19154,11 @@ var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime120.j
 );
 
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-var import_react_intl45 = require("react-intl");
+var import_react_intl48 = require("react-intl");
 
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.messages.ts
-var import_react_intl44 = require("react-intl");
-var OrientationLockOverlay_messages_default = (0, import_react_intl44.defineMessages)({
+var import_react_intl47 = require("react-intl");
+var OrientationLockOverlay_messages_default = (0, import_react_intl47.defineMessages)({
   text: {
     id: "dynamicFlows.CameraCapture.rotatePhone.text",
     defaultMessage: "Rotate your phone to portrait view to take a photo",
@@ -18839,7 +19169,7 @@ var OrientationLockOverlay_messages_default = (0, import_react_intl44.defineMess
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
 var import_jsx_runtime121 = require("react/jsx-runtime");
 function OrientationLockOverlay() {
-  const intl = (0, import_react_intl45.useIntl)();
+  const intl = (0, import_react_intl48.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "orientation-lock-overlay", children: [
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       "img",
@@ -19090,13 +19420,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;
@@ -19129,7 +19459,7 @@ function CameraCapture({
     shouldLockOrientation,
     onEvent
   );
-  const intl = (0, import_react_intl46.useIntl)();
+  const intl = (0, import_react_intl49.useIntl)();
   const handleCapture = (0, import_react62.useCallback)(async () => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _a.video) && ((_c = (_b = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _b.video) == null ? void 0 : _c.readyState) >= 3) {
@@ -19352,11 +19682,11 @@ function getFirstAction(step) {
 }
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_react_intl48 = require("react-intl");
+var import_react_intl51 = require("react-intl");
 
 // src/common/messages/external-confirmation.messages.ts
-var import_react_intl47 = require("react-intl");
-var external_confirmation_messages_default2 = (0, import_react_intl47.defineMessages)({
+var import_react_intl50 = require("react-intl");
+var external_confirmation_messages_default2 = (0, import_react_intl50.defineMessages)({
   title: {
     id: "dynamicFlows.ExternalConfirmation.title",
     defaultMessage: "Please confirm",
@@ -19384,7 +19714,7 @@ var import_jsx_runtime126 = require("react/jsx-runtime");
 var noop6 = () => {
 };
 function ExternalConfirmationStep({ url, onClose }) {
-  const { formatMessage } = (0, import_react_intl48.useIntl)();
+  const { formatMessage } = (0, import_react_intl51.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
     DynamicLayout_default,
     {
@@ -19450,7 +19780,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 +19796,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 +19973,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" },
@@ -19757,9 +20087,9 @@ var assertResponseIsValid2 = (response) => {
 var isResponse2 = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 
 // src/legacy/dynamicFlow/utils/useErrorResponse.tsx
-var import_react_intl49 = require("react-intl");
+var import_react_intl52 = require("react-intl");
 var useErrorResponse = () => {
-  const { formatMessage } = (0, import_react_intl49.useIntl)();
+  const { formatMessage } = (0, import_react_intl52.useIntl)();
   return async (response, fetchType, isInitialRequest) => {
     try {
       const errorResponse = await parseErrorResponse(response);
@@ -19803,7 +20133,7 @@ var DynamicFlowComponent = ({
     setSchemaModel
   } = useDynamicFlowState(initialStep);
   const [submitted, setSubmitted] = (0, import_react67.useState)(false);
-  const { locale } = (0, import_react_intl50.useIntl)();
+  const { locale } = (0, import_react_intl53.useIntl)();
   const { isLoading, loader, setLoadingState } = useLoader(
     loaderConfig,
     initialStep ? "idle" : "initial"