@wise/dynamic-flow-client-internal 5.9.2 → 5.11.0

package/build/main.js

@@ -125,7 +125,7 @@ var index_exports = {};
 __export(index_exports, {
   DynamicFlow: () => DynamicFlow,
   DynamicFlowWithRef: () => DynamicFlowWithRef,
-  Header: () => Header11,
+  Header: () => Header10,
   Media: () => Media2,
   findRendererPropsByType: () => import_dynamic_flow_client7.findRendererPropsByType,
   getMargin: () => getMargin2,
@@ -139,12 +139,12 @@ var import_dynamic_flow_client6 = require("@wise/dynamic-flow-client");
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.9.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.11.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -309,6 +309,11 @@ function AddressValidationButtonComponent(props) {
       setSpinny(false);
     }
   }, [stepLoadingState]);
+  const onBlur = () => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `d-flex flex-column ${getMargin(margin)}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_components2.Button,
@@ -323,6 +328,7 @@ function AddressValidationButtonComponent(props) {
           setSpinny(true);
           onClick();
         },
+        onBlur,
         children: title
       }
     ),
@@ -689,6 +695,11 @@ function ButtonComponent(props) {
       setSpinny(false);
     }
   }, [stepLoadingState]);
+  const onBlur = () => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  };
   const loading = spinny && stepLoadingState !== "idle";
   const buttonProps = {
     v2: true,
@@ -703,6 +714,7 @@ function ButtonComponent(props) {
     loading,
     size: control === "small" ? "sm" : mapLegacyButtonSize(size),
     sentiment: getSentiment(context),
+    onBlur,
     onClick: () => {
       setSpinny(true);
       onClick();
@@ -1359,26 +1371,18 @@ var ExternalConfirmationRenderer = {
 };
 function ExternalConfirmationRendererComponent({
   url,
-  status,
-  onSuccess,
-  onFailure,
+  visible,
+  open,
   onCancel
 }) {
   const { formatMessage } = (0, import_react_intl10.useIntl)();
   (0, import_react4.useEffect)(() => {
-    if (url && status === "initial") {
-      const w = window.open(url, "_blank");
-      if (w) {
-        onSuccess();
-      } else {
-        onFailure();
-      }
-    }
+    open();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_components18.Modal,
     {
-      open: status === "failure",
+      open: visible,
       title: formatMessage(external_confirmation_messages_default.title),
       body: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components18.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(url) }) }),
@@ -1392,8 +1396,7 @@ function ExternalConfirmationRendererComponent({
               priority: "primary",
               size: "md",
               onClick: () => {
-                window.open(url);
-                onCancel();
+                open();
               },
               children: formatMessage(external_confirmation_messages_default.open)
             }
@@ -3537,64 +3540,122 @@ function TopBar({ back, toolbar }) {
   ] }) : null;
 }
 
-// ../renderers/src/step/SplashCelebrationStepRenderer.tsx
+// ../renderers/src/step/StepFooter.tsx
+var import_components55 = require("@transferwise/components");
+var import_react18 = require("react");
+var import_react_intl27 = require("react-intl");
+
+// ../renderers/src/messages/step.messages.ts
+var import_react_intl26 = require("react-intl");
+var step_messages_default = (0, import_react_intl26.defineMessages)({
+  scrollToBottom: {
+    id: "df.wise.step.scrollToBottom",
+    defaultMessage: "Scroll to bottom",
+    description: "Label for a button that appears when the content of a step is too long and the user needs to scroll to the bottom to see all the content."
+  }
+});
+
+// ../renderers/src/step/StepFooter.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
+var SCROLL_TO_BOTTOM = "scroll-to-bottom";
+var StepFooter = ({ footer, tags }) => {
+  if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FooterWithScrollButton, { footer });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DefaultFooter, { footer });
+};
+var DefaultFooter = ({ footer }) => {
+  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  return hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
+};
+var FooterWithScrollButton = ({ footer }) => {
+  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  const endOfLayoutRef = (0, import_react18.useRef)(null);
+  const isElementVisible = useIsElementVisible(endOfLayoutRef);
+  const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    import_components55.Button,
+    {
+      className: "m-b-1",
+      v2: true,
+      block: true,
+      priority: "tertiary",
+      onClick: () => {
+        var _a;
+        (_a = endOfLayoutRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+      },
+      children: formatMessage(step_messages_default.scrollToBottom)
+    }
+  );
+  const hasStepFooterContent = footer && Array.isArray(footer) && footer.length > 0;
+  if (isElementVisible && !hasStepFooterContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "df-step-fixed__footer", children: [
+      !isElementVisible && scrollButton,
+      footer
+    ] })
+  ] });
+};
+var useIsElementVisible = (elementRef) => {
+  const [isVisible, setIsVisible] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [elementRef]);
+  return isVisible;
+};
+
+// ../renderers/src/step/SplashCelebrationStepRenderer.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
   render: SplashCelebrationStepRendererComponent
 };
 function SplashCelebrationStepRendererComponent(props) {
-  const { back, toolbar, children, footer, trackEvent } = props;
-  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  const { back, toolbar, children, footer, tags, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TopBar, { back, toolbar }),
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TopBar, { back, toolbar }),
     children,
-    hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
   render: SplashStepRendererComponent
 };
 function SplashStepRendererComponent(props) {
-  const { back, toolbar, children, footer } = props;
-  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TopBar, { back, toolbar }),
+  const { back, toolbar, children, footer, tags } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TopBar, { back, toolbar }),
     children,
-    hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components55 = require("@transferwise/components");
-var import_jsx_runtime80 = require("react/jsx-runtime");
-var StepRenderer = {
-  canRenderType: "step",
-  render: StepRendererComponent
-};
-function StepRendererComponent(props) {
-  const { back, description, error, title, children, toolbar, footer, tags } = props;
-  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TopBar, { back, toolbar }),
-    title || description ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Header10, { title, description, tags }) }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components55.Alert, { type: "negative", className: "m-b-2", message: error }) : null,
-    children,
-    hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0
-  ] });
-}
-var Header10 = ({ title, description, tags }) => {
+var import_components57 = require("@transferwise/components");
+
+// ../renderers/src/step/StepHeader.tsx
+var import_components56 = require("@transferwise/components");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components55.Title, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components56.Title, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
 };
 var getHeaderStyle = (tags) => {
@@ -3604,37 +3665,54 @@ var getHeaderStyle = (tags) => {
   return { titleType: "title-section", alignmentClassName: "text-xs-center" };
 };
 
+// ../renderers/src/step/StepRenderer.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var StepRenderer = {
+  canRenderType: "step",
+  render: StepRendererComponent
+};
+function StepRendererComponent(props) {
+  const { back, description, error, title, children, toolbar, footer, tags } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(StepHeader, { title, description, tags }) }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components57.Alert, { type: "negative", className: "m-b-2", message: error }) : null,
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(StepFooter, { footer, tags })
+  ] });
+}
+
 // ../renderers/src/TabsRenderer.tsx
-var import_components56 = require("@transferwise/components");
-var import_react18 = require("react");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_components58 = require("@transferwise/components");
+var import_react19 = require("react");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
   render: (props) => {
     switch (props.control) {
       case "segmented":
         if (props.tabs.length > 3) {
-          return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TabsRendererComponent, __spreadValues({}, props));
+          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TabsRendererComponent, __spreadValues({}, props));
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SegmentedTabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SegmentedTabsRendererComponent, __spreadValues({}, props));
       case "chips":
-        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChipsTabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChipsTabsRendererComponent, __spreadValues({}, props));
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TabsRendererComponent, __spreadValues({}, props));
     }
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react18.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-    import_components56.Tabs,
+  const [selectedIndex, setSelectedIndex] = (0, import_react19.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_components58.Tabs,
     {
       name: uid,
       selected: selectedIndex != null ? selectedIndex : 0,
       tabs: tabs.map((option) => ({
         title: option.title,
         disabled: false,
-        content: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "m-t-2", children: [
+        content: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "m-t-2", children: [
           " ",
           option.children,
           " "
@@ -3646,10 +3724,10 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react18.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      import_components56.SegmentedControl,
+  const [selectedIndex, setSelectedIndex] = (0, import_react19.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      import_components58.SegmentedControl,
       {
         name: uid,
         value: String(selectedIndex),
@@ -3663,31 +3741,31 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
         onChange: (value) => setSelectedIndex(Number(value))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
   ] });
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react18.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      import_components56.Chips,
+  const [selectedIndex, setSelectedIndex] = (0, import_react19.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      import_components58.Chips,
       {
         chips: tabs.map((tab, index) => ({ label: tab.title, value: index })),
         selected: selectedIndex,
         onChange: ({ selectedValue }) => setSelectedIndex(Number(selectedValue))
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
   ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
-var import_components58 = require("@transferwise/components");
+var import_components60 = require("@transferwise/components");
 
 // ../renderers/src/components/VariableTextInput.tsx
-var import_components57 = require("@transferwise/components");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_components59 = require("@transferwise/components");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -3706,12 +3784,12 @@ function VariableTextInput(inputProps) {
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
   switch (control) {
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
-      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
-      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         TextInput,
         __spreadProps(__spreadValues({}, numericProps), {
           onChange: (newValue) => {
@@ -3722,21 +3800,21 @@ function VariableTextInput(inputProps) {
       );
     }
     case "phone-number":
-      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components57.PhoneNumberInput, __spreadProps(__spreadValues({ initialValue: value }, commonProps), { onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_components59.PhoneNumberInput, __spreadProps(__spreadValues({ initialValue: value }, commonProps), { onChange }));
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "text", onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "text", onChange }));
     }
   }
 }
 function TextInput(props) {
   const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
-  const InputWithPattern = control === "textarea" ? import_components57.TextareaWithDisplayFormat : import_components57.InputWithDisplayFormat;
-  const InputWithoutPattern = control === "textarea" ? import_components57.TextArea : import_components57.Input;
-  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
+  const InputWithPattern = control === "textarea" ? import_components59.TextareaWithDisplayFormat : import_components59.InputWithDisplayFormat;
+  const InputWithoutPattern = control === "textarea" ? import_components59.TextArea : import_components59.Input;
+  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
 }
 
 // ../renderers/src/TextInputRenderer.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var TextInputRenderer = {
   canRenderType: "input-text",
   render: (props) => {
@@ -3769,7 +3847,7 @@ var TextInputRenderer = {
         }
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       FieldInput_default,
       {
         id,
@@ -3777,7 +3855,7 @@ var TextInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_components58.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_components60.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
   }
@@ -3785,13 +3863,13 @@ var TextInputRenderer = {
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_components59 = require("@transferwise/components");
+var import_components61 = require("@transferwise/components");
 
 // ../renderers/src/utils/getRandomId.ts
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var UploadInputRenderer = {
   canRenderType: "input-upload",
   render: (props) => {
@@ -3807,15 +3885,15 @@ var UploadInputRenderer = {
     };
     return (
       // We don't pass help here as there is no sensible place to display it
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         UploadFieldInput_default,
         {
           id,
           label: void 0,
           description: void 0,
           validation: validationState,
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-            import_components59.UploadInput,
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            import_components61.UploadInput,
             {
               id,
               description,
@@ -3825,7 +3903,7 @@ var UploadInputRenderer = {
                 {
                   id: "my-file",
                   filename: value.name,
-                  status: (validationState == null ? void 0 : validationState.status) === "invalid" ? import_components59.Status.FAILED : import_components59.Status.SUCCEEDED
+                  status: (validationState == null ? void 0 : validationState.status) === "invalid" ? import_components61.Status.FAILED : import_components61.Status.SUCCEEDED
                 }
               ] : void 0,
               fileTypes: acceptsToFileTypes(accepts),
@@ -3880,7 +3958,7 @@ var LargeUploadRenderer = {
     };
     const filetypes = acceptsToFileTypes(accepts);
     const usAccept = filetypes === "*" ? "*" : filetypes.join(",");
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       FieldInput_default,
       {
         id,
@@ -3888,8 +3966,8 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-          import_components59.Upload,
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          import_components61.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept,
             usDisabled: disabled,
@@ -3904,25 +3982,28 @@ var LargeUploadRenderer = {
 };
 
 // ../renderers/src/UpsellRenderer.tsx
-var import_components60 = require("@transferwise/components");
-var import_react19 = require("react");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_components62 = require("@transferwise/components");
+var import_react20 = require("react");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
   render: UpsellRendererComponent
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = (0, import_react19.useState)(true);
-  return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-    import_components60.Nudge,
+  const [isVisible, setIsVisible] = (0, import_react20.useState)(true);
+  return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    import_components62.Nudge,
     {
       className: getMargin(margin),
       mediaName: getMediaName(media),
       title: text,
-      link: callToAction.title,
-      href: callToAction.href,
-      onClick: callToAction.onClick,
+      action: {
+        href: callToAction.href,
+        onClick: callToAction.href ? void 0 : callToAction.onClick,
+        target: callToAction.href ? "_blank" : void 0,
+        text: callToAction.title
+      },
       onDismiss: onDismiss ? () => {
         setIsVisible(false);
         onDismiss();
@@ -3960,11 +4041,38 @@ var supportedMediaNames = [
   "wallet"
 ];
 
+// ../renderers/src/ButtonRenderer/CircularButtonRenderer.tsx
+var import_components63 = require("@transferwise/components");
+var import_classnames7 = __toESM(require_classnames());
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var CircularButtonRenderer = {
+  canRenderType: "button",
+  canRender: ({ control }) => control === "circular",
+  render: CircularButtonComponent
+};
+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_runtime88.jsx)("div", { className: (0, import_classnames7.default)(getMargin(margin), "df-button", "circular"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    import_components63.CircularButton,
+    {
+      disabled,
+      priority: priority != null ? priority : "secondary",
+      type: context === "negative" ? "negative" : "default",
+      icon: media ? (_a = getAddonStartMedia(media)) == null ? void 0 : _a.value : void 0,
+      onClick,
+      children: title
+    }
+  ) });
+}
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AddressValidationButtonRenderer_default,
   AlertRenderer_default,
   CheckboxInputRenderer_default,
+  CircularButtonRenderer,
   BoxRenderer_default,
   ButtonRenderer,
   ColumnsRenderer_default,
@@ -4009,13 +4117,13 @@ var getWiseRenderers = () => [
 ];
 
 // ../renderers/src/InitialLoadingStateRenderer.tsx
-var import_components61 = require("@transferwise/components");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_components64 = require("@transferwise/components");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var InitialLoadingStateRenderer = {
   canRenderType: "loading-state",
   canRender: ({ stepLoadingState }) => stepLoadingState === "initial",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    import_components61.Loader,
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    import_components64.Loader,
     {
       size: "md",
       classNames: { "tw-loader": `tw-loader m-x-auto ${getMargin("md")}` },
@@ -4025,7 +4133,7 @@ var InitialLoadingStateRenderer = {
 };
 
 // ../renderers/src/subflow/getSubflowRenderer.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var getSubflowRenderer = ({
   Component: Component2,
   canRender
@@ -4034,7 +4142,7 @@ var getSubflowRenderer = ({
     canRenderType: "subflow",
     canRender,
     render: (props) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         Component2,
         {
           presentation: props.presentation,
@@ -4051,12 +4159,12 @@ var getSubflowRenderer = ({
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react20 = require("react");
-var import_react_intl27 = require("react-intl");
+var import_react21 = require("react");
+var import_react_intl29 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
-var import_react_intl26 = require("react-intl");
-var messages_default = (0, import_react_intl26.defineMessages)({
+var import_react_intl28 = require("react-intl");
+var messages_default = (0, import_react_intl28.defineMessages)({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -4071,9 +4179,9 @@ var messages_default = (0, import_react_intl26.defineMessages)({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  const { formatMessage } = (0, import_react_intl29.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react20.useCallback)(
+  return (0, import_react21.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -4086,11 +4194,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react21 = require("react");
-var import_react_intl28 = require("react-intl");
+var import_react22 = require("react");
+var import_react_intl30 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl28.useIntl)();
-  return (0, import_react21.useCallback)(
+  const { locale } = (0, import_react_intl30.useIntl)();
+  return (0, import_react22.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -4113,25 +4221,25 @@ var handleRejection = (error) => {
 
 // src/dynamicFlow/DynamicFlowModal.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
-var import_components62 = require("@transferwise/components");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_components65 = require("@transferwise/components");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 function DynamicFlowModal(props) {
   const _a = props, { className = "" } = _a, rest = __objRest(_a, ["className"]);
   const dfProps = useWiseToCoreProps(rest);
   const df = (0, import_dynamic_flow_client2.useDynamicFlowModal)(dfProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    import_components62.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    import_components65.Modal,
     __spreadProps(__spreadValues({
       className: `dynamic-flow-modal ${className}`,
       disableDimmerClickToClose: true
     }, df.modal), {
-      body: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
+      body: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
     })
   );
 }
 
 // src/dynamicFlow/getMergedRenderers.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
 var getMergedRenderers = (props) => {
   var _d, _e;
@@ -4145,7 +4253,7 @@ var getMergedRenderers = (props) => {
         method: initialRequest.method,
         data: initialRequest.body
       };
-      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
         DynamicFlowModal,
         __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
           features: subflowFeatures,
@@ -4171,9 +4279,9 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react22.useMemo)(() => getMergedRenderers(props), [renderers]);
-  const logEvent = (0, import_react22.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react22.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const mergedRenderers = (0, import_react23.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const logEvent = (0, import_react23.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react23.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -4186,9 +4294,17 @@ var useWiseToCoreProps = (props) => {
   });
 };
 var openLinkInNewTab = (url) => {
-  var _a;
+  if (typeof window === "undefined" || typeof window.open !== "function") {
+    return false;
+  }
   try {
-    const w = (_a = window == null ? void 0 : window.open) == null ? void 0 : _a.call(window, url, "_blank");
+    const w = window.open(url, "_blank");
+    if (w) {
+      try {
+        w.opener = null;
+      } catch (e) {
+      }
+    }
     return Boolean(w);
   } catch (e) {
     return false;
@@ -4196,23 +4312,23 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client3.useDynamicFlow)(dfProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className, children: df.view });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react23.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var DynamicFlowWithRef = (0, import_react24.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client4.useDynamicFlow)(dfProps);
-  (0, import_react23.useImperativeHandle)(
+  (0, import_react24.useImperativeHandle)(
     ref,
     () => ({
       getValue: async () => {
@@ -4223,14 +4339,14 @@ var DynamicFlowWithRef = (0, import_react23.forwardRef)(function DynamicFlowWith
     }),
     [df]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className, children: df.view });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className, children: df.view });
 });
 
 // src/index.ts
 var import_dynamic_flow_client7 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/renderers.tsx
-var Header11 = Header5;
+var Header10 = Header5;
 var Media2 = Media;
 var getMargin2 = getMargin;
 
@@ -4280,7 +4396,8 @@ var cs_default = {
   "df.wise.group.all": "V\u0161e",
   "df.wise.group.currencies-with-account-details": "M\u011Bny s detaily \xFA\u010Dtu",
   "df.wise.group.popular": "Popul\xE1rn\xED",
-  "df.wise.group.recent": "Ned\xE1vn\xE9"
+  "df.wise.group.recent": "Ned\xE1vn\xE9",
+  "df.wise.step.scrollToBottom": "P\u0159ej\xEDt na konec"
 };
 
 // src/i18n/de.json
@@ -4326,7 +4443,8 @@ var de_default = {
   "df.wise.group.all": "Alle",
   "df.wise.group.currencies-with-account-details": "Guthaben mit Bankverbindung",
   "df.wise.group.popular": "Beliebt",
-  "df.wise.group.recent": "Neu"
+  "df.wise.group.recent": "Neu",
+  "df.wise.step.scrollToBottom": "Nach unten scrollen"
 };
 
 // src/i18n/en.json
@@ -4372,7 +4490,8 @@ var en_default = {
   "df.wise.group.all": "All",
   "df.wise.group.currencies-with-account-details": "Currencies with account details",
   "df.wise.group.popular": "Popular",
-  "df.wise.group.recent": "Recent"
+  "df.wise.group.recent": "Recent",
+  "df.wise.step.scrollToBottom": "Scroll to bottom"
 };
 
 // src/i18n/es.json
@@ -4418,7 +4537,8 @@ var es_default = {
   "df.wise.group.all": "Todo",
   "df.wise.group.currencies-with-account-details": "Divisas con datos de cuenta",
   "df.wise.group.popular": "Populares",
-  "df.wise.group.recent": "Recientes"
+  "df.wise.group.recent": "Recientes",
+  "df.wise.step.scrollToBottom": "Despl\xE1zate hasta abajo"
 };
 
 // src/i18n/fr.json
@@ -4429,7 +4549,7 @@ var fr_default = {
   "df.wise.ArraySchema.maxItemsError": "Veuillez ajouter {maxItems} ou moins.",
   "df.wise.ArraySchema.minItemsError": "Veuillez ajouter au moins {minItems}.",
   "df.wise.ArraySchema.removeItem": "Supprimer",
-  "df.wise.ButtonLayout.buttonLoadingMessage": "Patientez quelques secondes",
+  "df.wise.ButtonLayout.buttonLoadingMessage": "Un instant, s'il vous pla\xEEt...",
   "df.wise.ControlFeedback.maxLength": "Veuillez saisir {maxLength} caract\xE8res ou moins.",
   "df.wise.ControlFeedback.maximum": "Veuillez saisir un nombre inf\xE9rieur ou \xE9gal \xE0 {maximum}.",
   "df.wise.ControlFeedback.maximumDate": "Veuillez saisir une date \xE9gale ou ant\xE9rieure au {maximum}.",
@@ -4461,10 +4581,11 @@ var fr_default = {
   "df.wise.filter.noResults": "Aucun r\xE9sultat",
   "df.wise.filter.placeholder": "Commencez \xE0 \xE9crire pour effectuer une recherche",
   "df.wise.filter.results": "R\xE9sultats de recherche",
-  "df.wise.group.all": "Toutes",
+  "df.wise.group.all": "Tous",
   "df.wise.group.currencies-with-account-details": "Devises avec num\xE9ros de compte",
   "df.wise.group.popular": "Populaires",
-  "df.wise.group.recent": "R\xE9cents"
+  "df.wise.group.recent": "R\xE9cents",
+  "df.wise.step.scrollToBottom": "Faire d\xE9filer vers le bas"
 };
 
 // src/i18n/hu.json
@@ -4510,7 +4631,8 @@ var hu_default = {
   "df.wise.group.all": "\xD6sszes",
   "df.wise.group.currencies-with-account-details": "P\xE9nznemek sz\xE1mlaadatokkal",
   "df.wise.group.popular": "N\xE9pszer\u0171",
-  "df.wise.group.recent": "Legut\xF3bbi"
+  "df.wise.group.recent": "Legut\xF3bbi",
+  "df.wise.step.scrollToBottom": "G\xF6rgess legalulra"
 };
 
 // src/i18n/id.json
@@ -4556,7 +4678,8 @@ var id_default = {
   "df.wise.group.all": "Semua",
   "df.wise.group.currencies-with-account-details": "Mata uang dengan detail rekening",
   "df.wise.group.popular": "Populer",
-  "df.wise.group.recent": "Terbaru"
+  "df.wise.group.recent": "Terbaru",
+  "df.wise.step.scrollToBottom": "Gulir ke bawah"
 };
 
 // src/i18n/it.json
@@ -4602,7 +4725,8 @@ var it_default = {
   "df.wise.group.all": "Tutti",
   "df.wise.group.currencies-with-account-details": "Valute con estremi del conto",
   "df.wise.group.popular": "Popolari",
-  "df.wise.group.recent": "Recenti"
+  "df.wise.group.recent": "Recenti",
+  "df.wise.step.scrollToBottom": "Scorri in basso"
 };
 
 // src/i18n/ja.json
@@ -4648,7 +4772,8 @@ var ja_default = {
   "df.wise.group.all": "\u3059\u3079\u3066",
   "df.wise.group.currencies-with-account-details": "\u53E3\u5EA7\u60C5\u5831\u3092\u53D6\u5F97\u3067\u304D\u308B\u901A\u8CA8",
   "df.wise.group.popular": "\u4EBA\u6C17",
-  "df.wise.group.recent": "\u6700\u8FD1"
+  "df.wise.group.recent": "\u6700\u8FD1",
+  "df.wise.step.scrollToBottom": "\u4E0B\u307E\u3067\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B"
 };
 
 // src/i18n/nl.json
@@ -4694,7 +4819,8 @@ var nl_default = {
   "df.wise.group.all": "Alles",
   "df.wise.group.currencies-with-account-details": "Valuta's met rekeninggegevens",
   "df.wise.group.popular": "Populair",
-  "df.wise.group.recent": "Recent"
+  "df.wise.group.recent": "Recent",
+  "df.wise.step.scrollToBottom": "Scrol omlaag"
 };
 
 // src/i18n/pl.json
@@ -4740,7 +4866,8 @@ var pl_default = {
   "df.wise.group.all": "Wszystkie",
   "df.wise.group.currencies-with-account-details": "Waluty z danymi bankowymi",
   "df.wise.group.popular": "Popularne",
-  "df.wise.group.recent": "Ostatnie"
+  "df.wise.group.recent": "Ostatnie",
+  "df.wise.step.scrollToBottom": "Przewi\u0144 w d\xF3\u0142"
 };
 
 // src/i18n/pt.json
@@ -4786,7 +4913,8 @@ var pt_default = {
   "df.wise.group.all": "Todos",
   "df.wise.group.currencies-with-account-details": "Moedas com dados de conta",
   "df.wise.group.popular": "Popular",
-  "df.wise.group.recent": "Recente"
+  "df.wise.group.recent": "Recente",
+  "df.wise.step.scrollToBottom": "Descer at\xE9 o final da p\xE1gina"
 };
 
 // src/i18n/ro.json
@@ -4832,7 +4960,8 @@ var ro_default = {
   "df.wise.group.all": "Toate",
   "df.wise.group.currencies-with-account-details": "Monede cu detalii de cont",
   "df.wise.group.popular": "Populare",
-  "df.wise.group.recent": "Recente"
+  "df.wise.group.recent": "Recente",
+  "df.wise.step.scrollToBottom": "Deruleaz\u0103 \xEEn jos"
 };
 
 // src/i18n/ru.json
@@ -4878,7 +5007,8 @@ var ru_default = {
   "df.wise.group.all": "\u0412\u0441\u0435",
   "df.wise.group.currencies-with-account-details": "\u0412\u0430\u043B\u044E\u0442\u044B \u0441 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u0430\u043C\u0438 \u0441\u0447\u0435\u0442\u0430",
   "df.wise.group.popular": "\u041F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0435",
-  "df.wise.group.recent": "\u041D\u0435\u0434\u0430\u0432\u043D\u0438\u0435"
+  "df.wise.group.recent": "\u041D\u0435\u0434\u0430\u0432\u043D\u0438\u0435",
+  "df.wise.step.scrollToBottom": "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0439\u0442\u0435 \u0432\u043D\u0438\u0437"
 };
 
 // src/i18n/th.json
@@ -4924,7 +5054,8 @@ var th_default = {
   "df.wise.group.all": "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   "df.wise.group.currencies-with-account-details": "\u0E2A\u0E01\u0E38\u0E25\u0E40\u0E07\u0E34\u0E19\u0E15\u0E48\u0E32\u0E07\u0E46 \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E1A\u0E31\u0E0D\u0E0A\u0E35",
   "df.wise.group.popular": "\u0E2A\u0E01\u0E38\u0E25\u0E22\u0E2D\u0E14\u0E19\u0E34\u0E22\u0E21",
-  "df.wise.group.recent": "\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14"
+  "df.wise.group.recent": "\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14",
+  "df.wise.step.scrollToBottom": "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E14\u0E49\u0E32\u0E19\u0E25\u0E48\u0E32\u0E07"
 };
 
 // src/i18n/tr.json
@@ -4970,7 +5101,8 @@ var tr_default = {
   "df.wise.group.all": "T\xFCm\xFC",
   "df.wise.group.currencies-with-account-details": "Hesap bilgileri olan bakiyeler",
   "df.wise.group.popular": "Pop\xFCler",
-  "df.wise.group.recent": "Yak\u0131n zamanl\u0131"
+  "df.wise.group.recent": "Yak\u0131n zamanl\u0131",
+  "df.wise.step.scrollToBottom": "A\u015Fa\u011F\u0131 kayd\u0131r"
 };
 
 // src/i18n/zh_CN.json
@@ -5016,7 +5148,8 @@ var zh_CN_default = {
   "df.wise.group.all": "\u5168\u90E8",
   "df.wise.group.currencies-with-account-details": "\u5E26\u6709\u8D26\u6237\u8BE6\u7EC6\u4FE1\u606F\u7684\u8D27\u5E01",
   "df.wise.group.popular": "\u70ED\u95E8",
-  "df.wise.group.recent": "\u6700\u8FD1"
+  "df.wise.group.recent": "\u6700\u8FD1",
+  "df.wise.step.scrollToBottom": "\u6EDA\u52A8\u5230\u5E95\u90E8"
 };
 
 // src/i18n/zh_HK.json
@@ -5062,7 +5195,8 @@ var zh_HK_default = {
   "df.wise.group.all": "\u5168\u90E8",
   "df.wise.group.currencies-with-account-details": "\u63D0\u4F9B\u8CEC\u6236\u8CC7\u6599\u7684\u8CA8\u5E63",
   "df.wise.group.popular": "\u71B1\u9580",
-  "df.wise.group.recent": "\u6700\u8FD1\u7684"
+  "df.wise.group.recent": "\u6700\u8FD1\u7684",
+  "df.wise.step.scrollToBottom": "\u6ED1\u52D5\u5230\u6700\u5E95\u90E8"
 };
 
 // src/i18n/index.ts