@wise/dynamic-flow-client-internal 4.24.1-experimental-5566f24 → 4.25.0-experimental-5356389

package/build/main.js

@@ -62,10 +62,11 @@ __export(index_exports, {
   DynamicFlowLegacy: () => DynamicFlowLegacy,
   DynamicFlowRevamp: () => DynamicFlowRevamp,
   DynamicForm: () => DynamicForm,
-  Header: () => Header7,
+  Header: () => Header11,
   JsonSchemaForm: () => import_dynamic_flow_client4.JsonSchemaForm,
   findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
-  getMargin: () => getMargin,
+  getListItemRenderers: () => getListItemRenderers,
+  getMargin: () => getMargin2,
   isValidSchema: () => import_dynamic_flow_client4.isValidSchema,
   makeCustomFetch: () => import_dynamic_flow_client3.makeHttpClient,
   translations: () => i18n_default
@@ -312,7 +313,6 @@ function Help({ help, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_components4.Info,
     {
-      className: "m-l-1",
       content: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Markdown, { config: { link: { target: "_blank" } }, children: help }),
       presentation: "POPOVER",
       size: "sm",
@@ -530,86 +530,6 @@ var DateInputRenderer_default = DateInputRenderer;
 
 // ../renderers/src/DecisionRenderer/DecisionRenderer.tsx
 var import_components14 = require("@transferwise/components");
-var import_react_intl7 = require("react-intl");
-
-// ../renderers/src/messages/decision.messages.ts
-var import_react_intl5 = require("react-intl");
-var decision_messages_default = (0, import_react_intl5.defineMessages)({
-  all: {
-    id: "df.wise.Decision.all",
-    defaultMessage: "All",
-    description: "Label for the group of options that encompasses all options"
-  },
-  popular: {
-    id: "df.wise.Decision.popular",
-    defaultMessage: "Popular",
-    description: "Label for the group of options that are tagged as popular"
-  },
-  recent: {
-    id: "df.wise.Decision.recent",
-    defaultMessage: "Recent",
-    description: "Label for the group of options that are tagged as recent"
-  },
-  filterPlaceholder: {
-    id: "df.wise.Decision.filterPlaceholder",
-    defaultMessage: "Start typing to search",
-    description: "Placeholder for the filter input"
-  },
-  results: {
-    id: "df.wise.Decision.results",
-    defaultMessage: "Search results",
-    description: "Label for the results section"
-  },
-  noResults: {
-    id: "df.wise.Decision.noResults",
-    defaultMessage: "No results",
-    description: "Message for if there are no results"
-  }
-});
-
-// ../renderers/src/DecisionRenderer/DecisionRenderer.tsx
-var import_react3 = require("react");
-
-// ../renderers/src/DecisionRenderer/filter-and-sort-decision-options.ts
-function filterAndSortDecisionOptions(selectOptions, query) {
-  const upperQuery = query.toUpperCase().trim();
-  const filteredItems = selectOptions.filter((option) => {
-    var _a, _b, _c, _d;
-    const searchableWords = [
-      option.title,
-      option.description,
-      option.additionalText,
-      (_a = option.supportingValues) == null ? void 0 : _a.value,
-      (_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 [...filteredItems].sort((a, b) => {
-    const aTitleUpper = a.title.toUpperCase();
-    const bTitleUpper = b.title.toUpperCase();
-    const aTitleStarts = aTitleUpper.startsWith(upperQuery);
-    const bTitleStarts = bTitleUpper.startsWith(upperQuery);
-    if (aTitleStarts && !bTitleStarts) {
-      return -1;
-    }
-    if (!aTitleStarts && bTitleStarts) {
-      return 1;
-    }
-    const aWordStarts = aTitleUpper.split(" ").some((word) => word.startsWith(upperQuery));
-    const bWordStarts = bTitleUpper.split(" ").some((word) => word.startsWith(upperQuery));
-    if (aWordStarts && !bWordStarts) {
-      return -1;
-    }
-    if (!aWordStarts && bWordStarts) {
-      return 1;
-    }
-    return a.title.localeCompare(b.title);
-  });
-}
-
-// ../renderers/src/DecisionRenderer/DecisionList.tsx
-var import_components12 = require("@transferwise/components");
 
 // ../renderers/src/utils/UrnFlag.tsx
 var import_art = require("@wise/art");
@@ -874,64 +794,71 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var getInlineMedia = (media) => media ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Media, { media, preferAvatar: false, size: 24 }) : null;
 
 // ../renderers/src/DecisionRenderer/DecisionList.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var DecisionList = ({
-  options,
-  control,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components12.NavigationOptionsList, { children: options.map((option) => {
-    const { description, disabled, media, title: itemTitle, tag, onClick } = option;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_components12.NavigationOption,
-      {
-        title: itemTitle,
-        content: description,
-        disabled,
-        media: media ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          OptionMedia,
-          {
-            media,
-            preferAvatar: control === "with-avatar" || tag === "with-avatar"
-          }
-        ) : null,
-        showMediaCircle: false,
-        showMediaAtAllSizes: true,
-        onClick
-      },
-      JSON.stringify(option)
-    );
-  }) }) });
-};
-var DecisionList_default = DecisionList;
+var import_components13 = require("@transferwise/components");
 
 // ../renderers/src/DecisionRenderer/GroupedList.tsx
-var import_components13 = require("@transferwise/components");
+var import_components12 = require("@transferwise/components");
 var import_react_intl6 = require("react-intl");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// ../renderers/src/messages/decision.messages.ts
+var import_react_intl5 = require("react-intl");
+var decision_messages_default = (0, import_react_intl5.defineMessages)({
+  all: {
+    id: "df.wise.Decision.all",
+    defaultMessage: "All",
+    description: "Label for the group of options that encompasses all options"
+  },
+  popular: {
+    id: "df.wise.Decision.popular",
+    defaultMessage: "Popular",
+    description: "Label for the group of options that are tagged as popular"
+  },
+  recent: {
+    id: "df.wise.Decision.recent",
+    defaultMessage: "Recent",
+    description: "Label for the group of options that are tagged as recent"
+  },
+  filterPlaceholder: {
+    id: "df.wise.Decision.filterPlaceholder",
+    defaultMessage: "Start typing to search",
+    description: "Placeholder for the filter input"
+  },
+  results: {
+    id: "df.wise.Decision.results",
+    defaultMessage: "Search results",
+    description: "Label for the results section"
+  },
+  noResults: {
+    id: "df.wise.Decision.noResults",
+    defaultMessage: "No results",
+    description: "Message for if there are no results"
+  }
+});
+
+// ../renderers/src/DecisionRenderer/GroupedList.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var OPTION_GROUPS = {
   popular: "popular",
   recent: "recent"
 };
-var GroupedList = ({
-  options,
-  control
-}) => {
+var GroupedList = (_a) => {
+  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);
   const recentOptions = options.filter((option) => option.tag === OPTION_GROUPS.recent);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    popularOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components13.Section, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components13.Header, { as: "h2", title: formatMessage(decision_messages_default.popular) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DecisionList_default, { options: popularOptions, control })
+  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) }),
+      renderDecisionList3(__spreadProps(__spreadValues({}, rest), { options: popularOptions }))
     ] }) : null,
-    recentOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components13.Section, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components13.Header, { as: "h2", title: formatMessage(decision_messages_default.recent) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DecisionList_default, { options: recentOptions, control })
+    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) }),
+      renderDecisionList3(__spreadProps(__spreadValues({}, rest), { options: recentOptions }))
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components13.Section, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components13.Header, { as: "h2", title: formatMessage(decision_messages_default.all) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DecisionList_default, { options, control })
+    /* @__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) }),
+      renderDecisionList3(rest)
     ] })
   ] });
 };
@@ -940,26 +867,69 @@ var isGroupedDecision = (options) => {
   return options.some(({ tag }) => tag && possibleGroups.includes(tag));
 };
 
-// ../renderers/src/DecisionRenderer/DecisionRenderer.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var DecisionRenderer = {
-  canRenderType: "decision",
-  render: (props) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getMargin(props.margin), children: [
-      props.title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components14.Header, { as: "h2", title: props.title }),
-      props.control === "filtered" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UnfilteredDecisionList, __spreadValues({}, props))
-    ] });
-  }
+// ../renderers/src/DecisionRenderer/DecisionList.tsx
+var import_react_intl7 = require("react-intl");
+var import_react3 = require("react");
+
+// ../renderers/src/DecisionRenderer/filter-and-sort-decision-options.ts
+function filterAndSortDecisionOptions(selectOptions, query) {
+  const upperQuery = query.toUpperCase().trim();
+  const filteredItems = selectOptions.filter((option) => {
+    var _a, _b, _c, _d;
+    const searchableWords = [
+      option.title,
+      option.description,
+      option.additionalText,
+      (_a = option.supportingValues) == null ? void 0 : _a.value,
+      (_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 [...filteredItems].sort((a, b) => {
+    const aTitleUpper = a.title.toUpperCase();
+    const bTitleUpper = b.title.toUpperCase();
+    const aTitleStarts = aTitleUpper.startsWith(upperQuery);
+    const bTitleStarts = bTitleUpper.startsWith(upperQuery);
+    if (aTitleStarts && !bTitleStarts) {
+      return -1;
+    }
+    if (!aTitleStarts && bTitleStarts) {
+      return 1;
+    }
+    const aWordStarts = aTitleUpper.split(" ").some((word) => word.startsWith(upperQuery));
+    const bWordStarts = bTitleUpper.split(" ").some((word) => word.startsWith(upperQuery));
+    if (aWordStarts && !bWordStarts) {
+      return -1;
+    }
+    if (!aWordStarts && bWordStarts) {
+      return 1;
+    }
+    return a.title.localeCompare(b.title);
+  });
+}
+
+// ../renderers/src/DecisionRenderer/DecisionList.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var DecisionWrapper = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getMargin(props.margin), children: [
+    props.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components13.Header, { as: "h2", title: props.title }),
+    props.control === "filtered" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UnfilteredDecisionList, __spreadValues({}, props))
+  ] });
 };
-var UnfilteredDecisionList = ({ control, options }) => isGroupedDecision(options) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GroupedList, { options, control }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DecisionList_default, { options, control });
-var FilteredDecisionList = ({ options, control }) => {
+var UnfilteredDecisionList = (_a) => {
+  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: renderDecisionList3 } = props;
   const filteredOptions = filterAndSortDecisionOptions(options, query);
   const isGrouped = isGroupedDecision(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_components14.SearchInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_components13.SearchInput,
       {
         placeholder: formatMessage(decision_messages_default.filterPlaceholder),
         value: query,
@@ -969,19 +939,49 @@ var FilteredDecisionList = ({ options, control }) => {
         }
       }
     ),
-    isGrouped && query.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GroupedList, { options, control }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components14.Header, { as: "h2", title: formatMessage(decision_messages_default.results), className: "m-t-4" }),
-      filteredOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        DecisionList_default,
-        {
-          options: filteredOptions,
-          control,
-          className: query.length === 0 ? "m-t-3" : ""
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: formatMessage(decision_messages_default.noResults) })
+    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 ? renderDecisionList3({
+        control,
+        className: query.length === 0 ? "m-t-3" : "",
+        options: filteredOptions
+      }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: formatMessage(decision_messages_default.noResults) })
     ] })
   ] });
 };
+
+// ../renderers/src/DecisionRenderer/DecisionRenderer.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var DecisionRenderer = {
+  canRenderType: "decision",
+  render: (props) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList }));
+  }
+};
+var renderDecisionList = ({ options, className, control }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components14.NavigationOptionsList, { children: options.map((option) => {
+    const { description, disabled, media, title: itemTitle, tag, onClick } = option;
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_components14.NavigationOption,
+      {
+        title: itemTitle,
+        content: description,
+        disabled,
+        media: media ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          OptionMedia,
+          {
+            media,
+            preferAvatar: control === "with-avatar" || tag === "with-avatar"
+          }
+        ) : null,
+        showMediaCircle: false,
+        showMediaAtAllSizes: true,
+        onClick
+      },
+      JSON.stringify(option)
+    );
+  }) }) });
+};
 var DecisionRenderer_default = DecisionRenderer;
 
 // ../renderers/src/DividerRenderer.tsx
@@ -2102,11 +2102,10 @@ var ReviewRenderer = {
           definitions: fields.map(
             ({ label, value, help, analyticsId: fieldAnalyticsId }, index) => ({
               key: String(index),
-              title: label,
-              value: getFieldValue(
-                value,
+              value,
+              title: getFieldLabel(
+                label,
                 help,
-                orientation,
                 () => trackEvent("Help Pressed", { layoutItemId: fieldAnalyticsId })
               )
             })
@@ -2132,19 +2131,15 @@ var mapControlToDefinitionListLayout = (control) => {
       return "VERTICAL_ONE_COLUMN";
   }
 };
-var getFieldValue = (value, help, orientation, onClick) => {
+var getFieldLabel = (label, help, onClick) => {
   if (help) {
-    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Help_default, { help, onClick }),
-      " ",
-      value
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      value,
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+      label,
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Help_default, { help, onClick })
     ] });
   }
-  return value;
+  return label;
 };
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
@@ -3152,7 +3147,237 @@ var LargeUploadRenderer = {
   }
 };
 
+// ../renderers/src/NewListItem/NewDecisionRenderer.tsx
+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 listItemRenderers = [
+  NewDecisionRenderer_default,
+  NewListRenderer_default,
+  NewReviewRenderer_default,
+  NewStatusListRenderer_default
+];
 var getWiseRenderers = () => [
   AddressValidationButtonRenderer_default,
   AlertRenderer_default,
@@ -3195,9 +3420,14 @@ var getWiseRenderers = () => [
 ];
 
 // ../renderers/src/ButtonRenderer/ButtonRendererV2.tsx
-var import_components51 = require("@transferwise/components");
+var import_components57 = require("@transferwise/components");
 var import_react18 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
+
+// src/dynamicFlow/renderers.ts
+var Header11 = Header7;
+var getMargin2 = getMargin;
+var getListItemRenderers = () => listItemRenderers;
 
 // src/i18n/index.ts
 var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
@@ -4088,12 +4318,12 @@ var messages_default = (0, import_react_intl21.defineMessages)({
 });
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime81 = 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_runtime74.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
@@ -4130,7 +4360,7 @@ function DynamicFlowRevamp(props) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
 var DynamicForm = (0, import_react19.forwardRef)(function DynamicForm2(props, ref) {
   const {
@@ -4167,7 +4397,7 @@ var DynamicForm = (0, import_react19.forwardRef)(function DynamicForm2(props, re
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl22.useIntl)();