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

package/build/main.mjs

@@ -126,7 +126,7 @@ import { useMemo as useMemo2 } from "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
@@ -291,6 +291,11 @@ function AddressValidationButtonComponent(props) {
       setSpinny(false);
     }
   }, [stepLoadingState]);
+  const onBlur = () => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: `d-flex flex-column ${getMargin(margin)}`, children: [
     /* @__PURE__ */ jsx3(
       Button,
@@ -305,6 +310,7 @@ function AddressValidationButtonComponent(props) {
           setSpinny(true);
           onClick();
         },
+        onBlur,
         children: title
       }
     ),
@@ -671,6 +677,11 @@ function ButtonComponent(props) {
       setSpinny(false);
     }
   }, [stepLoadingState]);
+  const onBlur = () => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  };
   const loading = spinny && stepLoadingState !== "idle";
   const buttonProps = {
     v2: true,
@@ -685,6 +696,7 @@ function ButtonComponent(props) {
     loading,
     size: control === "small" ? "sm" : mapLegacyButtonSize(size),
     sentiment: getSentiment(context),
+    onBlur,
     onClick: () => {
       setSpinny(true);
       onClick();
@@ -1341,26 +1353,18 @@ var ExternalConfirmationRenderer = {
 };
 function ExternalConfirmationRendererComponent({
   url,
-  status,
-  onSuccess,
-  onFailure,
+  visible,
+  open,
   onCancel
 }) {
   const { formatMessage } = useIntl5();
   useEffect3(() => {
-    if (url && status === "initial") {
-      const w = window.open(url, "_blank");
-      if (w) {
-        onSuccess();
-      } else {
-        onFailure();
-      }
-    }
+    open();
   }, []);
   return /* @__PURE__ */ jsx31(
     Modal,
     {
-      open: status === "failure",
+      open: visible,
       title: formatMessage(external_confirmation_messages_default.title),
       body: /* @__PURE__ */ jsxs6(Fragment4, { children: [
         /* @__PURE__ */ jsx31(Markdown2, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(url) }) }),
@@ -1374,8 +1378,7 @@ function ExternalConfirmationRendererComponent({
               priority: "primary",
               size: "md",
               onClick: () => {
-                window.open(url);
-                onCancel();
+                open();
               },
               children: formatMessage(external_confirmation_messages_default.open)
             }
@@ -3522,64 +3525,122 @@ function TopBar({ back, toolbar }) {
   ] }) : null;
 }
 
+// ../renderers/src/step/StepFooter.tsx
+import { Button as Button8 } from "@transferwise/components";
+import { useEffect as useEffect9, useRef, useState as useState11 } from "react";
+import { useIntl as useIntl15 } from "react-intl";
+
+// ../renderers/src/messages/step.messages.ts
+import { defineMessages as defineMessages12 } from "react-intl";
+var step_messages_default = defineMessages12({
+  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
+import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
+var SCROLL_TO_BOTTOM = "scroll-to-bottom";
+var StepFooter = ({ footer, tags }) => {
+  if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
+    return /* @__PURE__ */ jsx78(FooterWithScrollButton, { footer });
+  }
+  return /* @__PURE__ */ jsx78(DefaultFooter, { footer });
+};
+var DefaultFooter = ({ footer }) => {
+  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  return hasFooter ? /* @__PURE__ */ jsx78("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
+};
+var FooterWithScrollButton = ({ footer }) => {
+  const { formatMessage } = useIntl15();
+  const endOfLayoutRef = useRef(null);
+  const isElementVisible = useIsElementVisible(endOfLayoutRef);
+  const scrollButton = /* @__PURE__ */ jsx78(
+    Button8,
+    {
+      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__ */ jsx78("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsxs28(Fragment13, { children: [
+    /* @__PURE__ */ jsx78("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs28("div", { className: "df-step-fixed__footer", children: [
+      !isElementVisible && scrollButton,
+      footer
+    ] })
+  ] });
+};
+var useIsElementVisible = (elementRef) => {
+  const [isVisible, setIsVisible] = useState11(false);
+  useEffect9(() => {
+    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
-import { jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs29 } from "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__ */ jsxs28("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ jsx78(TopBar, { back, toolbar }),
+  return /* @__PURE__ */ jsxs29("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ jsx79(TopBar, { back, toolbar }),
     children,
-    hasFooter ? /* @__PURE__ */ jsx78("div", { className: "df-step-fixed__footer", children: footer }) : void 0
+    /* @__PURE__ */ jsx79(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs30 } from "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__ */ jsxs29("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ jsx79(TopBar, { back, toolbar }),
+  const { back, toolbar, children, footer, tags } = props;
+  return /* @__PURE__ */ jsxs30("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ jsx80(TopBar, { back, toolbar }),
     children,
-    hasFooter ? /* @__PURE__ */ jsx79("div", { className: "df-step-fixed__footer", children: footer }) : void 0
+    /* @__PURE__ */ jsx80(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/StepRenderer.tsx
-import { Alert as Alert2, Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment13, jsx as jsx80, jsxs as jsxs30 } from "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__ */ jsxs30("div", { children: [
-    /* @__PURE__ */ jsx80(TopBar, { back, toolbar }),
-    title || description ? /* @__PURE__ */ jsx80("div", { className: "m-b-4", children: /* @__PURE__ */ jsx80(Header10, { title, description, tags }) }) : void 0,
-    error ? /* @__PURE__ */ jsx80(Alert2, { type: "negative", className: "m-b-2", message: error }) : null,
-    children,
-    hasFooter ? /* @__PURE__ */ jsx80("div", { className: "df-step-fixed__footer", children: footer }) : void 0
-  ] });
-}
-var Header10 = ({ title, description, tags }) => {
+import { Alert as Alert2 } from "@transferwise/components";
+
+// ../renderers/src/step/StepHeader.tsx
+import { Title as Title2 } from "@transferwise/components";
+import { Fragment as Fragment14, jsx as jsx81, jsxs as jsxs31 } from "react/jsx-runtime";
+var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs30(Fragment13, { children: [
-    title ? /* @__PURE__ */ jsx80(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
-    description ? /* @__PURE__ */ jsx80("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
+  return /* @__PURE__ */ jsxs31(Fragment14, { children: [
+    title ? /* @__PURE__ */ jsx81(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
+    description ? /* @__PURE__ */ jsx81("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
 };
 var getHeaderStyle = (tags) => {
@@ -3589,29 +3650,46 @@ var getHeaderStyle = (tags) => {
   return { titleType: "title-section", alignmentClassName: "text-xs-center" };
 };
 
+// ../renderers/src/step/StepRenderer.tsx
+import { jsx as jsx82, jsxs as jsxs32 } from "react/jsx-runtime";
+var StepRenderer = {
+  canRenderType: "step",
+  render: StepRendererComponent
+};
+function StepRendererComponent(props) {
+  const { back, description, error, title, children, toolbar, footer, tags } = props;
+  return /* @__PURE__ */ jsxs32("div", { children: [
+    /* @__PURE__ */ jsx82(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ jsx82("div", { className: "m-b-4", children: /* @__PURE__ */ jsx82(StepHeader, { title, description, tags }) }) : void 0,
+    error ? /* @__PURE__ */ jsx82(Alert2, { type: "negative", className: "m-b-2", message: error }) : null,
+    children,
+    /* @__PURE__ */ jsx82(StepFooter, { footer, tags })
+  ] });
+}
+
 // ../renderers/src/TabsRenderer.tsx
 import { Chips, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
-import { useState as useState11 } from "react";
-import { jsx as jsx81, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
   render: (props) => {
     switch (props.control) {
       case "segmented":
         if (props.tabs.length > 3) {
-          return /* @__PURE__ */ jsx81(TabsRendererComponent, __spreadValues({}, props));
+          return /* @__PURE__ */ jsx83(TabsRendererComponent, __spreadValues({}, props));
         }
-        return /* @__PURE__ */ jsx81(SegmentedTabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ jsx83(SegmentedTabsRendererComponent, __spreadValues({}, props));
       case "chips":
-        return /* @__PURE__ */ jsx81(ChipsTabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ jsx83(ChipsTabsRendererComponent, __spreadValues({}, props));
       default:
-        return /* @__PURE__ */ jsx81(TabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ jsx83(TabsRendererComponent, __spreadValues({}, props));
     }
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = useState11(0);
-  return /* @__PURE__ */ jsx81("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx81(
+  const [selectedIndex, setSelectedIndex] = useState12(0);
+  return /* @__PURE__ */ jsx83("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx83(
     Tabs2,
     {
       name: uid,
@@ -3619,7 +3697,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
       tabs: tabs.map((option) => ({
         title: option.title,
         disabled: false,
-        content: /* @__PURE__ */ jsxs31("div", { className: "m-t-2", children: [
+        content: /* @__PURE__ */ jsxs33("div", { className: "m-t-2", children: [
           " ",
           option.children,
           " "
@@ -3631,9 +3709,9 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState11(0);
-  return /* @__PURE__ */ jsxs31("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx81(
+  const [selectedIndex, setSelectedIndex] = useState12(0);
+  return /* @__PURE__ */ jsxs33("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ jsx83(
       SegmentedControl2,
       {
         name: uid,
@@ -3648,14 +3726,14 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
         onChange: (value) => setSelectedIndex(Number(value))
       }
     ),
-    /* @__PURE__ */ jsx81("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+    /* @__PURE__ */ jsx83("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] = useState11(0);
-  return /* @__PURE__ */ jsxs31("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx81("div", { className: "chips-container", children: /* @__PURE__ */ jsx81(
+  const [selectedIndex, setSelectedIndex] = useState12(0);
+  return /* @__PURE__ */ jsxs33("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ jsx83("div", { className: "chips-container", children: /* @__PURE__ */ jsx83(
       Chips,
       {
         chips: tabs.map((tab, index) => ({ label: tab.title, value: index })),
@@ -3663,7 +3741,7 @@ function ChipsTabsRendererComponent({ margin, tabs }) {
         onChange: ({ selectedValue }) => setSelectedIndex(Number(selectedValue))
       }
     ) }),
-    /* @__PURE__ */ jsx81("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+    /* @__PURE__ */ jsx83("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
   ] });
 }
 
@@ -3678,7 +3756,7 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -3697,12 +3775,12 @@ function VariableTextInput(inputProps) {
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
   switch (control) {
     case "email":
-      return /* @__PURE__ */ jsx82(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
+      return /* @__PURE__ */ jsx84(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
-      return /* @__PURE__ */ jsx82(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
+      return /* @__PURE__ */ jsx84(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
-      return /* @__PURE__ */ jsx82(
+      return /* @__PURE__ */ jsx84(
         TextInput,
         __spreadProps(__spreadValues({}, numericProps), {
           onChange: (newValue) => {
@@ -3713,9 +3791,9 @@ function VariableTextInput(inputProps) {
       );
     }
     case "phone-number":
-      return /* @__PURE__ */ jsx82(PhoneNumberInput, __spreadProps(__spreadValues({ initialValue: value }, commonProps), { onChange }));
+      return /* @__PURE__ */ jsx84(PhoneNumberInput, __spreadProps(__spreadValues({ initialValue: value }, commonProps), { onChange }));
     default: {
-      return /* @__PURE__ */ jsx82(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "text", onChange }));
+      return /* @__PURE__ */ jsx84(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "text", onChange }));
     }
   }
 }
@@ -3723,11 +3801,11 @@ function TextInput(props) {
   const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
   const InputWithPattern = control === "textarea" ? TextareaWithDisplayFormat : InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? TextArea : Input5;
-  return displayFormat ? /* @__PURE__ */ jsx82(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx82(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
+  return displayFormat ? /* @__PURE__ */ jsx84(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx84(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
 }
 
 // ../renderers/src/TextInputRenderer.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var TextInputRenderer = {
   canRenderType: "input-text",
   render: (props) => {
@@ -3760,7 +3838,7 @@ var TextInputRenderer = {
         }
       }
     });
-    return /* @__PURE__ */ jsx83(
+    return /* @__PURE__ */ jsx85(
       FieldInput_default,
       {
         id,
@@ -3768,7 +3846,7 @@ var TextInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ jsx83(InputGroup4, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx83(VariableTextInput, __spreadValues({}, inputProps)) })
+        children: /* @__PURE__ */ jsx85(InputGroup4, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx85(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
   }
@@ -3782,7 +3860,7 @@ import { Status as Status2, Upload, UploadInput as UploadInput2 } from "@transfe
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // ../renderers/src/UploadInputRenderer.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var UploadInputRenderer = {
   canRenderType: "input-upload",
   render: (props) => {
@@ -3798,14 +3876,14 @@ var UploadInputRenderer = {
     };
     return (
       // We don't pass help here as there is no sensible place to display it
-      /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx86(
         UploadFieldInput_default,
         {
           id,
           label: void 0,
           description: void 0,
           validation: validationState,
-          children: /* @__PURE__ */ jsx84(
+          children: /* @__PURE__ */ jsx86(
             UploadInput2,
             {
               id,
@@ -3871,7 +3949,7 @@ var LargeUploadRenderer = {
     };
     const filetypes = acceptsToFileTypes(accepts);
     const usAccept = filetypes === "*" ? "*" : filetypes.join(",");
-    return /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsx86(
       FieldInput_default,
       {
         id,
@@ -3879,7 +3957,7 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ jsx84(
+        children: /* @__PURE__ */ jsx86(
           Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept,
@@ -3896,24 +3974,27 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 import { Nudge } from "@transferwise/components";
-import { useState as useState12 } from "react";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
   render: UpsellRendererComponent
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = useState12(true);
-  return isVisible ? /* @__PURE__ */ jsx85(
+  const [isVisible, setIsVisible] = useState13(true);
+  return isVisible ? /* @__PURE__ */ jsx87(
     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();
@@ -3951,11 +4032,38 @@ var supportedMediaNames = [
   "wallet"
 ];
 
+// ../renderers/src/ButtonRenderer/CircularButtonRenderer.tsx
+import { CircularButton } from "@transferwise/components";
+var import_classnames7 = __toESM(require_classnames());
+import { jsx as jsx88 } from "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__ */ jsx88("div", { className: (0, import_classnames7.default)(getMargin(margin), "df-button", "circular"), children: /* @__PURE__ */ jsx88(
+    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,
@@ -4001,11 +4109,11 @@ var getWiseRenderers = () => [
 
 // ../renderers/src/InitialLoadingStateRenderer.tsx
 import { Loader as Loader2 } from "@transferwise/components";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var InitialLoadingStateRenderer = {
   canRenderType: "loading-state",
   canRender: ({ stepLoadingState }) => stepLoadingState === "initial",
-  render: () => /* @__PURE__ */ jsx86(
+  render: () => /* @__PURE__ */ jsx89(
     Loader2,
     {
       size: "md",
@@ -4016,7 +4124,7 @@ var InitialLoadingStateRenderer = {
 };
 
 // ../renderers/src/subflow/getSubflowRenderer.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var getSubflowRenderer = ({
   Component: Component2,
   canRender
@@ -4025,7 +4133,7 @@ var getSubflowRenderer = ({
     canRenderType: "subflow",
     canRender,
     render: (props) => {
-      return /* @__PURE__ */ jsx87(
+      return /* @__PURE__ */ jsx90(
         Component2,
         {
           presentation: props.presentation,
@@ -4043,11 +4151,11 @@ var getSubflowRenderer = ({
 
 // src/dynamicFlow/useOnCopy.tsx
 import { useCallback } from "react";
-import { useIntl as useIntl15 } from "react-intl";
+import { useIntl as useIntl16 } from "react-intl";
 
 // src/dynamicFlow/messages.ts
-import { defineMessages as defineMessages12 } from "react-intl";
-var messages_default = defineMessages12({
+import { defineMessages as defineMessages13 } from "react-intl";
+var messages_default = defineMessages13({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -4062,7 +4170,7 @@ var messages_default = defineMessages12({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = useIntl15();
+  const { formatMessage } = useIntl16();
   const createSnackBar = useSnackBarIfAvailable();
   return useCallback(
     (copiedContent) => {
@@ -4078,9 +4186,9 @@ var useOnCopy = () => {
 
 // src/dynamicFlow/useWiseHttpClient.tsx
 import { useCallback as useCallback2 } from "react";
-import { useIntl as useIntl16 } from "react-intl";
+import { useIntl as useIntl17 } from "react-intl";
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl16();
+  const { locale } = useIntl17();
   return useCallback2(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
@@ -4105,24 +4213,24 @@ var handleRejection = (error) => {
 // src/dynamicFlow/DynamicFlowModal.tsx
 import { useDynamicFlowModal } from "@wise/dynamic-flow-client";
 import { Modal as Modal5 } from "@transferwise/components";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 function DynamicFlowModal(props) {
   const _a = props, { className = "" } = _a, rest = __objRest(_a, ["className"]);
   const dfProps = useWiseToCoreProps(rest);
   const df = useDynamicFlowModal(dfProps);
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx91(
     Modal5,
     __spreadProps(__spreadValues({
       className: `dynamic-flow-modal ${className}`,
       disableDimmerClickToClose: true
     }, df.modal), {
-      body: /* @__PURE__ */ jsx88("div", { className: "dynamic-flow-modal", children: df.modal.body })
+      body: /* @__PURE__ */ jsx91("div", { className: "dynamic-flow-modal", children: df.modal.body })
     })
   );
 }
 
 // src/dynamicFlow/getMergedRenderers.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 var getMergedRenderers = (props) => {
   var _d, _e;
@@ -4136,7 +4244,7 @@ var getMergedRenderers = (props) => {
         method: initialRequest.method,
         data: initialRequest.body
       };
-      return presentation.type === "push" ? /* @__PURE__ */ jsx89(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx89(
+      return presentation.type === "push" ? /* @__PURE__ */ jsx92(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx92(
         DynamicFlowModal,
         __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
           features: subflowFeatures,
@@ -4177,9 +4285,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;
@@ -4187,12 +4303,12 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = useDynamicFlow(dfProps);
-  return /* @__PURE__ */ jsx90("div", { className, children: df.view });
+  return /* @__PURE__ */ jsx93("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
@@ -4201,7 +4317,7 @@ import {
   useImperativeHandle
 } from "react";
 import { useDynamicFlow as useDynamicFlow2 } from "@wise/dynamic-flow-client";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
@@ -4217,14 +4333,14 @@ var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
     }),
     [df]
   );
-  return /* @__PURE__ */ jsx91("div", { className, children: df.view });
+  return /* @__PURE__ */ jsx94("div", { className, children: df.view });
 });
 
 // src/index.ts
 import { findRendererPropsByType } from "@wise/dynamic-flow-client";
 
 // src/dynamicFlow/renderers.tsx
-var Header11 = Header5;
+var Header10 = Header5;
 var Media2 = Media;
 var getMargin2 = getMargin;
 
@@ -4274,7 +4390,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
@@ -4320,7 +4437,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
@@ -4366,7 +4484,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
@@ -4412,7 +4531,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
@@ -4423,7 +4543,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}.",
@@ -4455,10 +4575,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
@@ -4504,7 +4625,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
@@ -4550,7 +4672,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
@@ -4596,7 +4719,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
@@ -4642,7 +4766,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
@@ -4688,7 +4813,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
@@ -4734,7 +4860,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
@@ -4780,7 +4907,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
@@ -4826,7 +4954,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
@@ -4872,7 +5001,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
@@ -4918,7 +5048,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
@@ -4964,7 +5095,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
@@ -5010,7 +5142,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
@@ -5056,7 +5189,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
@@ -5092,7 +5226,7 @@ var i18n_default = translations;
 export {
   DynamicFlow,
   DynamicFlowWithRef,
-  Header11 as Header,
+  Header10 as Header,
   Media2 as Media,
   findRendererPropsByType,
   getMargin2 as getMargin,