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

package/build/main.mjs

@@ -965,10 +965,29 @@ function LabelContentWithHelp({ text, help }) {
 
 // ../renderers/src/components/FieldInput.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-function FieldInput({ id, children, label, error, description, help }) {
+function FieldInput({ id, children, label, validation, description, help }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx5(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ jsx5(Field, { id, label: labelContent, hint: description, error, children });
+  return /* @__PURE__ */ jsx5(
+    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
@@ -977,9 +996,27 @@ import { jsx as jsx6 } from "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__ */ jsx6(FieldInput_default, { id, label: "", description: "", error, help, children: /* @__PURE__ */ jsx6(Checkbox, __spreadValues({ id }, checkboxProps)) });
+    return /* @__PURE__ */ jsx6(FieldInput_default, { id, label: "", description: "", validation: validationState, help, children: /* @__PURE__ */ jsx6(Checkbox, __spreadValues({ id }, checkboxProps)) });
   }
 };
 var BooleanInputRenderer_default = BooleanInputRenderer;
@@ -1204,23 +1241,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__ */ jsx11(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ jsx11(VariableDateInput_default, { control, inputProps }) });
+    return /* @__PURE__ */ jsx11(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ jsx11(VariableDateInput_default, { control, inputProps })
+      }
+    );
   }
 };
 var DateInputRenderer_default = DateInputRenderer;
@@ -1508,23 +1555,33 @@ import { jsx as jsx24 } from "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__ */ jsx24(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ jsx24(
-      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__ */ jsx24(
+      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__ */ jsx24(
+          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;
@@ -1630,10 +1687,10 @@ function MultiSelectInputRendererComponent(props) {
     disabled,
     label,
     help,
-    error,
     options,
     placeholder,
     selectedIndices,
+    validationState,
     onSelect
   } = props;
   const mergedIndices = stagedIndices != null ? stagedIndices : selectedIndices;
@@ -1664,39 +1721,49 @@ function MultiSelectInputRendererComponent(props) {
     };
     return /* @__PURE__ */ jsx29(SelectInputOptionContent, __spreadValues({}, contentProps));
   };
-  return /* @__PURE__ */ jsx29(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ jsx29(
-    SelectInput,
+  return /* @__PURE__ */ jsx29(
+    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__ */ jsx29(
+        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;
 
@@ -1712,8 +1779,8 @@ function UploadFieldInput({
   children,
   label,
   description,
-  error,
-  help
+  help,
+  validation
 }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx30(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
@@ -1721,12 +1788,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__ */ jsx30("label", { htmlFor: id, className: "control-label", children: labelContent }),
         children,
-        error && /* @__PURE__ */ jsx30(InlineAlert, { type: "negative", id: descriptionId, children: error })
+        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ jsx30(InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
       ]
     }
   );
@@ -1769,10 +1836,10 @@ var MultiUploadInputRenderer = {
       label,
       description,
       disabled,
-      error,
       maxSize,
       maxItems,
       uploadLabel,
+      validationState,
       onUpload,
       onDelete
     } = props;
@@ -1785,22 +1852,32 @@ var MultiUploadInputRenderer = {
     };
     const onDeleteFile = async (fileId) => onDelete(String(fileId));
     const descriptionId = description ? `${id}-description` : void 0;
-    return /* @__PURE__ */ jsx31(UploadFieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ jsx31(
-      UploadInput,
+    return /* @__PURE__ */ jsx31(
+      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__ */ jsx31(
+          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;
@@ -1811,21 +1888,31 @@ import { jsx as jsx32 } from "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__ */ jsx32(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ jsx32(
-      Input2,
-      __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__ */ jsx32(
+      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__ */ jsx32(
+          Input2,
+          __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;
@@ -1945,9 +2032,9 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
-    error,
     items,
     title,
+    validationState,
     onEdit,
     onAdd,
     onSave,
@@ -1983,7 +2070,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__ */ jsx34(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
@@ -1996,7 +2083,7 @@ function Repeatable(props) {
               onClick: () => onAddItem()
             }
           ),
-          error && /* @__PURE__ */ jsx34(InlineAlert2, { type: "negative", children: error })
+          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx34(InlineAlert2, { type: "negative", children: validationState.message })
         ]
       }
     ),
@@ -2061,22 +2148,26 @@ var generic_error_messages_default = defineMessages5({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
+import { Button as Button5 } from "@transferwise/components";
 import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
   const intl = useIntl5();
+  const buttonVisualProps = {
+    priority: "tertiary",
+    size: "sm",
+    style: { marginTop: "-2px", padding: "0", width: "auto", display: "inline" }
+  };
   return /* @__PURE__ */ jsxs11("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
     /* @__PURE__ */ jsx35(
-      "a",
-      {
-        href: "/",
-        onClick: (e) => {
-          e.preventDefault();
+      Button5,
+      __spreadProps(__spreadValues({}, buttonVisualProps), {
+        onClick: () => {
           state.onRetry();
         },
         children: intl.formatMessage(generic_error_messages_default.retry)
-      }
+      })
     )
   ] });
 }
@@ -2096,7 +2187,7 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = useState6(false);
   const trackEvent = useTrackEvent();
   return /* @__PURE__ */ jsxs12("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx36(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx36(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx36(
       Input4,
       {
         id,
@@ -2179,7 +2270,7 @@ function InlineSearchRenderer({
   const [hasSearched, setHasSearched] = useState7(false);
   const trackEvent = useTrackEvent();
   const intl = useIntl6();
-  return /* @__PURE__ */ jsx37("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx37(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx37("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx37(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx37(
     Typeahead,
     {
       id: "typeahead-input-id",
@@ -2255,30 +2346,40 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx39(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ jsx39("span", { children: /* @__PURE__ */ jsx39(
-      RadioGroup,
+    /* @__PURE__ */ jsx39(
+      FieldInput_default,
       {
-        name: id,
-        radios: options.map((option, index) => ({
-          label: option.title,
-          value: index,
-          secondary: option.description,
-          disabled: option.disabled || disabled,
-          avatar: /* @__PURE__ */ jsx39(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__ */ jsx39("span", { children: /* @__PURE__ */ jsx39(
+          RadioGroup,
+          {
+            name: id,
+            radios: options.map((option, index) => ({
+              label: option.title,
+              value: index,
+              secondary: option.description,
+              disabled: option.disabled || disabled,
+              avatar: /* @__PURE__ */ jsx39(OptionMedia, { icon: option.icon, image: option.image })
+            })),
+            selectedValue: selectedIndex != null ? selectedIndex : void 0,
+            onChange: onSelect
+          },
+          `${id}-${selectedIndex}`
+        ) })
+      }
+    ),
     children
   ] });
 }
@@ -2293,11 +2394,11 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   useEffect3(() => {
@@ -2306,21 +2407,31 @@ function TabInputRendererComponent(props) {
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    /* @__PURE__ */ jsx40(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ jsx40(
-      Tabs,
+    /* @__PURE__ */ jsx40(
+      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__ */ jsx40(Fragment5, {}),
-          disabled: option.disabled || disabled
-        })),
-        onTabSelect: onSelect
+        id,
+        label,
+        help,
+        description,
+        validation: validationState,
+        children: /* @__PURE__ */ jsx40(
+          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__ */ jsx40(Fragment5, {}),
+              disabled: option.disabled || disabled
+            })),
+            onTabSelect: onSelect
+          }
+        )
       }
-    ) }),
+    ),
     children
   ] });
 }
@@ -2353,13 +2464,13 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
-    error,
     help,
     label,
     options,
     placeholder,
     required,
     selectedIndex,
+    validationState,
     onSelect
   } = props;
   const items = options.map(
@@ -2390,20 +2501,30 @@ function SelectInputRendererComponent(props) {
     return /* @__PURE__ */ jsx42(SelectInputOptionContent2, __spreadValues({}, contentProps));
   };
   return /* @__PURE__ */ jsxs15(Fragment6, { children: [
-    /* @__PURE__ */ jsx42(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ jsx42(
-      SelectInput2,
+    /* @__PURE__ */ jsx42(
+      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__ */ jsx42(
+          SelectInput2,
+          {
+            name: id,
+            placeholder,
+            items,
+            disabled,
+            value: selectedIndex,
+            renderValue,
+            filterable: items.length >= 8,
+            onChange: onSelect,
+            onClear: required ? void 0 : () => onSelect(null)
+          }
+        )
       }
-    ) }),
+    ),
     children
   ] });
 }
@@ -2413,28 +2534,48 @@ import { useEffect as useEffect4 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs16 } from "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;
   useEffect4(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ jsxs16(Fragment7, { children: [
-    /* @__PURE__ */ jsx43(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ jsx43(
-      SegmentedControl,
+    /* @__PURE__ */ jsx43(
+      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__ */ jsx43(
+          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__ */ jsx43("div", { id: `${id}-children`, children })
   ] });
 }
@@ -2467,15 +2608,22 @@ var StatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ jsxs17("div", { className: getMargin(margin), children: [
     title ? /* @__PURE__ */ jsx45(Header5, { title }) : null,
-    items.map(({ description, icon, status, title: itemTitle }) => /* @__PURE__ */ jsx45(
+    items.map(({ callToAction, description, icon, status, title: itemTitle }) => /* @__PURE__ */ jsx45(
       Summary,
       {
         title: itemTitle,
         description,
         icon: icon && "name" in icon ? /* @__PURE__ */ jsx45(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 || ""}`
     ))
   ] })
 };
@@ -2577,6 +2725,7 @@ var TextInputRenderer = {
       maxLength,
       minLength,
       type,
+      validationState,
       value: initialValue
     } = _a, rest = __objRest(_a, [
       "id",
@@ -2588,11 +2737,22 @@ var TextInputRenderer = {
       "maxLength",
       "minLength",
       "type",
+      "validationState",
       "value"
     ]);
     const value = initialValue != null ? initialValue : "";
     const inputProps = __spreadProps(__spreadValues({}, rest), { value, id });
-    return /* @__PURE__ */ jsx47(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ jsx47(VariableTextInput_default, { control, inputProps }) });
+    return /* @__PURE__ */ jsx47(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ jsx47(VariableTextInput_default, { control, inputProps })
+      }
+    );
   }
 };
 var TextInputRenderer_default = TextInputRenderer;
@@ -2603,7 +2763,7 @@ import { jsx as jsx48 } from "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(() => ({
@@ -2615,19 +2775,28 @@ var UploadInputRenderer = {
     };
     return (
       // We don't pass help here as there is no sensible place to display it
-      /* @__PURE__ */ jsx48(UploadFieldInput_default, { id, label: void 0, description: void 0, error, children: /* @__PURE__ */ jsx48(
-        UploadInput2,
+      /* @__PURE__ */ jsx48(
+        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__ */ jsx48(
+            UploadInput2,
+            {
+              id,
+              description,
+              disabled,
+              fileTypes: getAcceptsString(accepts),
+              sizeLimit: maxSize ? toKilobytes(maxSize) : void 0,
+              uploadButtonTitle: label,
+              onDeleteFile,
+              onUploadFile
+            }
+          )
         }
-      ) })
+      )
     );
   }
 };
@@ -2642,10 +2811,10 @@ var LargeUploadRenderer = {
       label,
       description,
       disabled,
-      error,
       help,
       maxSize,
       type,
+      validationState,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -2654,10 +2823,10 @@ var LargeUploadRenderer = {
       "label",
       "description",
       "disabled",
-      "error",
       "help",
       "maxSize",
       "type",
+      "validationState",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id });
@@ -2670,16 +2839,26 @@ var LargeUploadRenderer = {
         throw e;
       }
     };
-    return /* @__PURE__ */ jsx48(FieldInput_default, { id, label, description, error, help, children: /* @__PURE__ */ jsx48(
-      Upload,
-      __spreadProps(__spreadValues({}, uploadProps), {
-        usAccept: getAcceptsString(accepts),
-        usDisabled: disabled,
-        onSuccess: onUploadFile,
-        onFailure: async () => onUpload(null),
-        onCancel: async () => onUpload(null)
-      })
-    ) });
+    return /* @__PURE__ */ jsx48(
+      FieldInput_default,
+      {
+        id,
+        label,
+        description,
+        validation: validationState,
+        help,
+        children: /* @__PURE__ */ jsx48(
+          Upload,
+          __spreadProps(__spreadValues({}, uploadProps), {
+            usAccept: getAcceptsString(accepts),
+            usDisabled: disabled,
+            onSuccess: onUploadFile,
+            onFailure: async () => onUpload(null),
+            onCancel: async () => onUpload(null)
+          })
+        )
+      }
+    );
   }
 };
 
@@ -2776,7 +2955,7 @@ var external_confirmation_messages_default = defineMessages6({
 });
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-import { Button as Button5, Markdown as Markdown5 } from "@transferwise/components";
+import { Button as Button6, Markdown as Markdown5 } from "@transferwise/components";
 import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
 function ExternalConfirmationDialog({
   external,
@@ -2788,7 +2967,7 @@ function ExternalConfirmationDialog({
     /* @__PURE__ */ jsx50(Markdown5, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
     /* @__PURE__ */ jsx50("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs19("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ jsx50(
-        Button5,
+        Button6,
         {
           block: true,
           className: "m-b-2",
@@ -2801,7 +2980,7 @@ function ExternalConfirmationDialog({
           children: formatMessage(external_confirmation_messages_default.open)
         }
       ),
-      /* @__PURE__ */ jsx50(Button5, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
+      /* @__PURE__ */ jsx50(Button6, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
     ] }) })
   ] }) });
 }
@@ -2835,15 +3014,13 @@ import { ArrowLeft } from "@transferwise/icons";
 import { jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
 function BackButton({ title, onClick }) {
   return /* @__PURE__ */ jsx51("div", { className: "m-b-2", children: /* @__PURE__ */ jsxs20(
-    "a",
+    "button",
     {
-      href: "/",
+      type: "button",
       className: "df-back-btn",
+      title,
       "aria-label": title,
-      onClick: (event) => {
-        event.preventDefault();
-        onClick();
-      },
+      onClick,
       children: [
         /* @__PURE__ */ jsx51("span", { className: "sr-only", children: title }),
         /* @__PURE__ */ jsx51(Avatar4, { type: "icon", children: /* @__PURE__ */ jsx51(ArrowLeft, { size: "24" }) })