@wise/dynamic-flow-client-internal 4.32.2 → 4.33.0

package/build/main.js

@@ -369,7 +369,7 @@ var import_art = require("@wise/art");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var countryUrnPrefix = "urn:wise:countries:";
 var currencyUrnPrefix = "urn:wise:currencies:";
-var isUrnFlag = (uri) => uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix);
+var isUrnFlag = (uri) => (uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix)) && uri.endsWith(":image");
 function UrnFlag({ size, urn }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_art.Flag, { code: getCode(urn), intrinsicSize: size });
 }
@@ -931,7 +931,7 @@ var import_react3 = require("react");
 
 // ../renderers/src/DecisionRenderer/filter-and-sort-decision-options.ts
 function filterAndSortDecisionOptions(selectOptions, query) {
-  const upperQuery = query.toUpperCase().trim();
+  const upperQuery = normalizeAndRemoveAccents(query);
   const filteredItems = selectOptions.filter((option) => {
     var _a, _b, _c, _d;
     const searchableWords = [
@@ -942,7 +942,9 @@ function filterAndSortDecisionOptions(selectOptions, query) {
       (_b = option.supportingValues) == null ? void 0 : _b.subvalue,
       ...(_c = option.keywords) != null ? _c : []
     ];
-    return (_d = searchableWords.some((word) => word == null ? void 0 : word.toUpperCase().includes(upperQuery))) != null ? _d : false;
+    return (_d = searchableWords.some(
+      (word) => word && normalizeAndRemoveAccents(word).includes(upperQuery)
+    )) != null ? _d : false;
   });
   return [...filteredItems].sort((a, b) => {
     const aTitleUpper = a.title.toUpperCase();
@@ -966,6 +968,7 @@ function filterAndSortDecisionOptions(selectOptions, query) {
     return a.title.localeCompare(b.title);
   });
 }
+var normalizeAndRemoveAccents = (text) => text.trim().toLowerCase().normalize("NFKD").replace(new RegExp("\\p{Diacritic}", "gu"), "");
 
 // ../renderers/src/DecisionRenderer/DecisionList.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -3280,6 +3283,12 @@ var getAdditionalInfo = (additionalInfo) => {
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_components53.ListItem.AdditionalInfo, { children: additionalInfo == null ? void 0 : additionalInfo.text });
 };
 
+// ../renderers/src/NewListItem/shouldUseAvatar.ts
+var shouldUseAvatar = (control, tags) => {
+  var _a;
+  return control === "with-avatar" || ((_a = tags == null ? void 0 : tags.includes("with-avatar")) != null ? _a : false);
+};
+
 // ../renderers/src/NewListItem/NewDecisionRenderer.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var DecisionRenderer2 = {
@@ -3293,11 +3302,11 @@ var renderDecisionList2 = ({ options, control }) => {
       disabled,
       media,
       title: itemTitle,
-      tag,
       href,
       additionalText,
       inlineAlert,
       supportingValues,
+      tags,
       onClick
     } = option;
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
@@ -3305,11 +3314,11 @@ var renderDecisionList2 = ({ options, control }) => {
       {
         title: itemTitle,
         subtitle: description,
-        spotlight: control === "spotlight" ? tag === "spotlight-active" ? "active" : "inactive" : void 0,
+        spotlight: control === "spotlight" ? (tags == null ? void 0 : tags.includes("spotlight-active")) ? "active" : "inactive" : void 0,
         disabled,
         valueTitle: supportingValues == null ? void 0 : supportingValues.value,
         valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-        media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+        media: getMedia(media, shouldUseAvatar(control, tags)),
         prompt: getInlineAlert(inlineAlert),
         additionalInfo: additionalText ? getAdditionalInfo({ text: additionalText }) : void 0,
         control: href ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components54.ListItem.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components54.ListItem.Navigation, { onClick })
@@ -3321,32 +3330,69 @@ var renderDecisionList2 = ({ options, control }) => {
 var NewDecisionRenderer_default = DecisionRenderer2;
 
 // ../renderers/src/NewListItem/NewListRenderer.tsx
+var import_components56 = require("@transferwise/components");
+
+// ../renderers/src/NewListItem/getCTAControl.tsx
 var import_components55 = require("@transferwise/components");
 var import_jsx_runtime78 = require("react/jsx-runtime");
+var getCTAControl = (callToAction, tags) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, href, title, onClick } = callToAction;
+  const priority = (tags == null ? void 0 : tags.includes("cta-secondary")) ? "secondary" : "secondary-neutral";
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      import_components55.ListItem.Button,
+      {
+        href,
+        partiallyInteractive: true,
+        priority,
+        "aria-description": accessibilityDescription,
+        children: title
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    import_components55.ListItem.Button,
+    {
+      "aria-description": accessibilityDescription,
+      partiallyInteractive: true,
+      priority,
+      onClick,
+      children: title
+    }
+  );
+};
+
+// ../renderers/src/NewListItem/NewListRenderer.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var ListRenderer2 = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Header7, { title, callToAction }),
+  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Header7, { title, callToAction }),
     items.map((item) => {
       const {
         title: itemTitle,
         description,
         supportingValues,
         media,
-        tag,
         additionalInfo,
-        inlineAlert
+        inlineAlert,
+        callToAction: itemCallToAction,
+        tags
       } = item;
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-        import_components55.ListItem,
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        import_components56.ListItem,
         {
           title: itemTitle,
           subtitle: description,
           valueTitle: supportingValues == null ? void 0 : supportingValues.value,
           valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-          media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+          media: getMedia(media, shouldUseAvatar(control, tags)),
           prompt: getInlineAlert(inlineAlert),
-          additionalInfo: getAdditionalInfo(additionalInfo)
+          additionalInfo: getAdditionalInfo(additionalInfo),
+          control: getCTAControl(itemCallToAction, tags)
         },
         itemTitle
       );
@@ -3356,9 +3402,9 @@ var ListRenderer2 = {
 var NewListRenderer_default = ListRenderer2;
 
 // ../renderers/src/NewListItem/NewReviewRenderer.tsx
-var import_components56 = require("@transferwise/components");
+var import_components57 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var IGNORED_CONTROLS = [
   "horizontal",
   "horizontal-end-aligned",
@@ -3368,28 +3414,28 @@ var IGNORED_CONTROLS = [
 var ReviewRenderer2 = {
   canRenderType: "review",
   canRender: ({ control }) => control ? !IGNORED_CONTROLS.includes(control) : true,
-  render: ({ callToAction, control, margin, fields, title }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Header7, { title, callToAction }),
+  render: ({ callToAction, control, margin, fields, title }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Header7, { title, callToAction }),
     fields.map((field) => {
       var _a;
       const {
         label,
         value,
         media,
-        tag,
         additionalInfo,
         inlineAlert,
         help,
-        callToAction: itemCallToAction
+        callToAction: itemCallToAction,
+        tags
       } = field;
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-        import_components56.ListItem,
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        import_components57.ListItem,
         {
           title: value,
           subtitle: label,
           inverted: true,
-          media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
-          control: (_a = getCTAControl(itemCallToAction)) != null ? _a : getHelpControl(help),
+          media: getMedia(media, shouldUseAvatar(control, tags)),
+          control: (_a = getCTAControl(itemCallToAction, tags)) != null ? _a : getHelpControl(help),
           prompt: getInlineAlert(inlineAlert),
           additionalInfo: getAdditionalInfo(additionalInfo)
         },
@@ -3398,49 +3444,31 @@ var ReviewRenderer2 = {
     })
   ] })
 };
-var getCTAControl = (callToAction) => {
-  if (!callToAction) {
-    return void 0;
-  }
-  const { accessibilityDescription, href, title, onClick } = callToAction;
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components56.ListItem.Button, { href, partiallyInteractive: true, "aria-description": accessibilityDescription, children: title });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-    import_components56.ListItem.Button,
-    {
-      "aria-description": accessibilityDescription,
-      partiallyInteractive: true,
-      onClick,
-      children: title
-    }
-  );
-};
 var getHelpControl = (help) => {
   if (!help) {
     return void 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components56.Popover, { content: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components56.Markdown, { config: { link: { target: "_blank" } }, children: help }), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components56.ListItem.IconButton, { partiallyInteractive: true, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_icons4.QuestionMarkCircle, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components57.Popover, { content: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components57.Markdown, { config: { link: { target: "_blank" } }, children: help }), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components57.ListItem.IconButton, { partiallyInteractive: true, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_icons4.QuestionMarkCircle, {}) }) });
 };
 var NewReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/NewListItem/NewStatusListRenderer.tsx
-var import_components57 = require("@transferwise/components");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_components58 = require("@transferwise/components");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var NewStatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components57.Header, { title }) : null,
+  render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getMargin(margin), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components58.Header, { title }) : null,
     items.map((item) => {
       const { callToAction, description, icon, status, title: itemTitle } = item;
-      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-        import_components57.ListItem,
+      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        import_components58.ListItem,
         {
           title: itemTitle,
           subtitle: description,
-          media: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components57.AvatarView, { badge: { status: mapStatus2(status) }, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DynamicIcon_default, { name: icon.name }) }) : void 0,
-          additionalInfo: callToAction ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-            import_components57.ListItem.AdditionalInfo,
+          media: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components58.AvatarView, { badge: { status: mapStatus2(status) }, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DynamicIcon_default, { name: icon.name }) }) : void 0,
+          additionalInfo: callToAction ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            import_components58.ListItem.AdditionalInfo,
             {
               action: {
                 href: callToAction.href,
@@ -3469,7 +3497,7 @@ var mapStatus2 = (status) => {
 var NewStatusListRenderer_default = NewStatusListRenderer;
 
 // ../renderers/src/ButtonRenderer/ButtonRendererV2.tsx
-var import_components58 = require("@transferwise/components");
+var import_components59 = require("@transferwise/components");
 
 // ../renderers/src/utils/isButtonPriority.ts
 var validPriorities = ["primary", "secondary", "secondary-neutral", "tertiary"];
@@ -3477,7 +3505,7 @@ var isButtonPriority = (control) => validPriorities.includes(control);
 
 // ../renderers/src/ButtonRenderer/ButtonRendererV2.tsx
 var import_react19 = require("react");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var ButtonRendererV2 = {
   canRenderType: "button",
   render: ButtonComponent2
@@ -3491,8 +3519,8 @@ function ButtonComponent2(props) {
     }
   }, [stepLoadingState]);
   const loading = spinny && stepLoadingState !== "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-    import_components58.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    import_components59.Button,
     {
       v2: true,
       block: true,
@@ -3514,17 +3542,17 @@ var getSentiment2 = (context) => context === "negative" ? "negative" : "default"
 var getPriority3 = (control) => control && isButtonPriority(control) ? control : "secondary";
 
 // ../renderers/src/ProgressRenderer.tsx
-var import_components59 = require("@transferwise/components");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_components60 = require("@transferwise/components");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var ProgressRenderer = {
   canRenderType: "progress",
   render: ({ uid, title, help, progress, progressText, margin, description }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      import_components59.ProgressBar,
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      import_components60.ProgressBar,
       {
         id: uid,
         className: getMargin(margin),
-        title: title && help ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(LabelContentWithHelp, { text: title, help }) : title,
+        title: title && help ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(LabelContentWithHelp, { text: title, help }) : title,
         description,
         progress: {
           max: 1,
@@ -4445,7 +4473,7 @@ var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.32.2" : "0.0.0"
+  typeof process !== "undefined" ? "4.33.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -4500,12 +4528,12 @@ var messages_default = (0, import_react_intl21.defineMessages)({
 });
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = 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_runtime83.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
@@ -4542,7 +4570,7 @@ function DynamicFlowRevamp(props) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
 var DynamicForm = (0, import_react20.forwardRef)(function DynamicForm2(props, ref) {
   const {
@@ -4579,7 +4607,7 @@ var DynamicForm = (0, import_react20.forwardRef)(function DynamicForm2(props, re
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl22.useIntl)();

package/build/main.mjs

@@ -326,7 +326,7 @@ import { Flag } from "@wise/art";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var countryUrnPrefix = "urn:wise:countries:";
 var currencyUrnPrefix = "urn:wise:currencies:";
-var isUrnFlag = (uri) => uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix);
+var isUrnFlag = (uri) => (uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix)) && uri.endsWith(":image");
 function UrnFlag({ size, urn }) {
   return /* @__PURE__ */ jsx8(Flag, { code: getCode(urn), intrinsicSize: size });
 }
@@ -888,7 +888,7 @@ import { useState as useState3 } from "react";
 
 // ../renderers/src/DecisionRenderer/filter-and-sort-decision-options.ts
 function filterAndSortDecisionOptions(selectOptions, query) {
-  const upperQuery = query.toUpperCase().trim();
+  const upperQuery = normalizeAndRemoveAccents(query);
   const filteredItems = selectOptions.filter((option) => {
     var _a, _b, _c, _d;
     const searchableWords = [
@@ -899,7 +899,9 @@ function filterAndSortDecisionOptions(selectOptions, query) {
       (_b = option.supportingValues) == null ? void 0 : _b.subvalue,
       ...(_c = option.keywords) != null ? _c : []
     ];
-    return (_d = searchableWords.some((word) => word == null ? void 0 : word.toUpperCase().includes(upperQuery))) != null ? _d : false;
+    return (_d = searchableWords.some(
+      (word) => word && normalizeAndRemoveAccents(word).includes(upperQuery)
+    )) != null ? _d : false;
   });
   return [...filteredItems].sort((a, b) => {
     const aTitleUpper = a.title.toUpperCase();
@@ -923,6 +925,7 @@ function filterAndSortDecisionOptions(selectOptions, query) {
     return a.title.localeCompare(b.title);
   });
 }
+var normalizeAndRemoveAccents = (text) => text.trim().toLowerCase().normalize("NFKD").replace(new RegExp("\\p{Diacritic}", "gu"), "");
 
 // ../renderers/src/DecisionRenderer/DecisionList.tsx
 import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -3246,6 +3249,12 @@ var getAdditionalInfo = (additionalInfo) => {
   return /* @__PURE__ */ jsx76(ListItem3.AdditionalInfo, { children: additionalInfo == null ? void 0 : additionalInfo.text });
 };
 
+// ../renderers/src/NewListItem/shouldUseAvatar.ts
+var shouldUseAvatar = (control, tags) => {
+  var _a;
+  return control === "with-avatar" || ((_a = tags == null ? void 0 : tags.includes("with-avatar")) != null ? _a : false);
+};
+
 // ../renderers/src/NewListItem/NewDecisionRenderer.tsx
 import { Fragment as Fragment10, jsx as jsx77 } from "react/jsx-runtime";
 var DecisionRenderer2 = {
@@ -3259,11 +3268,11 @@ var renderDecisionList2 = ({ options, control }) => {
       disabled,
       media,
       title: itemTitle,
-      tag,
       href,
       additionalText,
       inlineAlert,
       supportingValues,
+      tags,
       onClick
     } = option;
     return /* @__PURE__ */ jsx77(
@@ -3271,11 +3280,11 @@ var renderDecisionList2 = ({ options, control }) => {
       {
         title: itemTitle,
         subtitle: description,
-        spotlight: control === "spotlight" ? tag === "spotlight-active" ? "active" : "inactive" : void 0,
+        spotlight: control === "spotlight" ? (tags == null ? void 0 : tags.includes("spotlight-active")) ? "active" : "inactive" : void 0,
         disabled,
         valueTitle: supportingValues == null ? void 0 : supportingValues.value,
         valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-        media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+        media: getMedia(media, shouldUseAvatar(control, tags)),
         prompt: getInlineAlert(inlineAlert),
         additionalInfo: additionalText ? getAdditionalInfo({ text: additionalText }) : void 0,
         control: href ? /* @__PURE__ */ jsx77(ListItem4.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ jsx77(ListItem4.Navigation, { onClick })
@@ -3287,32 +3296,69 @@ var renderDecisionList2 = ({ options, control }) => {
 var NewDecisionRenderer_default = DecisionRenderer2;
 
 // ../renderers/src/NewListItem/NewListRenderer.tsx
+import { ListItem as ListItem6 } from "@transferwise/components";
+
+// ../renderers/src/NewListItem/getCTAControl.tsx
 import { ListItem as ListItem5 } from "@transferwise/components";
-import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var getCTAControl = (callToAction, tags) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, href, title, onClick } = callToAction;
+  const priority = (tags == null ? void 0 : tags.includes("cta-secondary")) ? "secondary" : "secondary-neutral";
+  if (href) {
+    return /* @__PURE__ */ jsx78(
+      ListItem5.Button,
+      {
+        href,
+        partiallyInteractive: true,
+        priority,
+        "aria-description": accessibilityDescription,
+        children: title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx78(
+    ListItem5.Button,
+    {
+      "aria-description": accessibilityDescription,
+      partiallyInteractive: true,
+      priority,
+      onClick,
+      children: title
+    }
+  );
+};
+
+// ../renderers/src/NewListItem/NewListRenderer.tsx
+import { jsx as jsx79, jsxs as jsxs30 } from "react/jsx-runtime";
 var ListRenderer2 = {
   canRenderType: "list",
   render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ jsxs30("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx78(Header7, { title, callToAction }),
+    /* @__PURE__ */ jsx79(Header7, { title, callToAction }),
     items.map((item) => {
       const {
         title: itemTitle,
         description,
         supportingValues,
         media,
-        tag,
         additionalInfo,
-        inlineAlert
+        inlineAlert,
+        callToAction: itemCallToAction,
+        tags
       } = item;
-      return /* @__PURE__ */ jsx78(
-        ListItem5,
+      return /* @__PURE__ */ jsx79(
+        ListItem6,
         {
           title: itemTitle,
           subtitle: description,
           valueTitle: supportingValues == null ? void 0 : supportingValues.value,
           valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-          media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+          media: getMedia(media, shouldUseAvatar(control, tags)),
           prompt: getInlineAlert(inlineAlert),
-          additionalInfo: getAdditionalInfo(additionalInfo)
+          additionalInfo: getAdditionalInfo(additionalInfo),
+          control: getCTAControl(itemCallToAction, tags)
         },
         itemTitle
       );
@@ -3322,9 +3368,9 @@ var ListRenderer2 = {
 var NewListRenderer_default = ListRenderer2;
 
 // ../renderers/src/NewListItem/NewReviewRenderer.tsx
-import { ListItem as ListItem6, Markdown as Markdown6, Popover } from "@transferwise/components";
+import { ListItem as ListItem7, Markdown as Markdown6, Popover } from "@transferwise/components";
 import { QuestionMarkCircle } from "@transferwise/icons";
-import { jsx as jsx79, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs31 } from "react/jsx-runtime";
 var IGNORED_CONTROLS = [
   "horizontal",
   "horizontal-end-aligned",
@@ -3335,27 +3381,27 @@ var ReviewRenderer2 = {
   canRenderType: "review",
   canRender: ({ control }) => control ? !IGNORED_CONTROLS.includes(control) : true,
   render: ({ callToAction, control, margin, fields, title }) => /* @__PURE__ */ jsxs31("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx79(Header7, { title, callToAction }),
+    /* @__PURE__ */ jsx80(Header7, { title, callToAction }),
     fields.map((field) => {
       var _a;
       const {
         label,
         value,
         media,
-        tag,
         additionalInfo,
         inlineAlert,
         help,
-        callToAction: itemCallToAction
+        callToAction: itemCallToAction,
+        tags
       } = field;
-      return /* @__PURE__ */ jsx79(
-        ListItem6,
+      return /* @__PURE__ */ jsx80(
+        ListItem7,
         {
           title: value,
           subtitle: label,
           inverted: true,
-          media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
-          control: (_a = getCTAControl(itemCallToAction)) != null ? _a : getHelpControl(help),
+          media: getMedia(media, shouldUseAvatar(control, tags)),
+          control: (_a = getCTAControl(itemCallToAction, tags)) != null ? _a : getHelpControl(help),
           prompt: getInlineAlert(inlineAlert),
           additionalInfo: getAdditionalInfo(additionalInfo)
         },
@@ -3364,49 +3410,31 @@ var ReviewRenderer2 = {
     })
   ] })
 };
-var getCTAControl = (callToAction) => {
-  if (!callToAction) {
-    return void 0;
-  }
-  const { accessibilityDescription, href, title, onClick } = callToAction;
-  if (href) {
-    return /* @__PURE__ */ jsx79(ListItem6.Button, { href, partiallyInteractive: true, "aria-description": accessibilityDescription, children: title });
-  }
-  return /* @__PURE__ */ jsx79(
-    ListItem6.Button,
-    {
-      "aria-description": accessibilityDescription,
-      partiallyInteractive: true,
-      onClick,
-      children: title
-    }
-  );
-};
 var getHelpControl = (help) => {
   if (!help) {
     return void 0;
   }
-  return /* @__PURE__ */ jsx79(Popover, { content: /* @__PURE__ */ jsx79(Markdown6, { config: { link: { target: "_blank" } }, children: help }), children: /* @__PURE__ */ jsx79(ListItem6.IconButton, { partiallyInteractive: true, children: /* @__PURE__ */ jsx79(QuestionMarkCircle, {}) }) });
+  return /* @__PURE__ */ jsx80(Popover, { content: /* @__PURE__ */ jsx80(Markdown6, { config: { link: { target: "_blank" } }, children: help }), children: /* @__PURE__ */ jsx80(ListItem7.IconButton, { partiallyInteractive: true, children: /* @__PURE__ */ jsx80(QuestionMarkCircle, {}) }) });
 };
 var NewReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/NewListItem/NewStatusListRenderer.tsx
-import { AvatarView as AvatarView4, Header as Header10, ListItem as ListItem7 } from "@transferwise/components";
-import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
+import { AvatarView as AvatarView4, Header as Header10, ListItem as ListItem8 } from "@transferwise/components";
+import { jsx as jsx81, jsxs as jsxs32 } from "react/jsx-runtime";
 var NewStatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ jsxs32("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ jsx80(Header10, { title }) : null,
+    title ? /* @__PURE__ */ jsx81(Header10, { title }) : null,
     items.map((item) => {
       const { callToAction, description, icon, status, title: itemTitle } = item;
-      return /* @__PURE__ */ jsx80(
-        ListItem7,
+      return /* @__PURE__ */ jsx81(
+        ListItem8,
         {
           title: itemTitle,
           subtitle: description,
-          media: icon && "name" in icon ? /* @__PURE__ */ jsx80(AvatarView4, { badge: { status: mapStatus2(status) }, children: /* @__PURE__ */ jsx80(DynamicIcon_default, { name: icon.name }) }) : void 0,
-          additionalInfo: callToAction ? /* @__PURE__ */ jsx80(
-            ListItem7.AdditionalInfo,
+          media: icon && "name" in icon ? /* @__PURE__ */ jsx81(AvatarView4, { badge: { status: mapStatus2(status) }, children: /* @__PURE__ */ jsx81(DynamicIcon_default, { name: icon.name }) }) : void 0,
+          additionalInfo: callToAction ? /* @__PURE__ */ jsx81(
+            ListItem8.AdditionalInfo,
             {
               action: {
                 href: callToAction.href,
@@ -3443,7 +3471,7 @@ var isButtonPriority = (control) => validPriorities.includes(control);
 
 // ../renderers/src/ButtonRenderer/ButtonRendererV2.tsx
 import { useEffect as useEffect9, useState as useState13 } from "react";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var ButtonRendererV2 = {
   canRenderType: "button",
   render: ButtonComponent2
@@ -3457,7 +3485,7 @@ function ButtonComponent2(props) {
     }
   }, [stepLoadingState]);
   const loading = spinny && stepLoadingState !== "idle";
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     Button8,
     {
       v2: true,
@@ -3481,16 +3509,16 @@ var getPriority3 = (control) => control && isButtonPriority(control) ? control :
 
 // ../renderers/src/ProgressRenderer.tsx
 import { ProgressBar } from "@transferwise/components";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var ProgressRenderer = {
   canRenderType: "progress",
   render: ({ uid, title, help, progress, progressText, margin, description }) => {
-    return /* @__PURE__ */ jsx82(
+    return /* @__PURE__ */ jsx83(
       ProgressBar,
       {
         id: uid,
         className: getMargin(margin),
-        title: title && help ? /* @__PURE__ */ jsx82(LabelContentWithHelp, { text: title, help }) : title,
+        title: title && help ? /* @__PURE__ */ jsx83(LabelContentWithHelp, { text: title, help }) : title,
         description,
         progress: {
           max: 1,
@@ -4415,7 +4443,7 @@ import {
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.32.2" : "0.0.0"
+  typeof process !== "undefined" ? "4.33.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -4470,12 +4498,12 @@ var messages_default = defineMessages10({
 });
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx83(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ jsx84(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
@@ -4512,7 +4540,7 @@ function DynamicFlowRevamp(props) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ jsx83("div", { className, children: /* @__PURE__ */ jsx83(DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ jsx84("div", { className, children: /* @__PURE__ */ jsx84(DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
 var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
   const {
@@ -4549,7 +4577,7 @@ var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ jsx83("div", { className, children: /* @__PURE__ */ jsx83(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+  return /* @__PURE__ */ jsx84("div", { className, children: /* @__PURE__ */ jsx84(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = useIntl12();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.32.2",
+  "version": "4.33.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -38,24 +38,24 @@
     "@babel/preset-typescript": "7.27.1",
     "@chromatic-com/storybook": "4.1.1",
     "@formatjs/cli": "^6.7.2",
-    "@storybook/react-vite": "9.1.7",
+    "@storybook/react-vite": "9.1.8",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.110.0",
+    "@transferwise/components": "46.111.0",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/icons": "3.22.4",
-    "@transferwise/neptune-css": "14.24.6",
+    "@transferwise/neptune-css": "14.25.0",
     "@types/jest": "30.0.0",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
-    "@wise/art": "2.24.5",
-    "@wise/components-theming": "^1.6.4",
+    "@wise/art": "2.24.6",
+    "@wise/components-theming": "^1.7.0",
     "babel-jest": "30.1.2",
     "currency-flags": "4.0.7",
     "esbuild": "0.25.9",
-    "eslint-plugin-storybook": "9.1.7",
+    "eslint-plugin-storybook": "9.1.8",
     "jest": "30.1.3",
     "jest-environment-jsdom": "30.1.2",
     "jest-fetch-mock": "^3.0.3",
@@ -67,16 +67,16 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^9.1.7",
+    "storybook": "^9.1.8",
     "stylelint": "16.24.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
-    "tsx": "4.20.5",
+    "tsx": "4.20.6",
     "typescript": "5.9.2",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.15.1"
+    "@wise/dynamic-flow-types": "3.16.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.18.5",
-    "@wise/dynamic-flow-types": "3.15.1"
+    "@wise/dynamic-flow-client": "4.19.0",
+    "@wise/dynamic-flow-types": "3.16.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",