@wise/dynamic-flow-client-internal 4.21.0-experimental-fae3d25 → 4.21.0-experimental-a003e45

package/build/main.js

@@ -850,29 +850,30 @@ var AddressValidationButtonRenderer = {
 function AddressValidationButtonComponent(props) {
   const { disabled, margin, title, stepLoadingState, onClick } = props;
   const { formatMessage } = (0, import_react_intl2.useIntl)();
-  const [isActive, setActive] = (0, import_react.useState)(false);
-  const isLoading = isActive && stepLoadingState !== "idle";
+  const [spinny, setSpinny] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  }, [stepLoadingState]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `d-flex flex-column ${getMargin(margin)}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.Button,
       {
         v2: true,
         block: true,
-        disabled: isLoading || disabled,
+        disabled: stepLoadingState !== "idle" || disabled,
         priority: "primary",
         size: "md",
-        loading: isLoading,
-        onBlur: () => {
-          setActive(false);
-        },
+        loading: spinny,
         onClick: () => {
-          setActive(true);
+          setSpinny(true);
           onClick();
         },
         children: title
       }
     ),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
+    spinny && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
   ] });
 }
 var AddressValidationButtonRenderer_default = AddressValidationButtonRenderer;
@@ -937,8 +938,12 @@ var ButtonRenderer = {
 };
 function ButtonComponent(props) {
   const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
-  const [isActive, setActive] = (0, import_react2.useState)(false);
-  const isLoading = isActive && stepLoadingState !== "idle";
+  const [spinny, setSpinny] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  }, [stepLoadingState]);
   const priority = mapControl(control);
   const type = priority === "tertiary" ? void 0 : mapContext(context);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -946,16 +951,13 @@ function ButtonComponent(props) {
     {
       block: true,
       className: getMargin(margin),
-      disabled: isLoading ? false : disabled,
+      disabled: stepLoadingState !== "idle" || disabled,
       priority,
       size: mapSize(size),
-      loading: isLoading,
+      loading: spinny,
       type,
-      onBlur: () => {
-        setActive(false);
-      },
       onClick: () => {
-        setActive(true);
+        setSpinny(true);
         onClick();
       },
       children: title
@@ -3548,183 +3550,8 @@ var LargeUploadRenderer = {
   }
 };
 
-// ../renderers/src/NewListItem/NewDecisionRenderer.tsx
-var import_components48 = require("@transferwise/components");
-
-// ../renderers/src/NewListItem/getInlineAlert.tsx
-var import_components47 = require("@transferwise/components");
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_components47.ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
-
-// ../renderers/src/NewListItem/NewDecisionRenderer.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var DecisionRenderer2 = {
-  canRenderType: "decision",
-  render: ({ control, margin, options, title }) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getMargin(margin), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components48.Header, { as: "h2", title }),
-    options.map((option) => {
-      const {
-        description,
-        disabled,
-        media,
-        title: itemTitle,
-        tag,
-        href,
-        additionalText,
-        inlineAlert,
-        supportingValues,
-        onClick
-      } = option;
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-        import_components48.ListItem,
-        {
-          title: itemTitle,
-          subtitle: description,
-          spotlight: control === "spotlight" ? tag === "spotlight-active" ? "active" : "inactive" : void 0,
-          disabled,
-          valueTitle: supportingValues == null ? void 0 : supportingValues.value,
-          valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-          media: media ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-            OptionMedia,
-            {
-              media,
-              preferAvatar: control === "with-avatar" || tag === "with-avatar"
-            }
-          ) : void 0,
-          prompt: getInlineAlert(inlineAlert),
-          additionalInfo: additionalText ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components48.ListItem.AdditionalInfo, { children: additionalText }) : void 0,
-          control: href ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components48.ListItem.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components48.ListItem.Navigation, { onClick })
-        },
-        JSON.stringify(option)
-      );
-    })
-  ] })
-};
-var NewDecisionRenderer_default = DecisionRenderer2;
-
-// ../renderers/src/NewListItem/NewListRenderer.tsx
-var import_components50 = require("@transferwise/components");
-
-// ../renderers/src/NewListItem/getAdditionalInfo.tsx
-var import_components49 = require("@transferwise/components");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var getAdditionalInfo = (additionalInfo) => {
-  var _a;
-  return additionalInfo ? (
-    // TODO: this type should have an href so we can render anchors
-    additionalInfo.onClick ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-      import_components49.ListItem.AdditionalInfo,
-      {
-        action: {
-          onClick: additionalInfo.onClick,
-          label: (_a = additionalInfo.text) != null ? _a : ""
-        }
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_components49.ListItem.AdditionalInfo, { children: additionalInfo == null ? void 0 : additionalInfo.text })
-  ) : void 0;
-};
-
-// ../renderers/src/NewListItem/NewListRenderer.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var ListRenderer2 = {
-  canRenderType: "list",
-  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: getMargin(margin), children: [
-    (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components50.Header, { as: "h2", title: title != null ? title : "", action: getListAction2(callToAction) }),
-    items.map(
-      ({
-        title: itemTitle,
-        description,
-        supportingValues,
-        media,
-        tag,
-        additionalInfo,
-        inlineAlert
-      }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-        import_components50.ListItem,
-        {
-          title: itemTitle,
-          subtitle: description,
-          valueTitle: supportingValues == null ? void 0 : supportingValues.value,
-          valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-          media: media ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-            OptionMedia,
-            {
-              media,
-              preferAvatar: control === "with-avatar" || tag === "with-avatar"
-            }
-          ) : void 0,
-          prompt: getInlineAlert(inlineAlert),
-          additionalInfo: getAdditionalInfo(additionalInfo)
-        },
-        itemTitle
-      )
-    )
-  ] })
-};
-var getListAction2 = (callToAction) => {
-  if (callToAction) {
-    return __spreadValues({
-      "aria-label": callToAction.accessibilityDescription,
-      text: callToAction.title,
-      onClick: callToAction.onClick
-    }, callToAction.type === "link" ? { href: callToAction.href, target: "_blank" } : {});
-  }
-  return void 0;
-};
-var NewListRenderer_default = ListRenderer2;
-
-// ../renderers/src/NewListItem/NewReviewRenderer.tsx
-var import_components51 = require("@transferwise/components");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var ReviewRenderer2 = {
-  canRenderType: "review",
-  render: ({ callToAction, control, margin, fields, title }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: getMargin(margin), children: [
-    (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_components51.Header, { as: "h2", title: title != null ? title : "", action: getHeaderAction(callToAction) }),
-    fields.map(({ label, value, media, tag, additionalInfo, inlineAlert, callToAction: callToAction2 }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-      import_components51.ListItem,
-      {
-        title: value,
-        subtitle: label,
-        inverted: true,
-        media: media ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-          OptionMedia,
-          {
-            media,
-            preferAvatar: control === "with-avatar" || tag === "with-avatar"
-          }
-        ) : void 0,
-        control: getControl(callToAction2),
-        prompt: getInlineAlert(inlineAlert),
-        additionalInfo: getAdditionalInfo(additionalInfo)
-      },
-      label
-    ))
-  ] })
-};
-var getControl = (callToAction) => {
-  if (!callToAction) {
-    return void 0;
-  }
-  const { accessibilityDescription, href, title, onClick } = callToAction;
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_components51.ListItem.Button, { href, partiallyInteractive: true, "aria-description": accessibilityDescription, children: title });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    import_components51.ListItem.Button,
-    {
-      onClick,
-      partiallyInteractive: true,
-      "aria-description": accessibilityDescription,
-      children: title
-    }
-  );
-};
-var NewReviewRenderer_default = ReviewRenderer2;
-
 // ../renderers/src/getWiseRenderers.ts
-var internalRenderers = [NewDecisionRenderer_default, NewListRenderer_default, NewReviewRenderer_default];
-var getWiseRenderers = (internal = false) => [
-  ...internal ? internalRenderers : [],
+var getWiseRenderers = () => [
   AddressValidationButtonRenderer_default,
   AlertRenderer_default,
   CheckboxInputRenderer_default,
@@ -3823,12 +3650,12 @@ var messages_default = (0, import_react_intl18.defineMessages)({
 });
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var wiseRenderers = getWiseRenderers(true);
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
@@ -3865,7 +3692,7 @@ function DynamicFlowRevamp(props) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
 var DynamicForm = (0, import_react15.forwardRef)(function DynamicForm2(props, ref) {
   const {
@@ -3902,7 +3729,7 @@ var DynamicForm = (0, import_react15.forwardRef)(function DynamicForm2(props, re
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl19.useIntl)();

package/build/main.mjs

@@ -806,7 +806,7 @@ var loading_button_messages_default = defineMessages({
 });
 
 // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AddressValidationButtonRenderer = {
   canRenderType: "button",
@@ -816,29 +816,30 @@ var AddressValidationButtonRenderer = {
 function AddressValidationButtonComponent(props) {
   const { disabled, margin, title, stepLoadingState, onClick } = props;
   const { formatMessage } = useIntl();
-  const [isActive, setActive] = useState(false);
-  const isLoading = isActive && stepLoadingState !== "idle";
+  const [spinny, setSpinny] = useState(false);
+  useEffect(() => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  }, [stepLoadingState]);
   return /* @__PURE__ */ jsxs("div", { className: `d-flex flex-column ${getMargin(margin)}`, children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         v2: true,
         block: true,
-        disabled: isLoading || disabled,
+        disabled: stepLoadingState !== "idle" || disabled,
         priority: "primary",
         size: "md",
-        loading: isLoading,
-        onBlur: () => {
-          setActive(false);
-        },
+        loading: spinny,
         onClick: () => {
-          setActive(true);
+          setSpinny(true);
           onClick();
         },
         children: title
       }
     ),
-    isLoading && /* @__PURE__ */ jsx(InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
+    spinny && /* @__PURE__ */ jsx(InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
   ] });
 }
 var AddressValidationButtonRenderer_default = AddressValidationButtonRenderer;
@@ -895,7 +896,7 @@ var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
 import { Button as Button2 } from "@transferwise/components";
-import { useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ButtonRenderer = {
   canRenderType: "button",
@@ -903,8 +904,12 @@ var ButtonRenderer = {
 };
 function ButtonComponent(props) {
   const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
-  const [isActive, setActive] = useState2(false);
-  const isLoading = isActive && stepLoadingState !== "idle";
+  const [spinny, setSpinny] = useState2(false);
+  useEffect2(() => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  }, [stepLoadingState]);
   const priority = mapControl(control);
   const type = priority === "tertiary" ? void 0 : mapContext(context);
   return /* @__PURE__ */ jsx4(
@@ -912,16 +917,13 @@ function ButtonComponent(props) {
     {
       block: true,
       className: getMargin(margin),
-      disabled: isLoading ? false : disabled,
+      disabled: stepLoadingState !== "idle" || disabled,
       priority,
       size: mapSize(size),
-      loading: isLoading,
+      loading: spinny,
       type,
-      onBlur: () => {
-        setActive(false);
-      },
       onClick: () => {
-        setActive(true);
+        setSpinny(true);
         onClick();
       },
       children: title
@@ -1524,7 +1526,7 @@ var external_confirmation_messages_default = defineMessages3({
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl3 } from "react-intl";
-import { useEffect } from "react";
+import { useEffect as useEffect3 } from "react";
 import { Fragment, jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -1538,7 +1540,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = useIntl3();
-  useEffect(() => {
+  useEffect3(() => {
     if (url) {
       const w = window.open(url, "_blank");
       if (w) {
@@ -1659,7 +1661,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1679,7 +1681,7 @@ function UrlImage({
   httpClient
 }) {
   const [imageSource, setImageSource] = useState3("");
-  useEffect2(() => {
+  useEffect4(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -2891,7 +2893,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { Fragment as Fragment6, jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -2906,7 +2908,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect3(() => {
+  useEffect5(() => {
     if (!isValidIndex(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3019,7 +3021,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -3034,7 +3036,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3139,12 +3141,12 @@ var mapStatus = (status) => {
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect5, useMemo } from "react";
+import { useEffect as useEffect7, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const previousThemeHookValue = useTheme();
   const previousTheme = useMemo(() => previousThemeHookValue.theme, []);
-  useEffect5(() => {
+  useEffect7(() => {
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });
@@ -3524,183 +3526,8 @@ var LargeUploadRenderer = {
   }
 };
 
-// ../renderers/src/NewListItem/NewDecisionRenderer.tsx
-import { Header as Header9, ListItem as ListItem2 } from "@transferwise/components";
-
-// ../renderers/src/NewListItem/getInlineAlert.tsx
-import { ListItem } from "@transferwise/components";
-import { jsx as jsx67 } from "react/jsx-runtime";
-var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ jsx67(ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
-
-// ../renderers/src/NewListItem/NewDecisionRenderer.tsx
-import { jsx as jsx68, jsxs as jsxs27 } from "react/jsx-runtime";
-var DecisionRenderer2 = {
-  canRenderType: "decision",
-  render: ({ control, margin, options, title }) => /* @__PURE__ */ jsxs27("div", { className: getMargin(margin), children: [
-    title && /* @__PURE__ */ jsx68(Header9, { as: "h2", title }),
-    options.map((option) => {
-      const {
-        description,
-        disabled,
-        media,
-        title: itemTitle,
-        tag,
-        href,
-        additionalText,
-        inlineAlert,
-        supportingValues,
-        onClick
-      } = option;
-      return /* @__PURE__ */ jsx68(
-        ListItem2,
-        {
-          title: itemTitle,
-          subtitle: description,
-          spotlight: control === "spotlight" ? tag === "spotlight-active" ? "active" : "inactive" : void 0,
-          disabled,
-          valueTitle: supportingValues == null ? void 0 : supportingValues.value,
-          valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-          media: media ? /* @__PURE__ */ jsx68(
-            OptionMedia,
-            {
-              media,
-              preferAvatar: control === "with-avatar" || tag === "with-avatar"
-            }
-          ) : void 0,
-          prompt: getInlineAlert(inlineAlert),
-          additionalInfo: additionalText ? /* @__PURE__ */ jsx68(ListItem2.AdditionalInfo, { children: additionalText }) : void 0,
-          control: href ? /* @__PURE__ */ jsx68(ListItem2.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ jsx68(ListItem2.Navigation, { onClick })
-        },
-        JSON.stringify(option)
-      );
-    })
-  ] })
-};
-var NewDecisionRenderer_default = DecisionRenderer2;
-
-// ../renderers/src/NewListItem/NewListRenderer.tsx
-import { Header as Header10, ListItem as ListItem4 } from "@transferwise/components";
-
-// ../renderers/src/NewListItem/getAdditionalInfo.tsx
-import { ListItem as ListItem3 } from "@transferwise/components";
-import { jsx as jsx69 } from "react/jsx-runtime";
-var getAdditionalInfo = (additionalInfo) => {
-  var _a;
-  return additionalInfo ? (
-    // TODO: this type should have an href so we can render anchors
-    additionalInfo.onClick ? /* @__PURE__ */ jsx69(
-      ListItem3.AdditionalInfo,
-      {
-        action: {
-          onClick: additionalInfo.onClick,
-          label: (_a = additionalInfo.text) != null ? _a : ""
-        }
-      }
-    ) : /* @__PURE__ */ jsx69(ListItem3.AdditionalInfo, { children: additionalInfo == null ? void 0 : additionalInfo.text })
-  ) : void 0;
-};
-
-// ../renderers/src/NewListItem/NewListRenderer.tsx
-import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
-var ListRenderer2 = {
-  canRenderType: "list",
-  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ jsxs28("div", { className: getMargin(margin), children: [
-    (title || callToAction) && /* @__PURE__ */ jsx70(Header10, { as: "h2", title: title != null ? title : "", action: getListAction2(callToAction) }),
-    items.map(
-      ({
-        title: itemTitle,
-        description,
-        supportingValues,
-        media,
-        tag,
-        additionalInfo,
-        inlineAlert
-      }) => /* @__PURE__ */ jsx70(
-        ListItem4,
-        {
-          title: itemTitle,
-          subtitle: description,
-          valueTitle: supportingValues == null ? void 0 : supportingValues.value,
-          valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-          media: media ? /* @__PURE__ */ jsx70(
-            OptionMedia,
-            {
-              media,
-              preferAvatar: control === "with-avatar" || tag === "with-avatar"
-            }
-          ) : void 0,
-          prompt: getInlineAlert(inlineAlert),
-          additionalInfo: getAdditionalInfo(additionalInfo)
-        },
-        itemTitle
-      )
-    )
-  ] })
-};
-var getListAction2 = (callToAction) => {
-  if (callToAction) {
-    return __spreadValues({
-      "aria-label": callToAction.accessibilityDescription,
-      text: callToAction.title,
-      onClick: callToAction.onClick
-    }, callToAction.type === "link" ? { href: callToAction.href, target: "_blank" } : {});
-  }
-  return void 0;
-};
-var NewListRenderer_default = ListRenderer2;
-
-// ../renderers/src/NewListItem/NewReviewRenderer.tsx
-import { Header as Header11, ListItem as ListItem5 } from "@transferwise/components";
-import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
-var ReviewRenderer2 = {
-  canRenderType: "review",
-  render: ({ callToAction, control, margin, fields, title }) => /* @__PURE__ */ jsxs29("div", { className: getMargin(margin), children: [
-    (title || callToAction) && /* @__PURE__ */ jsx71(Header11, { as: "h2", title: title != null ? title : "", action: getHeaderAction(callToAction) }),
-    fields.map(({ label, value, media, tag, additionalInfo, inlineAlert, callToAction: callToAction2 }) => /* @__PURE__ */ jsx71(
-      ListItem5,
-      {
-        title: value,
-        subtitle: label,
-        inverted: true,
-        media: media ? /* @__PURE__ */ jsx71(
-          OptionMedia,
-          {
-            media,
-            preferAvatar: control === "with-avatar" || tag === "with-avatar"
-          }
-        ) : void 0,
-        control: getControl(callToAction2),
-        prompt: getInlineAlert(inlineAlert),
-        additionalInfo: getAdditionalInfo(additionalInfo)
-      },
-      label
-    ))
-  ] })
-};
-var getControl = (callToAction) => {
-  if (!callToAction) {
-    return void 0;
-  }
-  const { accessibilityDescription, href, title, onClick } = callToAction;
-  if (href) {
-    return /* @__PURE__ */ jsx71(ListItem5.Button, { href, partiallyInteractive: true, "aria-description": accessibilityDescription, children: title });
-  }
-  return /* @__PURE__ */ jsx71(
-    ListItem5.Button,
-    {
-      onClick,
-      partiallyInteractive: true,
-      "aria-description": accessibilityDescription,
-      children: title
-    }
-  );
-};
-var NewReviewRenderer_default = ReviewRenderer2;
-
 // ../renderers/src/getWiseRenderers.ts
-var internalRenderers = [NewDecisionRenderer_default, NewListRenderer_default, NewReviewRenderer_default];
-var getWiseRenderers = (internal = false) => [
-  ...internal ? internalRenderers : [],
+var getWiseRenderers = () => [
   AddressValidationButtonRenderer_default,
   AlertRenderer_default,
   CheckboxInputRenderer_default,
@@ -3799,12 +3626,12 @@ var messages_default = defineMessages9({
 });
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
-var wiseRenderers = getWiseRenderers(true);
+import { jsx as jsx67 } from "react/jsx-runtime";
+var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx72(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ jsx67(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
@@ -3841,7 +3668,7 @@ function DynamicFlowRevamp(props) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ jsx72("div", { className, children: /* @__PURE__ */ jsx72(DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ jsx67("div", { className, children: /* @__PURE__ */ jsx67(DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
 var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
   const {
@@ -3878,7 +3705,7 @@ var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ jsx72("div", { className, children: /* @__PURE__ */ jsx72(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+  return /* @__PURE__ */ jsx67("div", { className, children: /* @__PURE__ */ jsx67(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = useIntl10();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.21.0-experimental-fae3d25",
+  "version": "4.21.0-experimental-a003e45",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -43,7 +43,7 @@
     "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "0.0.0-experimental-4ee52fa",
+    "@transferwise/components": "46.101.0",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/icons": "3.22.3",
     "@transferwise/neptune-css": "14.24.5",
@@ -76,7 +76,7 @@
     "typescript": "5.9.2",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.10.0-experimental-fae3d25"
+    "@wise/dynamic-flow-types": "3.10.0-experimental-a003e45"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.12.0-experimental-fae3d25",
-    "@wise/dynamic-flow-types": "3.10.0-experimental-fae3d25"
+    "@wise/dynamic-flow-client": "4.12.0-experimental-a003e45",
+    "@wise/dynamic-flow-types": "3.10.0-experimental-a003e45"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",