@wise/dynamic-flow-client-internal 5.20.0 → 5.21.1

package/build/main.js

@@ -70,7 +70,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames7() {
+      function classNames8() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -88,7 +88,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames7.apply(null, arg);
+          return classNames8.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -111,14 +111,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames7.default = classNames7;
-        module2.exports = classNames7;
+        classNames8.default = classNames8;
+        module2.exports = classNames8;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames7;
+          return classNames8;
         });
       } else {
-        window.classNames = classNames7;
+        window.classNames = classNames8;
       }
     })();
   }
@@ -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.20.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.21.1" : "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");
@@ -403,7 +403,7 @@ var BoxRenderer = {
     const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        className: (0, import_classnames.default)({
+        className: (0, import_classnames.default)("df-box-renderer", {
           "df-box-renderer-border": hasBorder,
           [`df-box-renderer-width-${width}`]: hasFixedWidth,
           [getMargin(margin)]: !hasFixedWidth
@@ -869,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) {
@@ -937,22 +950,16 @@ function FieldInput({
   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);
-  const shouldScrollToError = features.scrollToError !== false;
-  (0, import_react4.useEffect)(() => {
-    if (message && shouldScrollToError) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message, shouldScrollToError]);
+  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
@@ -972,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 = {
@@ -1062,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,
@@ -1075,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 {
@@ -1088,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,
@@ -1101,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") {
@@ -2060,13 +2068,17 @@ var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
 var import_components28 = require("@transferwise/components");
+var import_classnames4 = __toESM(require_classnames());
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var MarkdownRenderer = {
   canRenderType: "markdown",
   render: ({ content, align, margin, size }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     import_components28.Markdown,
     {
-      className: ["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large",
+      className: (0, import_classnames4.default)(
+        "df-markdown",
+        ["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large"
+      ),
       config: { link: { target: "_blank" } },
       children: content
     }
@@ -2509,8 +2521,7 @@ var import_components36 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_components35 = require("@transferwise/components");
-var import_classnames4 = __toESM(require_classnames());
-var import_react13 = require("react");
+var import_classnames5 = __toESM(require_classnames());
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
@@ -2523,19 +2534,12 @@ function UploadFieldInput({
 }) {
   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);
-  const shouldScrollToError = features.scrollToError !== false;
-  (0, import_react13.useEffect)(() => {
-    if (message && shouldScrollToError) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message, shouldScrollToError]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_classnames4.default)("form-group d-block", {
+      className: (0, import_classnames5.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
@@ -2690,16 +2694,16 @@ 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 : () => {
   };
 }
 
 // ../renderers/src/ParagraphRenderer.tsx
 var import_components39 = require("@transferwise/components");
-var import_classnames5 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 
 // ../renderers/src/messages/paragraph.messages.ts
 var import_react_intl14 = require("react-intl");
@@ -2751,7 +2755,7 @@ function CopyableParagraph({
         type: "text",
         value: text,
         readOnly: true,
-        className: (0, import_classnames5.default)("text-ellipsis", inputAlignmentClasses)
+        className: (0, import_classnames6.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components39.Button, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
@@ -2785,8 +2789,8 @@ var ProgressRenderer = {
 // ../renderers/src/RepeatableRenderer.tsx
 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_classnames7 = __toESM(require_classnames());
+var import_react14 = require("react");
 var import_react_intl17 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -2826,6 +2830,7 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
+    features,
     items,
     title,
     validationState,
@@ -2835,7 +2840,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");
@@ -2858,29 +2864,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_classnames7.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,
       {
@@ -3054,7 +3062,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
@@ -3117,7 +3125,7 @@ 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)(
@@ -3209,7 +3217,7 @@ 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({
@@ -3223,7 +3231,7 @@ function InlineSearchRenderer({
   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,
@@ -3396,7 +3404,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 {
@@ -3412,7 +3420,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3528,7 +3536,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) {
@@ -3544,7 +3552,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3590,6 +3598,7 @@ function RadioItemRendererComponent(props) {
     children,
     description: rootDescription,
     disabled: rootDisabled,
+    features,
     help,
     title: rootTitle,
     options,
@@ -3597,7 +3606,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,
       {
@@ -3710,12 +3720,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 ? () => {
@@ -3728,7 +3738,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
@@ -3756,7 +3766,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,
@@ -3785,8 +3795,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]) => {
@@ -3970,7 +3980,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",
@@ -3989,7 +3999,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,
     {
@@ -4010,7 +4020,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,
@@ -4032,7 +4042,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,
@@ -4287,7 +4297,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",
@@ -4295,7 +4305,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,
     {
@@ -4344,7 +4354,7 @@ var supportedMediaNames = [
 
 // ../renderers/src/ButtonRenderer/CircularButtonRenderer.tsx
 var import_components64 = require("@transferwise/components");
-var import_classnames7 = __toESM(require_classnames());
+var import_classnames8 = __toESM(require_classnames());
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var CircularButtonRenderer = {
   canRenderType: "button",
@@ -4355,7 +4365,7 @@ function CircularButtonComponent(props) {
   var _a;
   const { context, disabled, margin, media, tags, title, onClick } = props;
   const priority = tags == null ? void 0 : tags.find((tag) => tag === "primary" || tag === "secondary");
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_classnames7.default)(getMargin(margin), "df-button", "circular"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_classnames8.default)(getMargin(margin), "df-button", "circular"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     import_components64.CircularButton,
     {
       disabled,
@@ -4543,7 +4553,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
@@ -4565,7 +4575,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) });
@@ -4578,11 +4588,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);
@@ -4623,10 +4633,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,
@@ -4671,14 +4681,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 () => {