@wise/dynamic-flow-client-internal 4.25.0-experimental-cd1bec2 → 4.25.0-experimental-91c6dca

package/build/main.js

@@ -65,6 +65,7 @@ __export(index_exports, {
   Header: () => Header11,
   JsonSchemaForm: () => import_dynamic_flow_client4.JsonSchemaForm,
   findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
+  getListItemRenderers: () => getListItemRenderers2,
   getMargin: () => getMargin2,
   isValidSchema: () => import_dynamic_flow_client4.isValidSchema,
   makeCustomFetch: () => import_dynamic_flow_client3.makeHttpClient,
@@ -841,7 +842,7 @@ var OPTION_GROUPS = {
   recent: "recent"
 };
 var GroupedList = (_a) => {
-  var _b = _a, { renderDecisionList: renderDecisionList2 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
+  var _b = _a, { renderDecisionList: renderDecisionList3 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
   const { formatMessage } = (0, import_react_intl6.useIntl)();
   const { options } = rest;
   const popularOptions = options.filter((option) => option.tag === OPTION_GROUPS.popular);
@@ -849,15 +850,15 @@ var GroupedList = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     popularOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_components12.Section, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components12.Header, { as: "h2", title: formatMessage(decision_messages_default.popular) }),
-      renderDecisionList2(__spreadProps(__spreadValues({}, rest), { options: popularOptions }))
+      renderDecisionList3(__spreadProps(__spreadValues({}, rest), { options: popularOptions }))
     ] }) : null,
     recentOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_components12.Section, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components12.Header, { as: "h2", title: formatMessage(decision_messages_default.recent) }),
-      renderDecisionList2(__spreadProps(__spreadValues({}, rest), { options: recentOptions }))
+      renderDecisionList3(__spreadProps(__spreadValues({}, rest), { options: recentOptions }))
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_components12.Section, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components12.Header, { as: "h2", title: formatMessage(decision_messages_default.all) }),
-      renderDecisionList2(rest)
+      renderDecisionList3(rest)
     ] })
   ] });
 };
@@ -917,13 +918,13 @@ var DecisionWrapper = (props) => {
   ] });
 };
 var UnfilteredDecisionList = (_a) => {
-  var _b = _a, { renderDecisionList: renderDecisionList2 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
-  return isGroupedDecision(rest.options) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GroupedList, __spreadProps(__spreadValues({}, rest), { renderDecisionList: renderDecisionList2 })) : renderDecisionList2(rest);
+  var _b = _a, { renderDecisionList: renderDecisionList3 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
+  return isGroupedDecision(rest.options) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GroupedList, __spreadProps(__spreadValues({}, rest), { renderDecisionList: renderDecisionList3 })) : renderDecisionList3(rest);
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = (0, import_react_intl7.useIntl)();
   const [query, setQuery] = (0, import_react3.useState)("");
-  const { control, options, renderDecisionList: renderDecisionList2 } = props;
+  const { control, options, renderDecisionList: renderDecisionList3 } = props;
   const filteredOptions = filterAndSortDecisionOptions(options, query);
   const isGrouped = isGroupedDecision(options);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
@@ -940,7 +941,7 @@ var FilteredDecisionList = (props) => {
     ),
     isGrouped && query.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GroupedList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
       query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components13.Header, { as: "h2", title: formatMessage(decision_messages_default.results), className: "m-t-4" }),
-      filteredOptions.length > 0 ? renderDecisionList2({
+      filteredOptions.length > 0 ? renderDecisionList3({
         control,
         className: query.length === 0 ? "m-t-3" : "",
         options: filteredOptions
@@ -3152,31 +3153,231 @@ var import_components53 = require("@transferwise/components");
 // ../renderers/src/NewListItem/getInlineAlert.tsx
 var import_components51 = require("@transferwise/components");
 var import_jsx_runtime73 = require("react/jsx-runtime");
+var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_components51.ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
 
 // ../renderers/src/NewListItem/getMedia.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
+var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(OptionMedia, { media, preferAvatar }) : void 0;
 
 // ../renderers/src/NewListItem/getAdditionalInfo.tsx
 var import_components52 = require("@transferwise/components");
 var import_jsx_runtime75 = require("react/jsx-runtime");
+var getAdditionalInfo = (additionalInfo) => {
+  if (!additionalInfo) {
+    return void 0;
+  }
+  const { href, text, onClick } = additionalInfo;
+  if (href || onClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      import_components52.ListItem.AdditionalInfo,
+      {
+        action: {
+          label: text,
+          href,
+          onClick,
+          target: "_blank"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components52.ListItem.AdditionalInfo, { children: additionalInfo == null ? void 0 : additionalInfo.text });
+};
 
 // ../renderers/src/NewListItem/NewDecisionRenderer.tsx
 var import_jsx_runtime76 = require("react/jsx-runtime");
+var DecisionRenderer2 = {
+  canRenderType: "decision",
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList: renderDecisionList2 }))
+};
+var renderDecisionList2 = ({ options, control }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: options.map((option) => {
+    const {
+      description,
+      disabled,
+      media,
+      title: itemTitle,
+      tag,
+      href,
+      additionalText,
+      inlineAlert,
+      supportingValues,
+      onClick
+    } = option;
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      import_components53.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: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+        prompt: getInlineAlert(inlineAlert),
+        additionalInfo: additionalText ? getAdditionalInfo({ text: additionalText }) : void 0,
+        control: href ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_components53.ListItem.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_components53.ListItem.Navigation, { onClick })
+      },
+      JSON.stringify(option)
+    );
+  }) });
+};
+var NewDecisionRenderer_default = DecisionRenderer2;
 
 // ../renderers/src/NewListItem/NewListRenderer.tsx
 var import_components54 = require("@transferwise/components");
 var import_jsx_runtime77 = require("react/jsx-runtime");
+var ListRenderer2 = {
+  canRenderType: "list",
+  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Header7, { title, callToAction }),
+    items.map((item) => {
+      const {
+        title: itemTitle,
+        description,
+        supportingValues,
+        media,
+        tag,
+        additionalInfo,
+        inlineAlert
+      } = item;
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        import_components54.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"),
+          prompt: getInlineAlert(inlineAlert),
+          additionalInfo: getAdditionalInfo(additionalInfo)
+        },
+        itemTitle
+      );
+    })
+  ] })
+};
+var NewListRenderer_default = ListRenderer2;
 
 // ../renderers/src/NewListItem/NewReviewRenderer.tsx
 var import_components55 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
 var import_jsx_runtime78 = require("react/jsx-runtime");
+var IGNORED_CONTROLS = [
+  "horizontal",
+  "horizontal-end-aligned",
+  "horizontal-start-aligned",
+  "vertical-two-column"
+];
+var ReviewRenderer2 = {
+  canRenderType: "review",
+  canRender: ({ control }) => control ? !IGNORED_CONTROLS.includes(control) : true,
+  render: ({ callToAction, control, margin, fields, title }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Header7, { title, callToAction }),
+    fields.map((field) => {
+      var _a;
+      const {
+        label,
+        value,
+        media,
+        tag,
+        additionalInfo,
+        inlineAlert,
+        help,
+        callToAction: itemCallToAction
+      } = field;
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        import_components55.ListItem,
+        {
+          title: value,
+          subtitle: label,
+          inverted: true,
+          media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+          control: (_a = getCTAControl(itemCallToAction)) != null ? _a : getHelpControl(help),
+          prompt: getInlineAlert(inlineAlert),
+          additionalInfo: getAdditionalInfo(additionalInfo)
+        },
+        JSON.stringify(field)
+      );
+    })
+  ] })
+};
+var getCTAControl = (callToAction) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, href, title, onClick } = callToAction;
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components55.ListItem.Button, { href, partiallyInteractive: true, "aria-description": accessibilityDescription, children: title });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    import_components55.ListItem.Button,
+    {
+      "aria-description": accessibilityDescription,
+      partiallyInteractive: true,
+      onClick,
+      children: title
+    }
+  );
+};
+var getHelpControl = (help) => {
+  if (!help) {
+    return void 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components55.Popover, { content: help, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components55.ListItem.IconButton, { partiallyInteractive: true, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_icons4.QuestionMarkCircle, {}) }) });
+};
+var NewReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/NewListItem/NewStatusListRenderer.tsx
 var import_components56 = require("@transferwise/components");
 var import_jsx_runtime79 = require("react/jsx-runtime");
+var NewStatusListRenderer = {
+  canRenderType: "status-list",
+  render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getMargin(margin), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components56.Header, { title, className: "m-b-2" }) : null,
+    items.map((item) => {
+      const { callToAction, description, icon, status, title: itemTitle } = item;
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        import_components56.ListItem,
+        {
+          title: itemTitle,
+          subtitle: description,
+          media: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components56.AvatarView, { badge: { status: mapStatus2(status) }, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DynamicIcon_default, { name: icon.name }) }) : void 0,
+          additionalInfo: callToAction ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            import_components56.ListItem.AdditionalInfo,
+            {
+              action: {
+                href: callToAction.href,
+                onClick: callToAction.href ? void 0 : callToAction.onClick,
+                label: callToAction.title,
+                target: "_blank"
+              }
+            }
+          ) : void 0
+        },
+        JSON.stringify(item)
+      );
+    })
+  ] })
+};
+var mapStatus2 = (status) => {
+  switch (status) {
+    case "done":
+      return "positive";
+    case "pending":
+      return "pending";
+    default:
+      return void 0;
+  }
+};
+var NewStatusListRenderer_default = NewStatusListRenderer;
 
 // ../renderers/src/getWiseRenderers.ts
+var getListItemRenderers = () => [
+  NewDecisionRenderer_default,
+  NewListRenderer_default,
+  NewReviewRenderer_default,
+  NewStatusListRenderer_default
+];
 var getWiseRenderers = () => [
   AddressValidationButtonRenderer_default,
   AlertRenderer_default,
@@ -3226,6 +3427,7 @@ var import_jsx_runtime80 = require("react/jsx-runtime");
 // src/dynamicFlow/renderers.ts
 var Header11 = Header7;
 var getMargin2 = getMargin;
+var getListItemRenderers2 = getListItemRenderers;
 
 // src/i18n/index.ts
 var import_dynamic_flow_client = require("@wise/dynamic-flow-client");

package/build/main.mjs

@@ -801,7 +801,7 @@ var OPTION_GROUPS = {
   recent: "recent"
 };
 var GroupedList = (_a) => {
-  var _b = _a, { renderDecisionList: renderDecisionList2 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
+  var _b = _a, { renderDecisionList: renderDecisionList3 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
   const { formatMessage } = useIntl3();
   const { options } = rest;
   const popularOptions = options.filter((option) => option.tag === OPTION_GROUPS.popular);
@@ -809,15 +809,15 @@ var GroupedList = (_a) => {
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     popularOptions.length > 0 ? /* @__PURE__ */ jsxs4(Section, { children: [
       /* @__PURE__ */ jsx23(Header, { as: "h2", title: formatMessage(decision_messages_default.popular) }),
-      renderDecisionList2(__spreadProps(__spreadValues({}, rest), { options: popularOptions }))
+      renderDecisionList3(__spreadProps(__spreadValues({}, rest), { options: popularOptions }))
     ] }) : null,
     recentOptions.length > 0 ? /* @__PURE__ */ jsxs4(Section, { children: [
       /* @__PURE__ */ jsx23(Header, { as: "h2", title: formatMessage(decision_messages_default.recent) }),
-      renderDecisionList2(__spreadProps(__spreadValues({}, rest), { options: recentOptions }))
+      renderDecisionList3(__spreadProps(__spreadValues({}, rest), { options: recentOptions }))
     ] }) : null,
     /* @__PURE__ */ jsxs4(Section, { children: [
       /* @__PURE__ */ jsx23(Header, { as: "h2", title: formatMessage(decision_messages_default.all) }),
-      renderDecisionList2(rest)
+      renderDecisionList3(rest)
     ] })
   ] });
 };
@@ -877,13 +877,13 @@ var DecisionWrapper = (props) => {
   ] });
 };
 var UnfilteredDecisionList = (_a) => {
-  var _b = _a, { renderDecisionList: renderDecisionList2 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
-  return isGroupedDecision(rest.options) ? /* @__PURE__ */ jsx24(GroupedList, __spreadProps(__spreadValues({}, rest), { renderDecisionList: renderDecisionList2 })) : renderDecisionList2(rest);
+  var _b = _a, { renderDecisionList: renderDecisionList3 } = _b, rest = __objRest(_b, ["renderDecisionList"]);
+  return isGroupedDecision(rest.options) ? /* @__PURE__ */ jsx24(GroupedList, __spreadProps(__spreadValues({}, rest), { renderDecisionList: renderDecisionList3 })) : renderDecisionList3(rest);
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = useIntl4();
   const [query, setQuery] = useState3("");
-  const { control, options, renderDecisionList: renderDecisionList2 } = props;
+  const { control, options, renderDecisionList: renderDecisionList3 } = props;
   const filteredOptions = filterAndSortDecisionOptions(options, query);
   const isGrouped = isGroupedDecision(options);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
@@ -900,7 +900,7 @@ var FilteredDecisionList = (props) => {
     ),
     isGrouped && query.length === 0 ? /* @__PURE__ */ jsx24(GroupedList, __spreadValues({}, props)) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
       query.length > 0 && /* @__PURE__ */ jsx24(Header2, { as: "h2", title: formatMessage(decision_messages_default.results), className: "m-t-4" }),
-      filteredOptions.length > 0 ? renderDecisionList2({
+      filteredOptions.length > 0 ? renderDecisionList3({
         control,
         className: query.length === 0 ? "m-t-3" : "",
         options: filteredOptions
@@ -3121,31 +3121,231 @@ import { ListItem as ListItem3 } from "@transferwise/components";
 // ../renderers/src/NewListItem/getInlineAlert.tsx
 import { ListItem } from "@transferwise/components";
 import { jsx as jsx73 } from "react/jsx-runtime";
+var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ jsx73(ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
 
 // ../renderers/src/NewListItem/getMedia.tsx
 import { jsx as jsx74 } from "react/jsx-runtime";
+var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ jsx74(OptionMedia, { media, preferAvatar }) : void 0;
 
 // ../renderers/src/NewListItem/getAdditionalInfo.tsx
 import { ListItem as ListItem2 } from "@transferwise/components";
 import { jsx as jsx75 } from "react/jsx-runtime";
+var getAdditionalInfo = (additionalInfo) => {
+  if (!additionalInfo) {
+    return void 0;
+  }
+  const { href, text, onClick } = additionalInfo;
+  if (href || onClick) {
+    return /* @__PURE__ */ jsx75(
+      ListItem2.AdditionalInfo,
+      {
+        action: {
+          label: text,
+          href,
+          onClick,
+          target: "_blank"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx75(ListItem2.AdditionalInfo, { children: additionalInfo == null ? void 0 : additionalInfo.text });
+};
 
 // ../renderers/src/NewListItem/NewDecisionRenderer.tsx
 import { Fragment as Fragment12, jsx as jsx76 } from "react/jsx-runtime";
+var DecisionRenderer2 = {
+  canRenderType: "decision",
+  render: (props) => /* @__PURE__ */ jsx76(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList: renderDecisionList2 }))
+};
+var renderDecisionList2 = ({ options, control }) => {
+  return /* @__PURE__ */ jsx76(Fragment12, { children: options.map((option) => {
+    const {
+      description,
+      disabled,
+      media,
+      title: itemTitle,
+      tag,
+      href,
+      additionalText,
+      inlineAlert,
+      supportingValues,
+      onClick
+    } = option;
+    return /* @__PURE__ */ jsx76(
+      ListItem3,
+      {
+        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: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+        prompt: getInlineAlert(inlineAlert),
+        additionalInfo: additionalText ? getAdditionalInfo({ text: additionalText }) : void 0,
+        control: href ? /* @__PURE__ */ jsx76(ListItem3.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ jsx76(ListItem3.Navigation, { onClick })
+      },
+      JSON.stringify(option)
+    );
+  }) });
+};
+var NewDecisionRenderer_default = DecisionRenderer2;
 
 // ../renderers/src/NewListItem/NewListRenderer.tsx
 import { ListItem as ListItem4 } from "@transferwise/components";
 import { jsx as jsx77, 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__ */ jsx77(Header7, { title, callToAction }),
+    items.map((item) => {
+      const {
+        title: itemTitle,
+        description,
+        supportingValues,
+        media,
+        tag,
+        additionalInfo,
+        inlineAlert
+      } = item;
+      return /* @__PURE__ */ jsx77(
+        ListItem4,
+        {
+          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"),
+          prompt: getInlineAlert(inlineAlert),
+          additionalInfo: getAdditionalInfo(additionalInfo)
+        },
+        itemTitle
+      );
+    })
+  ] })
+};
+var NewListRenderer_default = ListRenderer2;
 
 // ../renderers/src/NewListItem/NewReviewRenderer.tsx
 import { ListItem as ListItem5, Popover } from "@transferwise/components";
 import { QuestionMarkCircle } from "@transferwise/icons";
 import { jsx as jsx78, jsxs as jsxs31 } from "react/jsx-runtime";
+var IGNORED_CONTROLS = [
+  "horizontal",
+  "horizontal-end-aligned",
+  "horizontal-start-aligned",
+  "vertical-two-column"
+];
+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__ */ jsx78(Header7, { title, callToAction }),
+    fields.map((field) => {
+      var _a;
+      const {
+        label,
+        value,
+        media,
+        tag,
+        additionalInfo,
+        inlineAlert,
+        help,
+        callToAction: itemCallToAction
+      } = field;
+      return /* @__PURE__ */ jsx78(
+        ListItem5,
+        {
+          title: value,
+          subtitle: label,
+          inverted: true,
+          media: getMedia(media, control === "with-avatar" || tag === "with-avatar"),
+          control: (_a = getCTAControl(itemCallToAction)) != null ? _a : getHelpControl(help),
+          prompt: getInlineAlert(inlineAlert),
+          additionalInfo: getAdditionalInfo(additionalInfo)
+        },
+        JSON.stringify(field)
+      );
+    })
+  ] })
+};
+var getCTAControl = (callToAction) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, href, title, onClick } = callToAction;
+  if (href) {
+    return /* @__PURE__ */ jsx78(ListItem5.Button, { href, partiallyInteractive: true, "aria-description": accessibilityDescription, children: title });
+  }
+  return /* @__PURE__ */ jsx78(
+    ListItem5.Button,
+    {
+      "aria-description": accessibilityDescription,
+      partiallyInteractive: true,
+      onClick,
+      children: title
+    }
+  );
+};
+var getHelpControl = (help) => {
+  if (!help) {
+    return void 0;
+  }
+  return /* @__PURE__ */ jsx78(Popover, { content: help, children: /* @__PURE__ */ jsx78(ListItem5.IconButton, { partiallyInteractive: true, children: /* @__PURE__ */ jsx78(QuestionMarkCircle, {}) }) });
+};
+var NewReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/NewListItem/NewStatusListRenderer.tsx
 import { AvatarView as AvatarView5, Header as Header10, ListItem as ListItem6 } from "@transferwise/components";
 import { jsx as jsx79, 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__ */ jsx79(Header10, { title, className: "m-b-2" }) : null,
+    items.map((item) => {
+      const { callToAction, description, icon, status, title: itemTitle } = item;
+      return /* @__PURE__ */ jsx79(
+        ListItem6,
+        {
+          title: itemTitle,
+          subtitle: description,
+          media: icon && "name" in icon ? /* @__PURE__ */ jsx79(AvatarView5, { badge: { status: mapStatus2(status) }, children: /* @__PURE__ */ jsx79(DynamicIcon_default, { name: icon.name }) }) : void 0,
+          additionalInfo: callToAction ? /* @__PURE__ */ jsx79(
+            ListItem6.AdditionalInfo,
+            {
+              action: {
+                href: callToAction.href,
+                onClick: callToAction.href ? void 0 : callToAction.onClick,
+                label: callToAction.title,
+                target: "_blank"
+              }
+            }
+          ) : void 0
+        },
+        JSON.stringify(item)
+      );
+    })
+  ] })
+};
+var mapStatus2 = (status) => {
+  switch (status) {
+    case "done":
+      return "positive";
+    case "pending":
+      return "pending";
+    default:
+      return void 0;
+  }
+};
+var NewStatusListRenderer_default = NewStatusListRenderer;
 
 // ../renderers/src/getWiseRenderers.ts
+var getListItemRenderers = () => [
+  NewDecisionRenderer_default,
+  NewListRenderer_default,
+  NewReviewRenderer_default,
+  NewStatusListRenderer_default
+];
 var getWiseRenderers = () => [
   AddressValidationButtonRenderer_default,
   AlertRenderer_default,
@@ -3195,6 +3395,7 @@ import { jsx as jsx80 } from "react/jsx-runtime";
 // src/dynamicFlow/renderers.ts
 var Header11 = Header7;
 var getMargin2 = getMargin;
+var getListItemRenderers2 = getListItemRenderers;
 
 // src/i18n/index.ts
 import { translations as coreTranslations } from "@wise/dynamic-flow-client";
@@ -4202,6 +4403,7 @@ export {
   Header11 as Header,
   JsonSchemaForm,
   findRendererPropsByType,
+  getListItemRenderers2 as getListItemRenderers,
   getMargin2 as getMargin,
   isValidSchema,
   makeHttpClient as makeCustomFetch,

package/build/types/dynamicFlow/renderers.d.ts

@@ -3,3 +3,5 @@ export declare const Header: ({ title, callToAction }: {
     callToAction?: import("@wise/dynamic-flow-types/build/renderers").CallToAction;
 }) => "" | import("react/jsx-runtime").JSX.Element | undefined;
 export declare const getMargin: (size: import("@wise/dynamic-flow-types/build/next").Margin) => "m-b-0" | "m-b-1" | "m-b-2" | "m-b-3" | "m-b-5" | "";
+export declare const getListItemRenderers: () => import("@wise/dynamic-flow-client").Renderers;
+export declare const ButtonRendererV2: import("@wise/dynamic-flow-client").Renderer<import("@wise/dynamic-flow-client").ButtonRendererProps>;

package/build/types/index.d.ts

@@ -2,7 +2,7 @@ export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
 export type { DynamicFlowProps, DynamicFormController, InitialAction, Step, } from '@wise/dynamic-flow-client';
 export type { AlertRendererProps, BoxRendererProps, ButtonRendererProps, CheckboxInputRendererProps, ColumnsRendererProps, DateInputRendererProps, DecisionRendererProps, DividerRendererProps, FormRendererProps, FormSectionRendererProps, HeadingRendererProps, HiddenRendererProps, ImageRendererProps, InstructionsRendererProps, IntegerInputRendererProps, LoadingIndicatorRendererProps, MarkdownRendererProps, ModalLayoutRendererProps, ModalRendererProps, MultiSelectInputRendererProps, MultiUploadInputRendererProps, NumberInputRendererProps, ParagraphRendererProps, Renderer, Renderers, RepeatableRendererProps, ReviewRendererProps, SearchRendererProps, SelectInputRendererProps, StatusListRendererProps, StepRendererProps, TextInputRendererProps, UploadInputRendererProps, } from '@wise/dynamic-flow-types/build/renderers';
 export { findRendererPropsByType, isValidSchema, JsonSchemaForm } from '@wise/dynamic-flow-client';
-export { Header, getMargin } from './dynamicFlow/renderers';
+export { Header, getMargin, getListItemRenderers } from './dynamicFlow/renderers';
 export { default as translations } from './i18n';
 export type { DynamicFlowLegacyProps, DynamicFlowRevampProps } from './dynamicFlow/DynamicFlow';
 export { DynamicFlowLegacy, DynamicFlowRevamp, DynamicForm } from './dynamicFlow/DynamicFlow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.25.0-experimental-cd1bec2",
+  "version": "4.25.0-experimental-91c6dca",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -74,12 +74,12 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.20.4",
     "typescript": "5.9.2",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.12.0-experimental-cd1bec2",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-types": "3.12.0-experimental-91c6dca",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
-    "@transferwise/components": "^46.92.0",
+    "@transferwise/components": "^46.104.0",
     "@transferwise/formatting": "^2",
     "@transferwise/icons": "^3.18.0",
     "@transferwise/neptune-css": "^14.22.0",
@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-types": "3.12.0-experimental-cd1bec2",
-    "@wise/dynamic-flow-client": "4.15.0-experimental-cd1bec2"
+    "@wise/dynamic-flow-types": "3.12.0-experimental-91c6dca",
+    "@wise/dynamic-flow-client": "4.15.0-experimental-91c6dca"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",