@wise/dynamic-flow-client-internal 3.14.0 → 3.15.0

package/build/main.mjs

@@ -33,6 +33,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -114,6 +117,158 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var init_clsx = __esm({
+  "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"() {
+    "use strict";
+  }
+});
+
+// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.12.1_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js
+import { useState, useEffect, forwardRef, Suspense, lazy } from "react";
+import { jsx as jsx12, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
+var init_index_93a0c34e_esm = __esm({
+  "../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.12.1_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js"() {
+    "use strict";
+    init_clsx();
+    unknownFlagName = "wise";
+    Flag = ({
+      code,
+      intrinsicSize = 64,
+      className = void 0
+    }) => {
+      const [fallback, setFallback] = useState(null);
+      useEffect(() => {
+        setFallback(null);
+      }, [code]);
+      const detailed = intrinsicSize >= 150;
+      const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
+      return /* @__PURE__ */ jsx12("img", {
+        className: clsx(`wds-flag wds-flag-${name}`, className),
+        src: `https://wise.com/web-art/assets/flags/${name}.svg`,
+        alt: "",
+        width: intrinsicSize,
+        height: intrinsicSize,
+        onError: () => {
+          setFallback((prev) => prev == null && detailed ? "simple" : "unknown");
+        }
+      });
+    };
+    (function(Sizes2) {
+      Sizes2["SMALL"] = "small";
+      Sizes2["MEDIUM"] = "medium";
+      Sizes2["LARGE"] = "large";
+    })(Sizes || (Sizes = {}));
+    ImageSizes = {
+      [Sizes.SMALL]: 200,
+      [Sizes.MEDIUM]: 300,
+      [Sizes.LARGE]: 500
+    };
+    imageSizes = {
+      [Sizes.SMALL]: 200,
+      [Sizes.MEDIUM]: 300,
+      [Sizes.LARGE]: 500
+    };
+    (function(Assets2) {
+      Assets2["BELL"] = "bell";
+      Assets2["BRIEFCASE"] = "briefcase";
+      Assets2["BUSINESS_CARD"] = "business-card";
+      Assets2["CALENDAR"] = "calendar";
+      Assets2["CHECK_MARK"] = "check-mark";
+      Assets2["CLOSED_WINDOW"] = "closed-window";
+      Assets2["COIN_PILE_DOWN"] = "coin-pile-down";
+      Assets2["COIN_PILE_UP"] = "coin-pile-up";
+      Assets2["CONFETTI"] = "confetti";
+      Assets2["CONSTRUCTION_FENCE"] = "construction-fence";
+      Assets2["CONVERT"] = "convert";
+      Assets2["COOKIE"] = "cookie";
+      Assets2["DIGITAL_CARD_2"] = "digital-card-2";
+      Assets2["DIGITAL_CARD"] = "digital-card";
+      Assets2["DOCUMENTS"] = "documents";
+      Assets2["DOOR"] = "door";
+      Assets2["ECO_CARD"] = "eco-card";
+      Assets2["ELECTRIC_PLUG"] = "electric-plug";
+      Assets2["EMAIL_SUCCESS"] = "email-success";
+      Assets2["EMAIL"] = "email";
+      Assets2["EXCLAMATION_MARK"] = "exclamation-mark";
+      Assets2["FLAG"] = "flag";
+      Assets2["FLOWER"] = "flower";
+      Assets2["GEAR"] = "gear";
+      Assets2["GLOBE"] = "globe";
+      Assets2["GRAPH"] = "graph";
+      Assets2["HEART_2"] = "heart-2";
+      Assets2["HEART_3"] = "heart-3";
+      Assets2["HEART_4"] = "heart-4";
+      Assets2["HEART_5"] = "heart-5";
+      Assets2["HEART"] = "heart";
+      Assets2["HOUSE"] = "house";
+      Assets2["ID_CARD"] = "id-card";
+      Assets2["INFINITE"] = "infinite";
+      Assets2["INTEREST"] = "interest";
+      Assets2["INVITE_LETTER"] = "invite-letter";
+      Assets2["JARS"] = "jars";
+      Assets2["KEY"] = "key";
+      Assets2["LIGHT_BULB"] = "light-bulb";
+      Assets2["LOCK_PLATFORM"] = "lock-platform";
+      Assets2["LOCK"] = "lock";
+      Assets2["MAGNIFYING_GLASS"] = "magnifying-glass";
+      Assets2["MAP"] = "map";
+      Assets2["MARBLE_CARD_BUSINESS"] = "marble-card-business";
+      Assets2["MARBLE_CARD"] = "marble-card";
+      Assets2["MARBLE"] = "marble";
+      Assets2["MEGAPHONE"] = "megaphone";
+      Assets2["MULTI_CURRENCY"] = "multi-currency";
+      Assets2["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
+      Assets2["PALM_TREE"] = "palm-tree";
+      Assets2["PERCENTAGE"] = "percentage";
+      Assets2["PERSONAL_CARD"] = "personal-card";
+      Assets2["PHONES"] = "phones";
+      Assets2["PIE_CHART"] = "pie-chart";
+      Assets2["PLANE_2"] = "plane-2";
+      Assets2["PLANE"] = "plane";
+      Assets2["PUZZLE_PIECES"] = "puzzle-pieces";
+      Assets2["QUESTION_MARK"] = "question-mark";
+      Assets2["RECEIVE"] = "receive";
+      Assets2["REMINDER_LETTER"] = "reminder-letter";
+      Assets2["SAND_TIMER"] = "sand-timer";
+      Assets2["SATELLITE_PLATFORM"] = "satellite-platform";
+      Assets2["SHOPPING_BAG"] = "shopping-bag";
+      Assets2["SKIP_AUTHENTICATION"] = "skip-authentication";
+      Assets2["SPEECH_BUBBLE"] = "speech-bubble";
+      Assets2["STOPWATCH_PLATFORM"] = "stopwatch-platform";
+      Assets2["TARGET_PLATFORM"] = "target-platform";
+      Assets2["TOOL"] = "tool";
+      Assets2["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
+      Assets2["WALLET"] = "wallet";
+    })(Assets || (Assets = {}));
+    (function(RenderMode2) {
+      RenderMode2[RenderMode2["INIT"] = 0] = "INIT";
+      RenderMode2[RenderMode2["FALLBACK"] = 1] = "FALLBACK";
+      RenderMode2[RenderMode2["ASSET_3D"] = 2] = "ASSET_3D";
+    })(RenderMode || (RenderMode = {}));
+  }
+});
+
 // src/index.ts
 import { makeHttpClient } from "@wise/dynamic-flow-client";
 import { JsonSchemaForm, isValidSchema } from "@wise/dynamic-flow-client";
@@ -1062,111 +1217,13 @@ var DateInputRenderer = {
 var DateInputRenderer_default = DateInputRenderer;
 
 // ../renderers/src/DecisionRenderer.tsx
-import { NavigationOptionsList, NavigationOption } from "@transferwise/components";
+import { NavigationOptionsList, NavigationOption, Header } from "@transferwise/components";
 
-// ../../node_modules/.pnpm/@wise+art@2.7.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
-import { useState, useEffect, forwardRef } from "react";
-import { jsx as jsx12, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
-var unknownFlagName = "wise";
-var Flag = ({
-  code,
-  intrinsicSize = 64
-}) => {
-  const [fallback, setFallback] = useState(null);
-  useEffect(() => {
-    setFallback(null);
-  }, [code]);
-  const detailed = intrinsicSize >= 150;
-  const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
-  return /* @__PURE__ */ jsx12("img", {
-    src: `https://wise.com/web-art/assets/flags/${name}.svg`,
-    alt: "",
-    width: intrinsicSize,
-    height: intrinsicSize,
-    onError: () => {
-      setFallback((prev) => prev == null && detailed ? "simple" : "unknown");
-    }
-  });
-};
-var Sizes;
-(function(Sizes2) {
-  Sizes2["SMALL"] = "small";
-  Sizes2["MEDIUM"] = "medium";
-  Sizes2["LARGE"] = "large";
-})(Sizes || (Sizes = {}));
-var imageSizes = {
-  [Sizes.SMALL]: 200,
-  [Sizes.MEDIUM]: 300,
-  [Sizes.LARGE]: 500
-};
-var Assets;
-(function(Assets2) {
-  Assets2["BELL"] = "bell";
-  Assets2["BRIEFCASE"] = "briefcase";
-  Assets2["BUSINESS_CARD"] = "business-card";
-  Assets2["CALENDAR"] = "calendar";
-  Assets2["CHECK_MARK"] = "check-mark";
-  Assets2["CLOSED_WINDOW"] = "closed-window";
-  Assets2["COIN_PILE_DOWN"] = "coin-pile-down";
-  Assets2["COIN_PILE_UP"] = "coin-pile-up";
-  Assets2["CONFETTI"] = "confetti";
-  Assets2["CONSTRUCTION_FENCE"] = "construction-fence";
-  Assets2["CONVERT"] = "convert";
-  Assets2["COOKIE"] = "cookie";
-  Assets2["DIGITAL_CARD_2"] = "digital-card-2";
-  Assets2["DIGITAL_CARD"] = "digital-card";
-  Assets2["DOCUMENTS"] = "documents";
-  Assets2["DOOR"] = "door";
-  Assets2["ECO_CARD"] = "eco-card";
-  Assets2["ELECTRIC_PLUG"] = "electric-plug";
-  Assets2["EMAIL_SUCCESS"] = "email-success";
-  Assets2["EMAIL"] = "email";
-  Assets2["EXCLAMATION_MARK"] = "exclamation-mark";
-  Assets2["FLAG"] = "flag";
-  Assets2["FLOWER"] = "flower";
-  Assets2["GEAR"] = "gear";
-  Assets2["GLOBE"] = "globe";
-  Assets2["GRAPH"] = "graph";
-  Assets2["HEART_2"] = "heart-2";
-  Assets2["HEART_3"] = "heart-3";
-  Assets2["HEART_4"] = "heart-4";
-  Assets2["HEART_5"] = "heart-5";
-  Assets2["HEART"] = "heart";
-  Assets2["HOUSE"] = "house";
-  Assets2["ID_CARD"] = "id-card";
-  Assets2["INFINITE"] = "infinite";
-  Assets2["INVITE_LETTER"] = "invite-letter";
-  Assets2["JARS"] = "jars";
-  Assets2["KEY"] = "key";
-  Assets2["LIGHT_BULB"] = "light-bulb";
-  Assets2["LOCK"] = "lock";
-  Assets2["MAGNIFYING_GLASS"] = "magnifying-glass";
-  Assets2["MAP"] = "map";
-  Assets2["MARBLE_CARD_BUSINESS"] = "marble-card-business";
-  Assets2["MARBLE_CARD"] = "marble-card";
-  Assets2["MARBLE"] = "marble";
-  Assets2["MEGAPHONE"] = "megaphone";
-  Assets2["MULTI_CURRENCY"] = "multi-currency";
-  Assets2["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
-  Assets2["PALM_TREE"] = "palm-tree";
-  Assets2["PERCENTAGE"] = "percentage";
-  Assets2["PERSONAL_CARD"] = "personal-card";
-  Assets2["PHONES"] = "phones";
-  Assets2["PIE_CHART"] = "pie-chart";
-  Assets2["PLANE_2"] = "plane-2";
-  Assets2["PLANE"] = "plane";
-  Assets2["PUZZLE_PIECES"] = "puzzle-pieces";
-  Assets2["QUESTION_MARK"] = "question-mark";
-  Assets2["RECEIVE"] = "receive";
-  Assets2["REMINDER_LETTER"] = "reminder-letter";
-  Assets2["SAND_TIMER"] = "sand-timer";
-  Assets2["SHOPPING_BAG"] = "shopping-bag";
-  Assets2["SKIP_AUTHENTICATION"] = "skip-authentication";
-  Assets2["SPEECH_BUBBLE"] = "speech-bubble";
-  Assets2["TOOL"] = "tool";
-  Assets2["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
-  Assets2["WALLET"] = "wallet";
-})(Assets || (Assets = {}));
+// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.12.1_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
+init_index_93a0c34e_esm();
+init_clsx();
+import "react";
+import "react/jsx-runtime";
 
 // ../renderers/src/components/icon/FlagIcon.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -1230,27 +1287,30 @@ function NavigationOptionMedia({ icon, image }) {
 }
 
 // ../renderers/src/DecisionRenderer.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 var DecisionRenderer = {
   canRenderType: "decision",
   render: DecisionRendererComponent
 };
 var DecisionRenderer_default = DecisionRenderer;
-function DecisionRendererComponent({ margin, options }) {
+function DecisionRendererComponent({ margin, options, title }) {
   const { isLoading } = useLoadingContext();
-  return /* @__PURE__ */ jsx17("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx17(NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title, onClick }) => /* @__PURE__ */ jsx17(
-    NavigationOption,
-    {
-      title,
-      content: description,
-      disabled: isLoading || disabled,
-      media: /* @__PURE__ */ jsx17(NavigationOptionMedia, { icon, image }),
-      showMediaCircle: false,
-      showMediaAtAllSizes: true,
-      onClick
-    },
-    JSON.stringify(title)
-  )) }) });
+  return /* @__PURE__ */ jsxs4("div", { className: getMargin(margin), children: [
+    title && /* @__PURE__ */ jsx17(Header, { as: "h2", title }),
+    /* @__PURE__ */ jsx17(NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title: title2, onClick }) => /* @__PURE__ */ jsx17(
+      NavigationOption,
+      {
+        title: title2,
+        content: description,
+        disabled: isLoading || disabled,
+        media: /* @__PURE__ */ jsx17(NavigationOptionMedia, { icon, image }),
+        showMediaCircle: false,
+        showMediaAtAllSizes: true,
+        onClick
+      },
+      JSON.stringify(title2)
+    )) })
+  ] });
 }
 
 // ../renderers/src/DividerRenderer.tsx
@@ -1270,14 +1330,14 @@ var FormRenderer = {
 var FormRenderer_default = FormRenderer;
 
 // ../renderers/src/FormSectionRenderer.tsx
-import { Header } from "@transferwise/components";
-import { jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Header as Header2 } from "@transferwise/components";
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
 var FormSectionRenderer = {
   canRenderType: "form-section",
-  render: ({ title, description, children }) => /* @__PURE__ */ jsxs4("fieldset", { children: [
+  render: ({ title, description, children }) => /* @__PURE__ */ jsxs5("fieldset", { children: [
     title && // TODO - once section headers support help, we could show help in here
     /* @__PURE__ */ jsx20(
-      Header,
+      Header2,
       {
         as: "h2",
         title
@@ -1407,8 +1467,8 @@ var getImageSource = async (httpClient, imageUrl) => {
 };
 
 // ../renderers/src/InstructionsRenderer.tsx
-import { Header as Header2, InstructionsList } from "@transferwise/components";
-import { jsx as jsx23, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Header as Header3, InstructionsList } from "@transferwise/components";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
 var InstructionsRenderer = {
@@ -1416,8 +1476,8 @@ var InstructionsRenderer = {
   render: ({ items, margin, title }) => {
     const dos = items.filter((item) => doContext.includes(item.context)).map(({ text }) => text);
     const donts = items.filter((item) => dontContext.includes(item.context)).map(({ text }) => text);
-    return /* @__PURE__ */ jsxs5("div", { className: getMargin(margin), children: [
-      title ? /* @__PURE__ */ jsx23(Header2, { title }) : null,
+    return /* @__PURE__ */ jsxs6("div", { className: getMargin(margin), children: [
+      title ? /* @__PURE__ */ jsx23(Header3, { title }) : null,
       /* @__PURE__ */ jsx23(InstructionsList, { dos, donts })
     ] });
   }
@@ -1488,7 +1548,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 // ../renderers/src/ModalRenderer.tsx
 import { Button as Button2, Modal } from "@transferwise/components";
 import { useState as useState3 } from "react";
-import { jsx as jsx27, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
 var ModalRenderer = {
   canRenderType: "modal",
   render: (props) => /* @__PURE__ */ jsx27(DFModal, __spreadValues({}, props))
@@ -1496,7 +1556,7 @@ var ModalRenderer = {
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = useState3(false);
-  return /* @__PURE__ */ jsxs6("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx27(Button2, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ jsx27(
       Modal,
@@ -1635,7 +1695,7 @@ import { UploadInput } from "@transferwise/components";
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames3 = __toESM(require_classnames());
 import { InlineAlert } from "@transferwise/components";
-import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs8 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
   children,
@@ -1646,7 +1706,7 @@ function UploadFieldInput({
 }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx30(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: (0, import_classnames3.default)("form-group d-block", {
@@ -1792,7 +1852,7 @@ var paragraph_messages_default = defineMessages3({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { jsx as jsx33, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
 var ParagraphRenderer = {
   canRenderType: "paragraph",
   render: (props) => /* @__PURE__ */ jsx33(Paragraph, __spreadValues({}, props))
@@ -1816,7 +1876,7 @@ function CopyableParagraph({
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ jsxs8("div", { className, children: [
+  return /* @__PURE__ */ jsxs9("div", { className, children: [
     /* @__PURE__ */ jsx33(
       Input3,
       {
@@ -1832,7 +1892,7 @@ function CopyableParagraph({
 var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/RepeatableRenderer.tsx
-import { Button as Button4, Header as Header3, Modal as Modal2, NavigationOption as NavigationOption2, InlineAlert as InlineAlert2 } from "@transferwise/components";
+import { Button as Button4, Header as Header4, Modal as Modal2, NavigationOption as NavigationOption2, InlineAlert as InlineAlert2 } from "@transferwise/components";
 import { useState as useState5 } from "react";
 import { Plus } from "@transferwise/icons";
 import { useIntl as useIntl4 } from "react-intl";
@@ -1864,7 +1924,7 @@ var repeatable_messages_default = defineMessages4({
 
 // ../renderers/src/RepeatableRenderer.tsx
 var import_classnames5 = __toESM(require_classnames());
-import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs10 } from "react/jsx-runtime";
 var RepeatableRenderer = {
   canRenderType: "repeatable",
   render: (props) => /* @__PURE__ */ jsx34(Repeatable, __spreadValues({}, props))
@@ -1906,10 +1966,10 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    title && /* @__PURE__ */ jsx34(Header3, { title }),
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    title && /* @__PURE__ */ jsx34(Header4, { title }),
     description && /* @__PURE__ */ jsx34("p", { children: description }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10(
       "div",
       {
         className: (0, import_classnames5.default)("form-group", {
@@ -1935,9 +1995,9 @@ function Repeatable(props) {
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ jsxs9(Fragment2, { children: [
+        body: /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsx34("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ jsxs9("div", { children: [
+          /* @__PURE__ */ jsxs10("div", { children: [
             /* @__PURE__ */ jsx34(Button4, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
             /* @__PURE__ */ jsx34(Button4, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
           ] })
@@ -1991,10 +2051,10 @@ var generic_error_messages_default = defineMessages5({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
   const intl = useIntl5();
-  return /* @__PURE__ */ jsxs10("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ jsxs11("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
     /* @__PURE__ */ jsx35(
@@ -2013,7 +2073,7 @@ function ErrorResult({ state }) {
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { useState as useState6 } from "react";
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs12 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   isLoading,
@@ -2025,7 +2085,7 @@ function BlockSearchRendererComponent({
 }) {
   const [hasSearched, setHasSearched] = useState6(false);
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ jsxs11("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx36(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ jsx36(
       Input4,
       {
@@ -2093,7 +2153,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 import { Markdown as Markdown4, Typeahead } from "@transferwise/components";
 import { Search } from "@transferwise/icons";
 import { useState as useState7 } from "react";
-import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function InlineSearchRenderer({
   id,
   isLoading,
@@ -2104,43 +2164,40 @@ function InlineSearchRenderer({
 }) {
   const [hasSearched, setHasSearched] = useState7(false);
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ jsx37("div", { className: getMargin(margin), children: /* @__PURE__ */ jsxs12(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: [
-    id,
-    /* @__PURE__ */ jsx37(
-      Typeahead,
-      {
-        id: "typeahead-input-id",
-        name: "typeahead-input-name",
-        size: "md",
-        maxHeight: 100,
-        footer: /* @__PURE__ */ jsx37(TypeaheadFooter, { state, isLoading }),
-        multiple: false,
-        clearable: false,
-        addon: /* @__PURE__ */ jsx37(Search, { size: 24 }),
-        options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
-        minQueryLength: 1,
-        onChange: (values) => {
-          if (values.length > 0) {
-            const [updatedValue] = values;
-            const { value: result } = updatedValue;
-            if (result) {
-              trackEvent("Search Result Selected", __spreadValues({
-                type: result.type
-              }, result.type === "action" ? { actionId: result.id } : {}));
-              result.onClick();
-            }
-          }
-        },
-        onInputChange: (query) => {
-          if (!hasSearched) {
-            setHasSearched(true);
-            trackEvent("Search Started");
+  return /* @__PURE__ */ jsx37("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx37(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ jsx37(
+    Typeahead,
+    {
+      id: "typeahead-input-id",
+      name: "typeahead-input-name",
+      size: "md",
+      maxHeight: 100,
+      footer: /* @__PURE__ */ jsx37(TypeaheadFooter, { state, isLoading }),
+      multiple: false,
+      clearable: false,
+      addon: /* @__PURE__ */ jsx37(Search, { size: 24 }),
+      options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
+      minQueryLength: 1,
+      onChange: (values) => {
+        if (values.length > 0) {
+          const [updatedValue] = values;
+          const { value: result } = updatedValue;
+          if (result) {
+            trackEvent("Search Result Selected", __spreadValues({
+              type: result.type
+            }, result.type === "action" ? { actionId: result.id } : {}));
+            result.onClick();
           }
-          onChange(query);
         }
+      },
+      onInputChange: (query) => {
+        if (!hasSearched) {
+          setHasSearched(true);
+          trackEvent("Search Started");
+        }
+        onChange(query);
       }
-    )
-  ] }) });
+    }
+  ) }) });
 }
 function mapResultToTypeaheadOption(result) {
   return {
@@ -2388,12 +2445,12 @@ var SelectInputRenderer = {
 var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
-import { Header as Header4, Summary } from "@transferwise/components";
+import { Header as Header5, Summary } from "@transferwise/components";
 import { jsx as jsx45, jsxs as jsxs17 } from "react/jsx-runtime";
 var StatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ jsxs17("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ jsx45(Header4, { title }) : null,
+    title ? /* @__PURE__ */ jsx45(Header5, { title }) : null,
     items.map(({ description, icon, status, title: itemTitle }) => /* @__PURE__ */ jsx45(
       Summary,
       {
@@ -2607,7 +2664,7 @@ var LargeUploadRenderer = {
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-import { DefinitionList, Header as Header5 } from "@transferwise/components";
+import { DefinitionList, Header as Header6 } from "@transferwise/components";
 import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 var ReviewRenderer = {
   canRenderType: "review",
@@ -2621,7 +2678,7 @@ var ReviewRenderer = {
       }
     } : void 0;
     return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ jsx49(Header5, { title: title != null ? title : "", action }),
+      (title || callToAction) && /* @__PURE__ */ jsx49(Header6, { title: title != null ? title : "", action }),
       /* @__PURE__ */ jsx49("div", { className: margin, children: /* @__PURE__ */ jsx49(
         DefinitionList,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -49,15 +49,15 @@
     "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@transferwise/components": "46.37.0",
+    "@transferwise/components": "46.51.0",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.0",
-    "@transferwise/neptune-css": "14.10.0",
+    "@transferwise/neptune-css": "14.12.1",
     "@types/jest": "29.5.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@wise/art": "2.7.0",
-    "@wise/components-theming": "^1.3.0",
+    "@wise/art": "2.14.0",
+    "@wise/components-theming": "^1.5.0",
     "babel-jest": "29.7.0",
     "currency-flags": "4.0.7",
     "esbuild": "0.20.2",
@@ -65,7 +65,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
-    "npm-run-all2": "5.0.2",
+    "npm-run-all2": "6.2.2",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^15.1.0",
@@ -96,7 +96,7 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "3.14.0",
+    "@wise/dynamic-flow-client": "3.15.0",
     "@wise/dynamic-flow-types": "2.16.0"
   },
   "scripts": {