@wise/dynamic-flow-client-internal 5.20.0-exp-box-cq-2-e95523a → 5.21.0

package/build/main.mjs

@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.19.3" : "0.0.0"
+  typeof process !== "undefined" ? "5.21.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -377,30 +377,25 @@ var AlertRenderer_default = AlertRenderer;
 // ../renderers/src/BoxRenderer.tsx
 var import_classnames = __toESM(require_classnames());
 import { jsx as jsx3 } from "react/jsx-runtime";
-var getBoxRenderer = (className) => {
-  const renderer = {
-    canRenderType: "box",
-    render: ({ children, control, margin, width }) => {
-      const hasFixedWidth = width !== "xl";
-      const hasBorder = control === "bordered" || control === "bordered-web";
-      const contents = /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: (0, import_classnames.default)({
-            [className]: !!className,
-            "df-box-renderer-border": hasBorder,
-            [`df-box-renderer-width-${width}`]: hasFixedWidth,
-            [getMargin(margin)]: !hasFixedWidth
-          }),
-          children
-        }
-      );
-      return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
-    }
-  };
-  return renderer;
+var BoxRenderer = {
+  canRenderType: "box",
+  render: ({ children, control, margin, width }) => {
+    const hasFixedWidth = width !== "xl";
+    const hasBorder = control === "bordered" || control === "bordered-web";
+    const contents = /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: (0, import_classnames.default)("df-box-renderer", {
+          "df-box-renderer-border": hasBorder,
+          [`df-box-renderer-width-${width}`]: hasFixedWidth,
+          [getMargin(margin)]: !hasFixedWidth
+        }),
+        children
+      }
+    );
+    return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
+  }
 };
-var BoxRenderer = getBoxRenderer("df-box-renderer");
 var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx
@@ -856,11 +851,24 @@ var getPriority = (control, tags) => {
   return control && isButtonPriority(control) ? control : "secondary";
 };
 
+// ../renderers/src/CheckboxInputRenderer.tsx
+import { Checkbox, ListItem as ListItem3 } from "@transferwise/components";
+
 // ../renderers/src/components/FieldInput.tsx
 import { Field } from "@transferwise/components";
-import { useEffect as useEffect4, useRef } from "react";
 
-// ../renderers/src/utils/scroll-to-if-not-visible.ts
+// ../renderers/src/utils/useScrollToError.ts
+import { useEffect as useEffect4, useRef } from "react";
+var useScrollToError = (validationState, features) => {
+  const ref = useRef(null);
+  const enabled = (features == null ? void 0 : features.scrollToError) !== false;
+  useEffect4(() => {
+    if ((validationState == null ? void 0 : validationState.status) === "invalid" && (validationState == null ? void 0 : validationState.message) && enabled) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [validationState == null ? void 0 : validationState.status, validationState == null ? void 0 : validationState.message, enabled]);
+  return { ref };
+};
 var scrollToIfNotVisible = (ref) => {
   const rect = ref == null ? void 0 : ref.getBoundingClientRect();
   if (!ref || !rect) {
@@ -921,23 +929,19 @@ function FieldInput({
   description,
   help,
   loadingState = "idle",
-  inlineAlert
+  inlineAlert,
+  features
 }) {
+  var _a;
   const labelContent = label && help ? /* @__PURE__ */ jsx19(LabelContentWithHelp, { text: label, help }) : label;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = useRef(null);
-  useEffect4(() => {
-    if (message) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ jsx19("div", { ref, children: /* @__PURE__ */ jsx19(
     Field,
     {
       id,
       label: labelContent,
       description,
-      message: message != null ? message : inlineAlert == null ? void 0 : inlineAlert.content,
+      message: (_a = validation == null ? void 0 : validation.message) != null ? _a : inlineAlert == null ? void 0 : inlineAlert.content,
       messageLoading: loadingState !== "idle",
       sentiment: mapStatusToSentiment(validation, inlineAlert == null ? void 0 : inlineAlert.context),
       children
@@ -957,33 +961,30 @@ var mapStatusToSentiment = (validation, defaultContext) => {
 };
 var FieldInput_default = FieldInput;
 
-// ../renderers/src/CheckboxInputRenderer.tsx
-import { Checkbox, ListItem as ListItem3 } from "@transferwise/components";
-
-// ../renderers/src/utils/listItem/getMedia.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ jsx20(OptionMedia, { media, preferAvatar }) : void 0;
-
 // ../renderers/src/utils/listItem/getAdditionalText.tsx
 import { ListItem } from "@transferwise/components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var getAdditionalText = (additionalText) => {
   if (!additionalText) {
     return void 0;
   }
-  return /* @__PURE__ */ jsx21(ListItem.AdditionalInfo, { children: additionalText });
+  return /* @__PURE__ */ jsx20(ListItem.AdditionalInfo, { children: additionalText });
 };
 
+// ../renderers/src/utils/listItem/getInlineAlert.tsx
+import { ListItem as ListItem2 } from "@transferwise/components";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ jsx21(ListItem2.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
+
+// ../renderers/src/utils/listItem/getMedia.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ jsx22(OptionMedia, { media, preferAvatar }) : void 0;
+
 // ../renderers/src/utils/listItem/getSupportingValues.ts
 var getSupportingValues = (supportingValues) => {
   return __spreadValues(__spreadValues({}, (supportingValues == null ? void 0 : supportingValues.value) ? { valueTitle: supportingValues.value } : {}), (supportingValues == null ? void 0 : supportingValues.subvalue) ? { valueSubtitle: supportingValues.subvalue } : {});
 };
 
-// ../renderers/src/utils/listItem/getInlineAlert.tsx
-import { ListItem as ListItem2 } from "@transferwise/components";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ jsx22(ListItem2.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
-
 // ../renderers/src/CheckboxInputRenderer.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 var CheckboxInputRenderer = {
@@ -1031,6 +1032,7 @@ var CheckboxComponent = (props) => {
       help,
       inlineAlert: rest.inlineAlert,
       loadingState: rest.fieldLoadingState,
+      features: rest.features,
       children: /* @__PURE__ */ jsx23(Checkbox, __spreadValues({ id }, checkboxProps))
     }
   );
@@ -1046,9 +1048,11 @@ var CheckboxItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ jsx23(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ jsx23("div", { ref, children: /* @__PURE__ */ jsx23(
     ListItem3,
     __spreadValues({
       title,
@@ -1059,7 +1063,7 @@ var CheckboxItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ jsx23(ListItem3.Checkbox, { checked: value, onChange: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var SwitchItemComponent = (props) => {
   const {
@@ -1072,9 +1076,11 @@ var SwitchItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ jsx23(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ jsx23("div", { ref, children: /* @__PURE__ */ jsx23(
     ListItem3,
     __spreadValues({
       title,
@@ -1085,7 +1091,7 @@ var SwitchItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ jsx23(ListItem3.Switch, { checked: value, onClick: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
   if ((validationState == null ? void 0 : validationState.status) === "invalid") {
@@ -1228,6 +1234,7 @@ var DateInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx26(VariableDateInput_default, { control, inputProps })
       }
     );
@@ -1920,6 +1927,7 @@ var IntegerInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx43(InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx43(
           Input,
           __spreadValues({
@@ -2183,6 +2191,7 @@ function MoneyInputRendererComponent(props) {
       description,
       validation: validationState,
       help,
+      features: props.features,
       children: /* @__PURE__ */ jsx52(
         MoneyInput,
         {
@@ -2252,6 +2261,7 @@ function InlineComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2267,6 +2277,7 @@ function InlineComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2334,6 +2345,7 @@ function DefaultComponent(props) {
     autoComplete,
     description,
     disabled,
+    features,
     help,
     options,
     placeholder,
@@ -2379,6 +2391,7 @@ function DefaultComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: /* @__PURE__ */ jsx54(
         SelectInput,
         __spreadValues({
@@ -2425,6 +2438,7 @@ function InlineCheckboxComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2440,6 +2454,7 @@ function InlineCheckboxComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2487,7 +2502,6 @@ import { Status, UploadInput } from "@transferwise/components";
 
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames4 = __toESM(require_classnames());
-import { useEffect as useEffect8, useRef as useRef2 } from "react";
 import { InlineAlert as InlineAlert2 } from "@transferwise/components";
 import { jsx as jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
 function UploadFieldInput({
@@ -2496,17 +2510,12 @@ function UploadFieldInput({
   label,
   description,
   help,
-  validation
+  validation,
+  features
 }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx57(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = useRef2(null);
-  useEffect8(() => {
-    if (message) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -2563,6 +2572,7 @@ var MultiUploadInputRenderer = {
       title,
       description,
       disabled,
+      features,
       maxSize,
       maxItems,
       uploadLabel,
@@ -2585,6 +2595,7 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ jsx58(
           UploadInput,
           {
@@ -2638,6 +2649,7 @@ var NumberInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx59(InputGroup2, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx59(
           Input2,
           __spreadValues({
@@ -2799,6 +2811,7 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
+    features,
     items,
     title,
     validationState,
@@ -2809,6 +2822,7 @@ function Repeatable(props) {
   } = props;
   const { formatMessage } = useIntl9();
   const [openModalType, setOpenModalType] = useState9(null);
+  const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -2831,29 +2845,31 @@ function Repeatable(props) {
     setOpenModalType(null);
   };
   return /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    title && /* @__PURE__ */ jsx62(Header6, { title }),
-    description && /* @__PURE__ */ jsx62("p", { children: description }),
-    /* @__PURE__ */ jsxs14(
-      "div",
-      {
-        className: (0, import_classnames6.default)("form-group", {
-          "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
-        }),
-        children: [
-          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx62(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ jsx62(
-            NavigationOption,
-            {
-              media: /* @__PURE__ */ jsx62(Plus, {}),
-              title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
-              showMediaAtAllSizes: true,
-              onClick: () => onAddItem()
-            }
-          ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx62(InlineAlert3, { type: "negative", children: validationState.message })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs14("div", { ref, children: [
+      title && /* @__PURE__ */ jsx62(Header6, { title }),
+      description && /* @__PURE__ */ jsx62("p", { children: description }),
+      /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          className: (0, import_classnames6.default)("form-group", {
+            "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
+          }),
+          children: [
+            items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx62(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+            /* @__PURE__ */ jsx62(
+              NavigationOption,
+              {
+                media: /* @__PURE__ */ jsx62(Plus, {}),
+                title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
+                showMediaAtAllSizes: true,
+                onClick: () => onAddItem()
+              }
+            ),
+            (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx62(InlineAlert3, { type: "negative", children: validationState.message })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx62(
       Modal4,
       {
@@ -3082,6 +3098,7 @@ function BlockSearchRendererComponent({
   id,
   hint,
   isLoading,
+  features,
   margin,
   query,
   state,
@@ -3092,23 +3109,34 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = useState10(false);
   const { formatMessage } = useIntl12();
   return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx66(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx66(InputGroup3, { addonStart: { content: /* @__PURE__ */ jsx66(Search, { size: 24 }) }, children: /* @__PURE__ */ jsx66(
-      Input4,
+    /* @__PURE__ */ jsx66(
+      FieldInput_default,
       {
         id,
-        name: id,
-        placeholder: hint,
-        type: "text",
-        value: query,
-        onChange: ({ currentTarget: { value } }) => {
-          if (!hasSearched) {
-            setHasSearched(true);
-            trackEvent("Search Started");
+        description: "",
+        validation: void 0,
+        help: "",
+        label: title,
+        features,
+        children: /* @__PURE__ */ jsx66(InputGroup3, { addonStart: { content: /* @__PURE__ */ jsx66(Search, { size: 24 }) }, children: /* @__PURE__ */ jsx66(
+          Input4,
+          {
+            id,
+            name: id,
+            placeholder: hint,
+            type: "text",
+            value: query,
+            onChange: ({ currentTarget: { value } }) => {
+              if (!hasSearched) {
+                setHasSearched(true);
+                trackEvent("Search Started");
+              }
+              onChange(value);
+            }
           }
-          onChange(value);
-        }
+        ) })
       }
-    ) }) }),
+    ),
     isLoading ? /* @__PURE__ */ jsx66("span", { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ jsx66(SearchResultContent, { state, trackEvent })
   ] });
 }
@@ -3177,50 +3205,62 @@ function InlineSearchRenderer({
   id,
   hint,
   isLoading,
+  features,
   margin,
-  onChange,
   state,
   title,
+  onChange,
   trackEvent
 }) {
   const [hasSearched, setHasSearched] = useState11(false);
   const intl = useIntl13();
-  return /* @__PURE__ */ jsx67("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx67(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx67(
-    Typeahead,
+  return /* @__PURE__ */ jsx67("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx67(
+    FieldInput_default,
     {
-      id: "typeahead-input-id",
-      intl,
-      name: "typeahead-input-name",
-      size: "md",
-      placeholder: hint,
-      maxHeight: 100,
-      footer: /* @__PURE__ */ jsx67(TypeaheadFooter, { state, isLoading }),
-      multiple: false,
-      clearable: false,
-      addon: /* @__PURE__ */ jsx67(Search2, { size: 24 }),
-      options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
-      minQueryLength: 1,
-      onChange: (values) => {
-        if (values.length > 0) {
-          const [updatedValue] = values;
-          const { value: result } = updatedValue;
-          if (result) {
-            trackEvent("Search Result Selected", __spreadValues({
-              type: result.type
-            }, result.type === "action" ? { actionId: result.id } : {}));
-            result.onClick();
+      id,
+      description: "",
+      validation: void 0,
+      help: "",
+      label: title,
+      features,
+      children: /* @__PURE__ */ jsx67(
+        Typeahead,
+        {
+          id: "typeahead-input-id",
+          intl,
+          name: "typeahead-input-name",
+          size: "md",
+          placeholder: hint,
+          maxHeight: 100,
+          footer: /* @__PURE__ */ jsx67(TypeaheadFooter, { state, isLoading }),
+          multiple: false,
+          clearable: false,
+          addon: /* @__PURE__ */ jsx67(Search2, { size: 24 }),
+          options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
+          minQueryLength: 1,
+          onChange: (values) => {
+            if (values.length > 0) {
+              const [updatedValue] = values;
+              const { value: result } = updatedValue;
+              if (result) {
+                trackEvent("Search Result Selected", __spreadValues({
+                  type: result.type
+                }, result.type === "action" ? { actionId: result.id } : {}));
+                result.onClick();
+              }
+            }
+          },
+          onInputChange: (query) => {
+            if (!hasSearched) {
+              setHasSearched(true);
+              trackEvent("Search Started");
+            }
+            onChange(query);
           }
         }
-      },
-      onInputChange: (query) => {
-        if (!hasSearched) {
-          setHasSearched(true);
-          trackEvent("Search Started");
-        }
-        onChange(query);
-      }
+      )
     }
-  ) }) });
+  ) });
 }
 function mapResultToTypeaheadOption(result) {
   return {
@@ -3303,6 +3343,7 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3319,6 +3360,7 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx70("span", { children: /* @__PURE__ */ jsx70(
           RadioGroup,
           {
@@ -3343,7 +3385,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs21 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -3351,6 +3393,7 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3358,7 +3401,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect9(() => {
+  useEffect8(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3372,6 +3415,7 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx71(
           Tabs,
           {
@@ -3404,6 +3448,7 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3450,6 +3495,7 @@ function SelectInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx72(
           SelectInput2,
           __spreadValues({
@@ -3471,7 +3517,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment11, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -3479,6 +3525,7 @@ function SegmentedInputRendererComponent(props) {
     id,
     children,
     description,
+    features,
     help,
     title,
     options,
@@ -3486,7 +3533,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3500,6 +3547,7 @@ function SegmentedInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx73(
           SegmentedControl,
           {
@@ -3524,13 +3572,14 @@ var isValidIndex3 = (index, options) => index !== null && index >= 0 && index <
 
 // ../renderers/src/SelectInputRenderer/RadioItemRendererComponent.tsx
 import { Header as Header8, InlineAlert as InlineAlert4, List as List2, ListItem as ListItem11 } from "@transferwise/components";
-import { Fragment as Fragment12, jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
 function RadioItemRendererComponent(props) {
   const {
     id,
     children,
     description: rootDescription,
     disabled: rootDisabled,
+    features,
     help,
     title: rootTitle,
     options,
@@ -3538,7 +3587,8 @@ function RadioItemRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ jsxs24("div", { ref, children: [
     rootTitle && /* @__PURE__ */ jsx74(
       Header8,
       {
@@ -3651,12 +3701,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect11, useMemo } from "react";
+import { useEffect as useEffect10, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = useTheme();
   const previousTheme = useMemo(() => theming.theme, []);
-  useEffect11(() => {
+  useEffect10(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3669,7 +3719,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button7 } from "@transferwise/components";
-import { useEffect as useEffect12, useRef as useRef3, useState as useState12 } from "react";
+import { useEffect as useEffect11, useRef as useRef2, useState as useState12 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 
 // ../renderers/src/messages/step.messages.ts
@@ -3683,7 +3733,7 @@ var step_messages_default = defineMessages11({
 });
 
 // ../renderers/src/step/StepFooter.tsx
-import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs26 } from "react/jsx-runtime";
 var SCROLL_TO_BOTTOM = "scroll-to-bottom";
 var StepFooter = ({ footer, tags }) => {
   if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
@@ -3697,7 +3747,7 @@ var DefaultFooter = ({ footer }) => {
 };
 var FooterWithScrollButton = ({ footer }) => {
   const { formatMessage } = useIntl14();
-  const endOfLayoutRef = useRef3(null);
+  const endOfLayoutRef = useRef2(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ jsx77(
     Button7,
@@ -3717,7 +3767,7 @@ var FooterWithScrollButton = ({ footer }) => {
   if (isElementVisible && !hasStepFooterContent) {
     return /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
   }
-  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment12, { children: [
     /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs26("div", { className: "df-step-fixed__footer", children: [
       !isElementVisible && scrollButton,
@@ -3727,7 +3777,7 @@ var FooterWithScrollButton = ({ footer }) => {
 };
 var useIsElementVisible = (elementRef) => {
   const [isVisible, setIsVisible] = useState12(false);
-  useEffect12(() => {
+  useEffect11(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3741,10 +3791,10 @@ var useIsElementVisible = (elementRef) => {
 
 // ../renderers/src/step/StepHeader.tsx
 import { Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
 var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment13, { children: [
     title ? /* @__PURE__ */ jsx78(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
     description ? /* @__PURE__ */ jsx78("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
@@ -4090,6 +4140,7 @@ var TextInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx87(InputGroup4, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx87(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
@@ -4108,7 +4159,18 @@ import { jsx as jsx88 } from "react/jsx-runtime";
 var UploadInputRenderer = {
   canRenderType: "input-upload",
   render: (props) => {
-    const { id, accepts, title, description, disabled, maxSize, validationState, value, onUpload } = props;
+    const {
+      id,
+      accepts,
+      title,
+      description,
+      disabled,
+      features,
+      maxSize,
+      validationState,
+      value,
+      onUpload
+    } = props;
     const onUploadFile = async (formData) => {
       const file = formData.get("file");
       return onUpload(file).then(() => ({
@@ -4127,6 +4189,7 @@ var UploadInputRenderer = {
           label: void 0,
           description: void 0,
           validation: validationState,
+          features,
           children: /* @__PURE__ */ jsx88(
             UploadInput2,
             {
@@ -4167,6 +4230,7 @@ var LargeUploadRenderer = {
       type,
       validationState,
       maxSize = null,
+      features,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -4179,6 +4243,7 @@ var LargeUploadRenderer = {
       "type",
       "validationState",
       "maxSize",
+      "features",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id, maxSize });
@@ -4201,6 +4266,7 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ jsx88(
           Upload,
           __spreadProps(__spreadValues({}, uploadProps), {