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

package/build/main.js

@@ -145,7 +145,7 @@ var import_dynamic_flow_client4 = require("@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
@@ -329,7 +329,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -395,30 +395,25 @@ var AlertRenderer_default = AlertRenderer;
 // ../renderers/src/BoxRenderer.tsx
 var import_classnames = __toESM(require_classnames());
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(
-        "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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)("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
@@ -874,11 +869,24 @@ var getPriority = (control, tags) => {
   return control && isButtonPriority(control) ? control : "secondary";
 };
 
+// ../renderers/src/CheckboxInputRenderer.tsx
+var import_components11 = require("@transferwise/components");
+
 // ../renderers/src/components/FieldInput.tsx
 var import_components8 = require("@transferwise/components");
-var import_react4 = require("react");
 
-// ../renderers/src/utils/scroll-to-if-not-visible.ts
+// ../renderers/src/utils/useScrollToError.ts
+var import_react4 = require("react");
+var useScrollToError = (validationState, features) => {
+  const ref = (0, import_react4.useRef)(null);
+  const enabled = (features == null ? void 0 : features.scrollToError) !== false;
+  (0, import_react4.useEffect)(() => {
+    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) {
@@ -939,23 +947,19 @@ function FieldInput({
   description,
   help,
   loadingState = "idle",
-  inlineAlert
+  inlineAlert,
+  features
 }) {
+  var _a;
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabelContentWithHelp, { text: label, help }) : label;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
-    if (message) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_components8.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
@@ -975,33 +979,30 @@ var mapStatusToSentiment = (validation, defaultContext) => {
 };
 var FieldInput_default = FieldInput;
 
-// ../renderers/src/CheckboxInputRenderer.tsx
-var import_components11 = require("@transferwise/components");
-
-// ../renderers/src/utils/listItem/getMedia.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(OptionMedia, { media, preferAvatar }) : void 0;
-
 // ../renderers/src/utils/listItem/getAdditionalText.tsx
 var import_components9 = require("@transferwise/components");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var getAdditionalText = (additionalText) => {
   if (!additionalText) {
     return void 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components9.ListItem.AdditionalInfo, { children: additionalText });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_components9.ListItem.AdditionalInfo, { children: additionalText });
 };
 
+// ../renderers/src/utils/listItem/getInlineAlert.tsx
+var import_components10 = require("@transferwise/components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components10.ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
+
+// ../renderers/src/utils/listItem/getMedia.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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
-var import_components10 = require("@transferwise/components");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
-
 // ../renderers/src/CheckboxInputRenderer.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var CheckboxInputRenderer = {
@@ -1049,6 +1050,7 @@ var CheckboxComponent = (props) => {
       help,
       inlineAlert: rest.inlineAlert,
       loadingState: rest.fieldLoadingState,
+      features: rest.features,
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.Checkbox, __spreadValues({ id }, checkboxProps))
     }
   );
@@ -1064,9 +1066,11 @@ var CheckboxItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_components11.ListItem,
     __spreadValues({
       title,
@@ -1077,7 +1081,7 @@ var CheckboxItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.ListItem.Checkbox, { checked: value, onChange: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var SwitchItemComponent = (props) => {
   const {
@@ -1090,9 +1094,11 @@ var SwitchItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_components11.ListItem,
     __spreadValues({
       title,
@@ -1103,7 +1109,7 @@ var SwitchItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.ListItem.Switch, { checked: value, onClick: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
   if ((validationState == null ? void 0 : validationState.status) === "invalid") {
@@ -1246,6 +1252,7 @@ var DateInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VariableDateInput_default, { control, inputProps })
       }
     );
@@ -1935,6 +1942,7 @@ var IntegerInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components23.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_components23.Input,
           __spreadValues({
@@ -2198,6 +2206,7 @@ function MoneyInputRendererComponent(props) {
       description,
       validation: validationState,
       help,
+      features: props.features,
       children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         import_components31.MoneyInput,
         {
@@ -2267,6 +2276,7 @@ function InlineComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2282,6 +2292,7 @@ function InlineComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2349,6 +2360,7 @@ function DefaultComponent(props) {
     autoComplete,
     description,
     disabled,
+    features,
     help,
     options,
     placeholder,
@@ -2394,6 +2406,7 @@ function DefaultComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         import_components33.SelectInput,
         __spreadValues({
@@ -2440,6 +2453,7 @@ function InlineCheckboxComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2455,6 +2469,7 @@ function InlineCheckboxComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2501,7 +2516,6 @@ var MultiSelectInputRenderer = {
 var import_components36 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
-var import_react13 = require("react");
 var import_components35 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
 var import_jsx_runtime57 = require("react/jsx-runtime");
@@ -2511,17 +2525,12 @@ function UploadFieldInput({
   label,
   description,
   help,
-  validation
+  validation,
+  features
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
-    if (message) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
@@ -2578,6 +2587,7 @@ var MultiUploadInputRenderer = {
       title,
       description,
       disabled,
+      features,
       maxSize,
       maxItems,
       uploadLabel,
@@ -2600,6 +2610,7 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           import_components36.UploadInput,
           {
@@ -2653,6 +2664,7 @@ var NumberInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_components37.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           import_components37.Input,
           __spreadValues({
@@ -2678,9 +2690,9 @@ var import_react_intl15 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 var import_components38 = require("@transferwise/components");
-var import_react14 = require("react");
+var import_react13 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react14.useContext)(import_components38.SnackbarContext);
+  const context = (0, import_react13.useContext)(import_components38.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -2774,7 +2786,7 @@ var ProgressRenderer = {
 var import_components41 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_classnames6 = __toESM(require_classnames());
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_react_intl17 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -2814,6 +2826,7 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
+    features,
     items,
     title,
     validationState,
@@ -2823,7 +2836,8 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = (0, import_react_intl17.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react15.useState)(null);
+  const [openModalType, setOpenModalType] = (0, import_react14.useState)(null);
+  const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -2846,29 +2860,31 @@ function Repeatable(props) {
     setOpenModalType(null);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.Header, { title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-      "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__ */ (0, import_jsx_runtime62.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            import_components41.NavigationOption,
-            {
-              media: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons.Plus, {}),
-              title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
-              showMediaAtAllSizes: true,
-              onClick: () => onAddItem()
-            }
-          ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.InlineAlert, { type: "negative", children: validationState.message })
-        ]
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { ref, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.Header, { title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        "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__ */ (0, import_jsx_runtime62.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              import_components41.NavigationOption,
+              {
+                media: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons.Plus, {}),
+                title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
+                showMediaAtAllSizes: true,
+                onClick: () => onAddItem()
+              }
+            ),
+            (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.InlineAlert, { type: "negative", children: validationState.message })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_components41.Modal,
       {
@@ -3042,7 +3058,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_components45 = require("@transferwise/components");
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_react_intl22 = require("react-intl");
 
 // ../renderers/src/messages/search.messages.ts
@@ -3097,6 +3113,7 @@ function BlockSearchRendererComponent({
   id,
   hint,
   isLoading,
+  features,
   margin,
   query,
   state,
@@ -3104,26 +3121,37 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react15.useState)(false);
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_components45.InputGroup, { addonStart: { content: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_icons3.Search, { size: 24 }) }, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      import_components45.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      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__ */ (0, import_jsx_runtime66.jsx)(import_components45.InputGroup, { addonStart: { content: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_icons3.Search, { size: 24 }) }, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          import_components45.Input,
+          {
+            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__ */ (0, import_jsx_runtime66.jsx)("span", { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SearchResultContent, { state, trackEvent })
   ] });
 }
@@ -3185,57 +3213,69 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 var import_components46 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_react_intl23 = require("react-intl");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
   hint,
   isLoading,
+  features,
   margin,
-  onChange,
   state,
   title,
+  onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
   const intl = (0, import_react_intl23.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-    import_components46.Typeahead,
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    FieldInput_default,
     {
-      id: "typeahead-input-id",
-      intl,
-      name: "typeahead-input-name",
-      size: "md",
-      placeholder: hint,
-      maxHeight: 100,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TypeaheadFooter, { state, isLoading }),
-      multiple: false,
-      clearable: false,
-      addon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons4.Search, { 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__ */ (0, import_jsx_runtime67.jsx)(
+        import_components46.Typeahead,
+        {
+          id: "typeahead-input-id",
+          intl,
+          name: "typeahead-input-name",
+          size: "md",
+          placeholder: hint,
+          maxHeight: 100,
+          footer: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TypeaheadFooter, { state, isLoading }),
+          multiple: false,
+          clearable: false,
+          addon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons4.Search, { 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 {
@@ -3318,6 +3358,7 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3334,6 +3375,7 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           import_components48.RadioGroup,
           {
@@ -3358,7 +3400,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components49 = require("@transferwise/components");
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -3366,6 +3408,7 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3373,7 +3416,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3387,6 +3430,7 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           import_components49.Tabs,
           {
@@ -3419,6 +3463,7 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3465,6 +3510,7 @@ function SelectInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           import_components50.SelectInput,
           __spreadValues({
@@ -3486,7 +3532,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_components51 = require("@transferwise/components");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
@@ -3494,6 +3540,7 @@ function SegmentedInputRendererComponent(props) {
     id,
     children,
     description,
+    features,
     help,
     title,
     options,
@@ -3501,7 +3548,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3515,6 +3562,7 @@ function SegmentedInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           import_components51.SegmentedControl,
           {
@@ -3546,6 +3594,7 @@ function RadioItemRendererComponent(props) {
     children,
     description: rootDescription,
     disabled: rootDisabled,
+    features,
     help,
     title: rootTitle,
     options,
@@ -3553,7 +3602,8 @@ function RadioItemRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { ref, children: [
     rootTitle && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       import_components52.Header,
       {
@@ -3666,12 +3716,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
-var import_react20 = require("react");
+var import_react19 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react20.useMemo)(() => theming.theme, []);
-  (0, import_react20.useEffect)(() => {
+  const previousTheme = (0, import_react19.useMemo)(() => theming.theme, []);
+  (0, import_react19.useEffect)(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3684,7 +3734,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 var import_components54 = require("@transferwise/components");
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_react_intl25 = require("react-intl");
 
 // ../renderers/src/messages/step.messages.ts
@@ -3712,7 +3762,7 @@ var DefaultFooter = ({ footer }) => {
 };
 var FooterWithScrollButton = ({ footer }) => {
   const { formatMessage } = (0, import_react_intl25.useIntl)();
-  const endOfLayoutRef = (0, import_react21.useRef)(null);
+  const endOfLayoutRef = (0, import_react20.useRef)(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     import_components54.Button,
@@ -3741,8 +3791,8 @@ var FooterWithScrollButton = ({ footer }) => {
   ] });
 };
 var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3926,7 +3976,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components59 = require("@transferwise/components");
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -3945,7 +3995,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react21.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_components59.Tabs,
     {
@@ -3966,7 +4016,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react21.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.SegmentedControl,
@@ -3988,7 +4038,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react21.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.Chips,
@@ -4099,6 +4149,7 @@ var TextInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_components61.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
@@ -4117,7 +4168,18 @@ var import_jsx_runtime88 = require("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(() => ({
@@ -4136,6 +4198,7 @@ var UploadInputRenderer = {
           label: void 0,
           description: void 0,
           validation: validationState,
+          features,
           children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             import_components62.UploadInput,
             {
@@ -4176,6 +4239,7 @@ var LargeUploadRenderer = {
       type,
       validationState,
       maxSize = null,
+      features,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -4188,6 +4252,7 @@ var LargeUploadRenderer = {
       "type",
       "validationState",
       "maxSize",
+      "features",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id, maxSize });
@@ -4210,6 +4275,7 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           import_components62.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
@@ -4227,7 +4293,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 var import_components63 = require("@transferwise/components");
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4235,7 +4301,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = (0, import_react23.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react22.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     import_components63.Nudge,
     {
@@ -4483,7 +4549,7 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_react_intl29 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -4505,7 +4571,7 @@ var messages_default = (0, import_react_intl28.defineMessages)({
 var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl29.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react24.useCallback)(
+  return (0, import_react23.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -4518,11 +4584,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_react_intl30 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl30.useIntl)();
-  return (0, import_react25.useCallback)(
+  return (0, import_react24.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -4563,10 +4629,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react26.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react25.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react26.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react26.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react25.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react25.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -4611,14 +4677,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react27.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react26.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react27.useImperativeHandle)(
+  (0, import_react26.useImperativeHandle)(
     ref,
     () => ({
       getValue: async () => {