@wise/dynamic-flow-client-internal 3.21.2 → 3.22.1

package/build/main.js

@@ -321,7 +321,8 @@ var de_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Diese Datei ist leider zu gro\xDF. Bitte lade eine kleinere Datei hoch.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Bitte lade {maxItems} oder weniger Dateien hoch.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Bitte lade mindestens {minItems} Datei(en) hoch.",
-  "df.wise.PersistAsyncSchema.genericError": "Da ist etwas schiefgegangen. Versuche es bitte nochmal."
+  "df.wise.PersistAsyncSchema.genericError": "Da ist etwas schiefgegangen. Versuche es bitte nochmal.",
+  "df.wise.SearchLayout.loading": "L\xE4dt..."
 };
 
 // src/i18n/en.json
@@ -355,7 +356,8 @@ var en_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Sorry, that file is too big. Please upload a smaller file.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Please upload {maxItems} or fewer files.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Please upload at least {minItems} file(s).",
-  "df.wise.PersistAsyncSchema.genericError": "Something went wrong, please try again."
+  "df.wise.PersistAsyncSchema.genericError": "Something went wrong, please try again.",
+  "df.wise.SearchLayout.loading": "Loading..."
 };
 
 // src/i18n/es.json
@@ -389,7 +391,8 @@ var es_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Lo sentimos, el archivo pesa demasiado. Sube uno m\xE1s peque\xF1o.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Sube {maxItems} o menos archivos.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Sube al menos {minItems} archivo(s).",
-  "df.wise.PersistAsyncSchema.genericError": "Ha habido un error. Int\xE9ntalo de nuevo."
+  "df.wise.PersistAsyncSchema.genericError": "Ha habido un error. Int\xE9ntalo de nuevo.",
+  "df.wise.SearchLayout.loading": "Cargando..."
 };
 
 // src/i18n/fr.json
@@ -423,7 +426,8 @@ var fr_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Nous sommes d\xE9sol\xE9s, ce fichier est trop volumineux. Veuillez t\xE9l\xE9charger un fichier plus petit.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Veuillez t\xE9l\xE9charger {maxItems} fichiers ou moins.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Veuillez t\xE9l\xE9charger au moins {minItems} fichier(s).",
-  "df.wise.PersistAsyncSchema.genericError": "Une erreur s'est produite, veuillez r\xE9essayer."
+  "df.wise.PersistAsyncSchema.genericError": "Une erreur s'est produite, veuillez r\xE9essayer.",
+  "df.wise.SearchLayout.loading": "Chargement..."
 };
 
 // src/i18n/hu.json
@@ -457,7 +461,8 @@ var hu_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Sajnos ez a f\xE1jl t\xFAl nagy. K\xE9r\xFCnk, t\xF6lts fel egy kisebb f\xE1jlt.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "K\xE9r\xFCnk, hogy legfeljebb {maxItems} f\xE1jlt t\xF6lts fel.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "K\xE9r\xFCnk, hogy legal\xE1bb {minItems} f\xE1jlt t\xF6lts fel.",
-  "df.wise.PersistAsyncSchema.genericError": "Valami hiba t\xF6rt\xE9nt. K\xE9r\xFCnk, pr\xF3b\xE1ld \xFAjra."
+  "df.wise.PersistAsyncSchema.genericError": "Valami hiba t\xF6rt\xE9nt. K\xE9r\xFCnk, pr\xF3b\xE1ld \xFAjra.",
+  "df.wise.SearchLayout.loading": "Bet\xF6lt\xE9s..."
 };
 
 // src/i18n/id.json
@@ -491,7 +496,8 @@ var id_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Maaf, file Anda terlalu besar. Silakan unggah file yang lebih kecil.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Harap unggah {maxItems} file atau kurang.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Harap unggah sedikitnya {minItems} file.",
-  "df.wise.PersistAsyncSchema.genericError": "Terjadi kesalahan, mohon coba lagi."
+  "df.wise.PersistAsyncSchema.genericError": "Terjadi kesalahan, mohon coba lagi.",
+  "df.wise.SearchLayout.loading": "Memuat..."
 };
 
 // src/i18n/it.json
@@ -525,7 +531,8 @@ var it_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Spiacenti, il file \xE8 troppo grande. Carica un file di dimensioni inferiori.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Carica al massimo {maxItems} file.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Carica almeno {minItems} file.",
-  "df.wise.PersistAsyncSchema.genericError": "Qualcosa \xE8 andato storto. Riprova."
+  "df.wise.PersistAsyncSchema.genericError": "Qualcosa \xE8 andato storto. Riprova.",
+  "df.wise.SearchLayout.loading": "Caricamento..."
 };
 
 // src/i18n/ja.json
@@ -559,7 +566,8 @@ var ja_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "\u5927\u5909\u7533\u3057\u8A33\u3054\u3056\u3044\u307E\u305B\u3093\u304C\u3001\u30D5\u30A1\u30A4\u30EB\u304C\u5927\u304D\u3059\u304E\u307E\u3059\u3002\u3053\u308C\u3088\u308A\u5C0F\u3055\u3044\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "{maxItems}\u500B\u4EE5\u4E0B\u306E\u30D5\u30A1\u30A4\u30EB\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "df.wise.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",
-  "df.wise.PersistAsyncSchema.genericError": "\u554F\u984C\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002"
+  "df.wise.PersistAsyncSchema.genericError": "\u554F\u984C\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
+  "df.wise.SearchLayout.loading": "\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026"
 };
 
 // src/i18n/pl.json
@@ -593,7 +601,8 @@ var pl_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Przepraszamy, ten plik jest zbyt du\u017Cy. Prze\u015Blij mniejszy plik.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Prze\u015Blij do {maxItems} plik\xF3w.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Prze\u015Blij co najmniej nast\u0119puj\u0105c\u0105 liczb\u0119 plik\xF3w: {minItems}.",
-  "df.wise.PersistAsyncSchema.genericError": "Wyst\u0105pi\u0142 b\u0142\u0105d, prosimy spr\xF3bowa\u0107 ponownie."
+  "df.wise.PersistAsyncSchema.genericError": "Wyst\u0105pi\u0142 b\u0142\u0105d, prosimy spr\xF3bowa\u0107 ponownie.",
+  "df.wise.SearchLayout.loading": "Trwa \u0142adowanie..."
 };
 
 // src/i18n/pt.json
@@ -627,7 +636,8 @@ var pt_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Este arquivo \xE9 muito grande. Por favor, envie um arquivo menor.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Por favor, envie {maxItems} ou menos arquivos.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Por favor, envie pelo menos {minItems} arquivo(s).",
-  "df.wise.PersistAsyncSchema.genericError": "Ocorreu um erro. Por favor, tente novamente."
+  "df.wise.PersistAsyncSchema.genericError": "Ocorreu um erro. Por favor, tente novamente.",
+  "df.wise.SearchLayout.loading": "Carregando..."
 };
 
 // src/i18n/ro.json
@@ -661,7 +671,8 @@ var ro_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Ne pare r\u0103u, acel fi\u0219ier este prea mare. Te rug\u0103m s\u0103 \xEEncarci un fi\u0219ier mai mic.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Te rug\u0103m s\u0103 \xEEncarci {maxItems} fi\u0219iere sau mai pu\u021Bine.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "Te rug\u0103m s\u0103 \xEEncarci cel pu\u021Bin {minItems} fi\u0219ier(e).",
-  "df.wise.PersistAsyncSchema.genericError": "Ceva nu a mers bine, te rug\u0103m s\u0103 \xEEncerci din nou."
+  "df.wise.PersistAsyncSchema.genericError": "Ceva nu a mers bine, te rug\u0103m s\u0103 \xEEncerci din nou.",
+  "df.wise.SearchLayout.loading": "Se \xEEncarc\u0103..."
 };
 
 // src/i18n/ru.json
@@ -695,7 +706,8 @@ var ru_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "\u0418\u0437\u0432\u0438\u043D\u0438\u0442\u0435, \u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0431\u043E\u043B\u044C\u0448\u043E\u0439. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u043C\u0435\u043D\u044C\u0448\u0435\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 {maxItems} \u0444\u0430\u0439\u043B\u043E\u0432.",
   "df.wise.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).",
-  "df.wise.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."
+  "df.wise.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.",
+  "df.wise.SearchLayout.loading": "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430..."
 };
 
 // src/i18n/th.json
@@ -729,7 +741,8 @@ var th_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E1F\u0E25\u0E4C\u0E19\u0E31\u0E49\u0E19\u0E43\u0E2B\u0E0D\u0E48\u0E40\u0E01\u0E34\u0E19\u0E44\u0E1B \u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E35\u0E02\u0E19\u0E32\u0E14\u0E40\u0E25\u0E47\u0E01\u0E25\u0E07",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "\u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14 {maxItems} \u0E44\u0E1F\u0E25\u0E4C\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
   "df.wise.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",
-  "df.wise.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"
+  "df.wise.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",
+  "df.wise.SearchLayout.loading": "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..."
 };
 
 // src/i18n/tr.json
@@ -763,7 +776,8 @@ var tr_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "\xDCzg\xFCn\xFCz, bu dosya \xE7ok b\xFCy\xFCk. L\xFCtfen daha k\xFC\xE7\xFCk bir dosya y\xFCkleyin.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "L\xFCtfen {maxItems} veya daha az dosya y\xFCkleyin.",
   "df.wise.MultipleFileUploadSchema.minItemsError": "L\xFCtfen en az {minItems} dosya y\xFCkleyin.",
-  "df.wise.PersistAsyncSchema.genericError": "Bir \u015Feyler ters gitti, l\xFCtfen tekrar deneyin."
+  "df.wise.PersistAsyncSchema.genericError": "Bir \u015Feyler ters gitti, l\xFCtfen tekrar deneyin.",
+  "df.wise.SearchLayout.loading": "Y\xFCkleniyor..."
 };
 
 // src/i18n/zh_CN.json
@@ -797,7 +811,8 @@ var zh_CN_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8BE5\u6587\u4EF6\u592A\u5927\u3002\u8BF7\u4E0A\u4F20\u4E00\u4E2A\u66F4\u5C0F\u7684\u6587\u4EF6\u3002",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "\u8BF7\u4E0A\u4F20\u4E0D\u8D85\u8FC7 {maxItems} \u4E2A\u6587\u4EF6\u3002",
   "df.wise.MultipleFileUploadSchema.minItemsError": "\u8BF7\u4E0A\u4F20\u81F3\u5C11 {minItems} \u4E2A\u6587\u4EF6\u3002",
-  "df.wise.PersistAsyncSchema.genericError": "\u51FA\u9519\u4E86\uFF0C\u8BF7\u91CD\u8BD5\u3002"
+  "df.wise.PersistAsyncSchema.genericError": "\u51FA\u9519\u4E86\uFF0C\u8BF7\u91CD\u8BD5\u3002",
+  "df.wise.SearchLayout.loading": "\u6B63\u5728\u52A0\u8F7D\u2026"
 };
 
 // src/i18n/zh_HK.json
@@ -831,7 +846,8 @@ var zh_HK_default = {
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8A72\u6A94\u6848\u592A\u5927\u3002\u8ACB\u4E0A\u8F09\u4E00\u500B\u8F03\u5C0F\u7684\u6A94\u6848\u3002",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "\u8ACB\u4E0D\u8981\u4E0A\u8F09\u8D85\u904E{maxItems}\u500B\u6A94\u6848\u3002",
   "df.wise.MultipleFileUploadSchema.minItemsError": "\u8ACB\u4E0A\u8F09\u81F3\u5C11{minItems}\u500B\u6A94\u6848\u3002",
-  "df.wise.PersistAsyncSchema.genericError": "\u51FA\u73FE\u4E86\u554F\u984C\uFF0C\u8ACB\u518D\u8A66\u4E00\u6B21\u3002"
+  "df.wise.PersistAsyncSchema.genericError": "\u51FA\u73FE\u4E86\u554F\u984C\uFF0C\u8ACB\u518D\u8A66\u4E00\u6B21\u3002",
+  "df.wise.SearchLayout.loading": "\u8F09\u5165\u4E2D\u2026"
 };
 
 // src/i18n/index.ts
@@ -865,7 +881,7 @@ var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
 var import_react16 = require("react");
-var import_react_intl14 = require("react-intl");
+var import_react_intl16 = require("react-intl");
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
 // ../renderers/src/contexts/RendererHttpClientContext.tsx
@@ -979,10 +995,29 @@ function LabelContentWithHelp({ text, help }) {
 
 // ../renderers/src/components/FieldInput.tsx
 var import_jsx_runtime5 = 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_runtime5.jsx)(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components3.Field, { id, label: labelContent, hint: description, error, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_components3.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
@@ -991,9 +1026,27 @@ var import_jsx_runtime6 = 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_runtime6.jsx)(FieldInput_default, { id, label: "", description: "", error, help, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components4.Checkbox, __spreadValues({ id }, checkboxProps)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldInput_default, { id, label: "", description: "", validation: validationState, help, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components4.Checkbox, __spreadValues({ id }, checkboxProps)) });
   }
 };
 var BooleanInputRenderer_default = BooleanInputRenderer;
@@ -1218,23 +1271,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_runtime11.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VariableDateInput_default, { control, inputProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VariableDateInput_default, { control, inputProps })
+      }
+    );
   }
 };
 var DateInputRenderer_default = DateInputRenderer;
@@ -1522,23 +1585,33 @@ var import_jsx_runtime25 = 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_runtime25.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_components13.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_runtime25.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_runtime25.jsx)(
+          import_components13.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;
@@ -1644,10 +1717,10 @@ function MultiSelectInputRendererComponent(props) {
     disabled,
     label,
     help,
-    error,
     options,
     placeholder,
     selectedIndices,
+    validationState,
     onSelect
   } = props;
   const mergedIndices = stagedIndices != null ? stagedIndices : selectedIndices;
@@ -1678,39 +1751,49 @@ function MultiSelectInputRendererComponent(props) {
     };
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components18.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_components18.SelectInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(
+        import_components18.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;
 
@@ -1726,8 +1809,8 @@ function UploadFieldInput({
   children,
   label,
   description,
-  error,
-  help
+  help,
+  validation
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
@@ -1735,12 +1818,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_runtime31.jsx)("label", { htmlFor: id, className: "control-label", children: labelContent }),
         children,
-        error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components19.InlineAlert, { type: "negative", id: descriptionId, children: error })
+        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components19.InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
       ]
     }
   );
@@ -1783,10 +1866,10 @@ var MultiUploadInputRenderer = {
       label,
       description,
       disabled,
-      error,
       maxSize,
       maxItems,
       uploadLabel,
+      validationState,
       onUpload,
       onDelete
     } = props;
@@ -1799,22 +1882,32 @@ var MultiUploadInputRenderer = {
     };
     const onDeleteFile = async (fileId) => onDelete(String(fileId));
     const descriptionId = description ? `${id}-description` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UploadFieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_components20.UploadInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)(
+          import_components20.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;
@@ -1825,21 +1918,31 @@ var import_jsx_runtime33 = 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_runtime33.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_components21.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_runtime33.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_runtime33.jsx)(
+          import_components21.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;
@@ -1959,9 +2062,9 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
-    error,
     items,
     title,
+    validationState,
     onEdit,
     onAdd,
     onSave,
@@ -1997,7 +2100,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_runtime35.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
@@ -2010,7 +2113,7 @@ function Repeatable(props) {
               onClick: () => onAddItem()
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.InlineAlert, { type: "negative", children: error })
+          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.InlineAlert, { type: "negative", children: validationState.message })
         ]
       }
     ),
@@ -2049,7 +2152,7 @@ function ItemSummaryOption({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-var import_components25 = require("@transferwise/components");
+var import_components26 = require("@transferwise/components");
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
 var import_react_intl10 = require("react-intl");
@@ -2075,28 +2178,45 @@ var generic_error_messages_default = (0, import_react_intl9.defineMessages)({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
+var import_components25 = require("@transferwise/components");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function ErrorResult({ state }) {
   const intl = (0, import_react_intl10.useIntl)();
+  const buttonVisualProps = {
+    priority: "tertiary",
+    size: "sm",
+    style: { marginTop: "-2px", padding: "0", width: "auto", display: "inline" }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      "a",
-      {
-        href: "/",
-        onClick: (e) => {
-          e.preventDefault();
+      import_components25.Button,
+      __spreadProps(__spreadValues({}, buttonVisualProps), {
+        onClick: () => {
           state.onRetry();
         },
         children: intl.formatMessage(generic_error_messages_default.retry)
-      }
+      })
     )
   ] });
 }
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_react10 = require("react");
+
+// ../renderers/src/messages/search.messages.ts
+var import_react_intl11 = require("react-intl");
+var search_messages_default = (0, import_react_intl11.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_intl12 = require("react-intl");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function BlockSearchRendererComponent({
   id,
@@ -2109,9 +2229,10 @@ function BlockSearchRendererComponent({
 }) {
   const [hasSearched, setHasSearched] = (0, import_react10.useState)(false);
   const trackEvent = useTrackEvent();
+  const { formatMessage } = (0, import_react_intl12.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_components25.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_components26.Input,
       {
         id,
         name: id,
@@ -2127,7 +2248,7 @@ function BlockSearchRendererComponent({
         }
       }
     ) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: "Loading..." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SearchResultContent, { state, onChange })
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SearchResultContent, { state, onChange })
   ] });
 }
 function SearchResultContent({
@@ -2147,16 +2268,16 @@ function SearchResultContent({
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components25.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components26.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults({
   state
 }) {
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components25.NavigationOptionsList, { children: state.results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components26.NavigationOptionsList, { children: state.results.map((result) => {
     const { icon, image } = result;
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_components25.NavigationOption,
+      import_components26.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -2177,10 +2298,10 @@ function SearchResults({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
-var import_components26 = require("@transferwise/components");
+var import_components27 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_react11 = require("react");
-var import_react_intl11 = require("react-intl");
+var import_react_intl13 = require("react-intl");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
@@ -2192,9 +2313,9 @@ function InlineSearchRenderer({
 }) {
   const [hasSearched, setHasSearched] = (0, import_react11.useState)(false);
   const trackEvent = useTrackEvent();
-  const intl = (0, import_react_intl11.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_components26.Typeahead,
+  const intl = (0, import_react_intl13.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_components27.Typeahead,
     {
       id: "typeahead-input-id",
       intl,
@@ -2239,14 +2360,15 @@ function mapResultToTypeaheadOption(result) {
   };
 }
 function TypeaheadFooter({ state, isLoading }) {
+  const { formatMessage } = (0, import_react_intl13.useIntl)();
   if (state.type === "noResults") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components26.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components27.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorResult, { state }) });
   }
   if (state.type === "pending" || isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "m-t-2 m-x-2", children: "Loading..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
   }
   return null;
 }
@@ -2261,7 +2383,7 @@ var SearchRenderer = {
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
-var import_components27 = require("@transferwise/components");
+var import_components28 = require("@transferwise/components");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function RadioInputRendererComponent(props) {
   const {
@@ -2269,36 +2391,46 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_components27.RadioGroup,
+    /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.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_runtime40.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          import_components28.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_runtime40.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_components28 = require("@transferwise/components");
+var import_components29 = require("@transferwise/components");
 var import_react12 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
@@ -2307,11 +2439,11 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   (0, import_react12.useEffect)(() => {
@@ -2320,41 +2452,51 @@ function TabInputRendererComponent(props) {
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_components28.Tabs,
+    /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(import_jsx_runtime41.Fragment, {}),
-          disabled: option.disabled || disabled
-        })),
-        onTabSelect: onSelect
+        id,
+        label,
+        help,
+        description,
+        validation: validationState,
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_components29.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_runtime41.jsx)(import_jsx_runtime41.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_components30 = require("@transferwise/components");
+var import_components31 = require("@transferwise/components");
 
 // ../renderers/src/SelectInputRenderer/SelectTriggerMedia.tsx
-var import_components29 = require("@transferwise/components");
+var import_components30 = require("@transferwise/components");
 var import_jsx_runtime42 = 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_runtime42.jsx)(import_components29.Avatar, { type: import_components29.AvatarType.ICON, size: 24, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components30.Avatar, { type: import_components30.AvatarType.ICON, size: 24, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { name: icon.name }) });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components29.Avatar, { type: import_components29.AvatarType.ICON, size: 24, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components30.Avatar, { type: import_components30.AvatarType.ICON, size: 24, children: icon.text });
   }
   return null;
 }
@@ -2367,13 +2509,13 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     placeholder,
     required,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   const items = options.map(
@@ -2401,54 +2543,84 @@ function SelectInputRendererComponent(props) {
       description: option.description,
       icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(OptionMedia, { icon: option.icon, image: option.image })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components30.SelectInputOptionContent, __spreadValues({}, contentProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components31.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_components30.SelectInput,
+    /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)(
+          import_components31.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_react13 = require("react");
-var import_components31 = require("@transferwise/components");
+var import_components32 = require("@transferwise/components");
 var import_jsx_runtime44 = 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_react13.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_components31.SegmentedControl,
+    /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)(
+          import_components32.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_runtime44.jsx)("div", { id: `${id}-children`, children })
   ] });
 }
@@ -2475,21 +2647,28 @@ var SelectInputRenderer = {
 var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
-var import_components32 = require("@transferwise/components");
+var import_components33 = require("@transferwise/components");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var StatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components32.Header, { title }) : null,
-    items.map(({ description, icon, status, title: itemTitle }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      import_components32.Summary,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components33.Header, { title }) : null,
+    items.map(({ callToAction, description, icon, status, title: itemTitle }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      import_components33.Summary,
       {
         title: itemTitle,
         description,
         icon: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime46.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 || ""}`
     ))
   ] })
 };
@@ -2502,7 +2681,7 @@ var mapStatus = (status) => {
 };
 
 // ../renderers/src/components/VariableTextInput.tsx
-var import_components33 = require("@transferwise/components");
+var import_components34 = require("@transferwise/components");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function VariableTextInput({
   control,
@@ -2528,37 +2707,37 @@ function TextInput(_a) {
   if (typeof displayFormat === "string") {
     const inputProps = __spreadValues({ id, name: id, className: "form-control" }, rest);
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      import_components33.InputWithDisplayFormat,
+      import_components34.InputWithDisplayFormat,
       __spreadValues({
         displayPattern: displayFormat,
         onChange: (newValue) => onChange(newValue)
       }, inputProps)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components33.Input, __spreadValues({ id, name: id, onChange: (e) => onChange(e.target.value) }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components34.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_runtime47.jsx)(
-    import_components33.TextareaWithDisplayFormat,
+    import_components34.TextareaWithDisplayFormat,
     __spreadValues({
       displayPattern: displayFormat,
       onChange: (newValue) => onChange(newValue)
     }, textAreaProps)
-  ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components33.TextArea, __spreadValues({ onChange: (e) => onChange(e.target.value) }, textAreaProps));
+  ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components34.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_runtime47.jsx)(
-    import_components33.InputWithDisplayFormat,
+    import_components34.InputWithDisplayFormat,
     __spreadValues({
       displayPattern: displayFormat,
       onChange: (newValue) => onChange(numericValueOrNull(newValue))
     }, numericProps)
   ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_components33.Input,
+    import_components34.Input,
     __spreadValues({
       onChange: ({ target: { value: newValue } }) => onChange(numericValueOrNull(newValue))
     }, numericProps)
@@ -2566,7 +2745,7 @@ function NumericInput(_a) {
 }
 function PhoneNumberInput(_a) {
   var _b = _a, { value } = _b, rest = __objRest(_b, ["value"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components33.PhoneNumberInput, __spreadValues({ initialValue: value }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components34.PhoneNumberInput, __spreadValues({ initialValue: value }, rest));
 }
 var VariableTextInput_default = VariableTextInput;
 
@@ -2585,6 +2764,7 @@ var TextInputRenderer = {
       maxLength,
       minLength,
       type,
+      validationState,
       value: initialValue
     } = _a, rest = __objRest(_a, [
       "id",
@@ -2596,22 +2776,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_runtime48.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(VariableTextInput_default, { control, inputProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(VariableTextInput_default, { control, inputProps })
+      }
+    );
   }
 };
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_components34 = require("@transferwise/components");
+var import_components35 = require("@transferwise/components");
 var import_jsx_runtime49 = 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(() => ({
@@ -2623,19 +2814,28 @@ var UploadInputRenderer = {
     };
     return (
       // We don't pass help here as there is no sensible place to display it
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UploadFieldInput_default, { id, label: void 0, description: void 0, error, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        import_components34.UploadInput,
+      /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)(
+            import_components35.UploadInput,
+            {
+              id,
+              description,
+              disabled,
+              fileTypes: getAcceptsString(accepts),
+              sizeLimit: maxSize ? toKilobytes(maxSize) : void 0,
+              uploadButtonTitle: label,
+              onDeleteFile,
+              onUploadFile
+            }
+          )
         }
-      ) })
+      )
     );
   }
 };
@@ -2650,10 +2850,10 @@ var LargeUploadRenderer = {
       label,
       description,
       disabled,
-      error,
       help,
       maxSize,
       type,
+      validationState,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -2662,10 +2862,10 @@ var LargeUploadRenderer = {
       "label",
       "description",
       "disabled",
-      "error",
       "help",
       "maxSize",
       "type",
+      "validationState",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id });
@@ -2678,21 +2878,31 @@ var LargeUploadRenderer = {
         throw e;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_components34.Upload,
-      __spreadProps(__spreadValues({}, uploadProps), {
-        usAccept: getAcceptsString(accepts),
-        usDisabled: disabled,
-        onSuccess: onUploadFile,
-        onFailure: async () => onUpload(null),
-        onCancel: async () => onUpload(null)
-      })
-    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_components35.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_components35 = require("@transferwise/components");
+var import_components36 = require("@transferwise/components");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
@@ -2706,9 +2916,9 @@ var ReviewRenderer = {
       }
     } : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components35.Header, { title: title != null ? title : "", action }),
+      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components36.Header, { title: title != null ? title : "", action }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_components35.DefinitionList,
+        import_components36.DefinitionList,
         {
           layout: orientation,
           definitions: fields.map(({ label, value, help }, index) => ({
@@ -2756,11 +2966,11 @@ var getFieldValue = (value, help, orientation) => {
 var import_react15 = require("react");
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_react_intl13 = require("react-intl");
+var import_react_intl15 = require("react-intl");
 
 // ../renderers/src/messages/external-confirmation.messages.ts
-var import_react_intl12 = require("react-intl");
-var external_confirmation_messages_default = (0, import_react_intl12.defineMessages)({
+var import_react_intl14 = require("react-intl");
+var external_confirmation_messages_default = (0, import_react_intl14.defineMessages)({
   title: {
     id: "df.wise.ExternalConfirmation.title",
     defaultMessage: "Please confirm",
@@ -2784,19 +2994,19 @@ var external_confirmation_messages_default = (0, import_react_intl12.defineMessa
 });
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_components36 = require("@transferwise/components");
+var import_components37 = require("@transferwise/components");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function ExternalConfirmationDialog({
   external,
   onClose
 }) {
-  const { formatMessage } = (0, import_react_intl13.useIntl)();
+  const { formatMessage } = (0, import_react_intl15.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components36.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_runtime51.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_runtime51.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_components36.Button,
+        import_components37.Button,
         {
           block: true,
           className: "m-b-2",
@@ -2809,7 +3019,7 @@ function ExternalConfirmationDialog({
           children: formatMessage(external_confirmation_messages_default.open)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components36.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components37.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
     ] }) })
   ] }) });
 }
@@ -2838,23 +3048,21 @@ function useExternal(url) {
 }
 
 // ../renderers/src/step/BackButton.tsx
-var import_components37 = require("@transferwise/components");
+var import_components38 = require("@transferwise/components");
 var import_icons3 = require("@transferwise/icons");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "m-b-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components37.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components38.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -2862,7 +3070,7 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components38 = require("@transferwise/components");
+var import_components39 = require("@transferwise/components");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
@@ -2878,10 +3086,10 @@ function StepRendererComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BackButton_default, __spreadValues({}, back)) : null,
     title || description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components38.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components39.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
       description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components38.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components39.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -2943,7 +3151,7 @@ var DynamicFragment = (0, import_react16.forwardRef)(function DynamicFragment2(p
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RendererHttpClientProvider, { httpClient, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_dynamic_flow_client2.DynamicFragmentCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl14.useIntl)();
+  const { locale } = (0, import_react_intl16.useIntl)();
   return (0, import_react16.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);