@wise/dynamic-flow-client-internal 5.23.0-experimental-2dcb025 → 5.24.0-experimental-9265cac

package/build/main.mjs

@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@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" ? "5.22.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.23.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -642,7 +642,7 @@ var AvatarMedia = ({
       }
     );
   }
-  const avatarsWithoutBadges = avatars.filter(({ asset, icon }) => asset || icon).slice(0, 2).map(({ asset, icon, backgroundColor, color }) => ({
+  const avatarsWithoutBadges = avatars.filter(({ asset, icon }) => Boolean(asset || icon)).slice(0, 2).map(({ asset, icon, backgroundColor, color }) => ({
     asset: icon != null ? icon : asset,
     style: { backgroundColor, color }
   }));
@@ -723,22 +723,25 @@ var getImageNode = (image, size) => {
 
 // ../renderers/src/components/Media/LegacyMedia.tsx
 import { AvatarView as AvatarView3 } from "@transferwise/components";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
   const imageNode = getImageNode(image, size);
   const iconNode = getIconNode(icon);
   const badge = getBadgedMedia(iconNode, imageNode, size);
   if (badge) {
-    return badge;
+    return /* @__PURE__ */ jsx12(Fragment, { children: badge });
   }
   if (imageNode) {
-    return preferAvatar ? /* @__PURE__ */ jsx12(AvatarView3, { children: imageNode }) : imageNode;
+    return preferAvatar ? /* @__PURE__ */ jsx12(AvatarView3, { children: imageNode }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      imageNode,
+      " "
+    ] });
   }
   if (iconNode && icon) {
     if ("text" in icon || size === 48) {
       return /* @__PURE__ */ jsx12(AvatarView3, { size, children: iconNode });
     }
-    return iconNode;
+    return /* @__PURE__ */ jsx12(Fragment, { children: iconNode });
   }
   return null;
 };
@@ -911,9 +914,9 @@ function Help({ help, onClick }) {
 var Help_default = Help;
 
 // ../renderers/src/components/LabelContentWithHelp.tsx
-import { jsx as jsx18, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
 function LabelContentWithHelp({ text, help }) {
-  return /* @__PURE__ */ jsxs3("div", { children: [
+  return /* @__PURE__ */ jsxs4("div", { children: [
     text,
     /* @__PURE__ */ jsx18(Help_default, { help })
   ] });
@@ -2087,7 +2090,7 @@ var step_messages_default = defineMessages3({
 });
 
 // ../renderers/src/step/StepFooter.tsx
-import { Fragment, jsx as jsx24, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
 var SCROLL_TO_BOTTOM = "scroll-to-bottom";
 var StepFooter = ({ footer, tags }) => {
   if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
@@ -2121,9 +2124,9 @@ var FooterWithScrollButton = ({ footer }) => {
   if (isElementVisible && !hasStepFooterContent) {
     return /* @__PURE__ */ jsx24("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
   }
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx24("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs4("div", { className: "df-step-fixed__footer", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "df-step-fixed__footer", children: [
       !isElementVisible && scrollButton,
       footer
     ] })
@@ -2144,13 +2147,14 @@ var useIsElementVisible = (elementRef) => {
 };
 
 // ../renderers/src/CollectionRenderer/components/ContentComponent.tsx
-import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
 var ContentComponent = (props) => {
   const { state, status, SectionHeader, Item } = props;
   const endOfContentRef = useRef3(null);
   const isBottomVisible = useIsElementVisible(endOfContentRef);
   useEffect7(() => {
     var _a;
+    console.log("bottom visible", status);
     if (isBottomVisible && status.type === "idle" && status.loadMore) {
       (_a = status.loadMore) == null ? void 0 : _a.call(status);
     }
@@ -2191,9 +2195,10 @@ var ContentComponent = (props) => {
     overscan: 10,
     scrollMargin: listOffsetRef.current
   });
-  return /* @__PURE__ */ jsxs5("div", { ref: listRef, children: [
-    state.beforeSections,
-    /* @__PURE__ */ jsx25(
+  const showState = status.type === "idle" || status.reason === "pagination";
+  return /* @__PURE__ */ jsxs6("div", { ref: listRef, children: [
+    showState && state.beforeSections,
+    showState && /* @__PURE__ */ jsx25(
       "div",
       {
         style: {
@@ -2225,11 +2230,11 @@ var ContentComponent = (props) => {
         })
       }
     ),
-    /* @__PURE__ */ jsxs5("div", { ref: endOfContentRef, className: "d-flex m-x-auto m-y-2", children: [
-      status.type === "idle" || status.type === "loading" && status.reason === "pagination" ? /* @__PURE__ */ jsx25(ProcessIndicator, { size: "xs" }) : null,
+    /* @__PURE__ */ jsxs6("div", { ref: endOfContentRef, className: "d-flex m-x-auto m-y-2", children: [
+      status.type === "idle" && status.loadMore || status.type === "loading" ? /* @__PURE__ */ jsx25(ProcessIndicator, { size: "xs" }) : null,
       status.type === "error" && status.reason === "pagination" ? /* @__PURE__ */ jsx25("div", { className: "d-flex m-x-auto", children: /* @__PURE__ */ jsx25(Button4, { v2: true, size: "sm", priority: "secondary-neutral", onClick: status.retry, children: "Load more" }) }) : null
     ] }),
-    state.afterSections
+    showState && state.afterSections
   ] });
 };
 
@@ -2291,13 +2296,6 @@ var FilterComponent = (filter) => {
       multiple: multiSelect,
       selected: options.some((option) => option.selected) ? options.filter((option) => option.selected).map((option) => option.value) : multiSelect ? [] : "",
       chips: [
-        ...multiSelect ? [
-          {
-            value: "",
-            // this is a placeholder for now, only for single selects, when it is not possible to de-select options
-            label: "All"
-          }
-        ] : [],
         ...options.map((option) => ({
           value: option.value,
           label: option.title
@@ -2449,14 +2447,14 @@ var createCollectionRenderer = (canRender, components) => {
 };
 
 // ../renderers/src/CollectionRenderer/CollectionRenderer.tsx
-import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
 var CollectionRendererComponent = (props) => {
   const { status, Search: Search4, Filters, Results } = props;
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
     /* @__PURE__ */ jsx33(Search4, __spreadValues({}, props)),
     /* @__PURE__ */ jsx33(Filters, __spreadValues({}, props)),
-    status.type === "idle" || status.reason === "pagination" ? /* @__PURE__ */ jsx33(Results, __spreadValues({}, props)) : void 0,
-    status.type === "error" && status.reason === "search" && /* @__PURE__ */ jsxs6(InlinePrompt, { width: "full", sentiment: "negative", children: [
+    status.type === "idle" || status.type === "loading" ? /* @__PURE__ */ jsx33(Results, __spreadValues({}, props)) : void 0,
+    status.type === "error" && status.reason === "search" && /* @__PURE__ */ jsxs7(InlinePrompt, { width: "full", sentiment: "negative", children: [
       "Something went wrong,\xA0",
       /* @__PURE__ */ jsx33(DSLink, { onClick: status.retry, children: "click here to retry" })
     ] })
@@ -2474,10 +2472,47 @@ var CollectionRenderer_default = CollectionRenderer;
 
 // ../renderers/src/ColumnsRenderer.tsx
 var import_classnames3 = __toESM(require_classnames());
-import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../renderers/src/utils/useIsCollapsed.ts
+import { useEffect as useEffect8, useState as useState6 } from "react";
+var COLLAPSE_QUERY = "(max-width: 767.98px)";
+var supportsMatchMedia = () => typeof window !== "undefined" && !!window.matchMedia;
+var useIsCollapsed = () => {
+  const [collapsed, setCollapsed] = useState6(
+    () => supportsMatchMedia() && window.matchMedia(COLLAPSE_QUERY).matches
+  );
+  useEffect8(() => {
+    if (supportsMatchMedia()) {
+      const mql = window.matchMedia(COLLAPSE_QUERY);
+      const update = () => setCollapsed(mql.matches);
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    return void 0;
+  }, []);
+  return collapsed;
+};
+
+// ../renderers/src/ColumnsRenderer.tsx
+import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+var RIGHT_FIRST_STACKING = "right-first-stacking";
 var ColumnsRenderer = {
   canRenderType: "columns",
-  render: ({ bias, margin, startChildren, endChildren }) => /* @__PURE__ */ jsxs7(
+  render: ColumnsRendererComponent
+};
+function ColumnsRendererComponent({
+  bias,
+  margin,
+  startChildren,
+  endChildren,
+  tags
+}) {
+  var _a;
+  const isCollapsed = useIsCollapsed();
+  const reverse = isCollapsed && ((_a = tags == null ? void 0 : tags.includes(RIGHT_FIRST_STACKING)) != null ? _a : false);
+  const startColumn = /* @__PURE__ */ jsx34("div", { className: "df-columns-renderer-column", children: startChildren });
+  const endColumn = /* @__PURE__ */ jsx34("div", { className: "df-columns-renderer-column", children: endChildren });
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: (0, import_classnames3.default)("df-columns-renderer-container", getMargin(margin), {
@@ -2485,12 +2520,12 @@ var ColumnsRenderer = {
         "df-columns-renderer-bias-end": bias === "end"
       }),
       children: [
-        /* @__PURE__ */ jsx34("div", { className: "df-columns-renderer-column", children: startChildren }),
-        /* @__PURE__ */ jsx34("div", { className: "df-columns-renderer-column", children: endChildren })
+        reverse ? endColumn : startColumn,
+        reverse ? startColumn : endColumn
       ]
     }
-  )
-};
+  );
+}
 var ColumnsRenderer_default = ColumnsRenderer;
 
 // ../renderers/src/components/VariableDateInput.tsx
@@ -2618,7 +2653,7 @@ import { ListItem as ListItem7 } from "@transferwise/components";
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 import { Header as Header3, SearchInput } from "@transferwise/components";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { useIntl as useIntl5 } from "react-intl";
 
 // ../renderers/src/messages/filter.messages.ts
@@ -2728,7 +2763,7 @@ var getGroupsFromTags = (knownTags, items) => {
 };
 
 // ../renderers/src/DecisionRenderer/GroupedDecisionList.tsx
-import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
 var groupingTags = Object.keys(group_messages_default).filter((key) => key !== "all");
 var isGroupedDecision = (options) => {
   return getGroupsFromTags(groupingTags, options).length > 0;
@@ -2738,7 +2773,7 @@ var GroupedDecisionList = (_a) => {
   const { formatMessage } = useIntl4();
   const { options } = rest;
   const itemsByTag = [...getGroupsFromTags(groupingTags, options), { tag: "all", items: options }];
-  return /* @__PURE__ */ jsx37(Fragment3, { children: itemsByTag.map(({ tag, items }) => /* @__PURE__ */ jsxs8(Section, { children: [
+  return /* @__PURE__ */ jsx37(Fragment4, { children: itemsByTag.map(({ tag, items }) => /* @__PURE__ */ jsxs9(Section, { children: [
     /* @__PURE__ */ jsx37(
       Header2,
       {
@@ -2751,9 +2786,9 @@ var GroupedDecisionList = (_a) => {
 };
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
-import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 var DecisionWrapper = (props) => {
-  return /* @__PURE__ */ jsxs9("div", { className: getMargin(props.margin), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: getMargin(props.margin), children: [
     props.title && /* @__PURE__ */ jsx38(Header3, { as: "h2", title: props.title }),
     props.control === "filtered" ? /* @__PURE__ */ jsx38(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsx38(UnfilteredDecisionList, __spreadValues({}, props))
   ] });
@@ -2764,11 +2799,11 @@ var UnfilteredDecisionList = (_a) => {
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = useIntl5();
-  const [query, setQuery] = useState6("");
+  const [query, setQuery] = useState7("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
   const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortDecisionOptions(options, query) : options;
   const isGrouped = isGroupedDecision(options);
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
     /* @__PURE__ */ jsx38(
       SearchInput,
       {
@@ -2781,7 +2816,7 @@ var FilteredDecisionList = (props) => {
         }
       }
     ),
-    isGrouped && query.length === 0 ? /* @__PURE__ */ jsx38(GroupedDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    isGrouped && query.length === 0 ? /* @__PURE__ */ jsx38(GroupedDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
       query.length > 0 && /* @__PURE__ */ jsx38(Header3, { as: "h2", title: formatMessage(filter_messages_default.results), className: "m-t-4" }),
       filteredOptions.length > 0 ? renderDecisionList2({
         control,
@@ -2793,13 +2828,13 @@ var FilteredDecisionList = (props) => {
 };
 
 // ../renderers/src/DecisionRenderer/DecisionRenderer.tsx
-import { Fragment as Fragment5, jsx as jsx39 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39 } from "react/jsx-runtime";
 var DecisionRenderer = {
   canRenderType: "decision",
   render: (props) => /* @__PURE__ */ jsx39(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList }))
 };
 var renderDecisionList = ({ options, control }) => {
-  return /* @__PURE__ */ jsx39(Fragment5, { children: options.map((_a) => {
+  return /* @__PURE__ */ jsx39(Fragment6, { children: options.map((_a) => {
     var _b = _a, { onClick } = _b, rest = __objRest(_b, ["onClick"]);
     const {
       description,
@@ -2881,8 +2916,8 @@ var external_confirmation_messages_default = defineMessages6({
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl6 } from "react-intl";
-import { useEffect as useEffect8 } from "react";
-import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect9 } from "react";
+import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs11 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
   render: ExternalConfirmationRendererComponent
@@ -2894,7 +2929,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = useIntl6();
-  useEffect8(() => {
+  useEffect9(() => {
     open();
   }, []);
   return /* @__PURE__ */ jsx41(
@@ -2902,9 +2937,9 @@ function ExternalConfirmationRendererComponent({
     {
       open: visible,
       title: formatMessage(external_confirmation_messages_default.title),
-      body: /* @__PURE__ */ jsxs10(Fragment6, { children: [
+      body: /* @__PURE__ */ jsxs11(Fragment7, { children: [
         /* @__PURE__ */ jsx41(Markdown2, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(url) }) }),
-        /* @__PURE__ */ jsx41("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs10("div", { className: "df-box-renderer-width-lg", children: [
+        /* @__PURE__ */ jsx41("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs11("div", { className: "df-box-renderer-width-lg", children: [
           /* @__PURE__ */ jsx41(
             Button5,
             {
@@ -2945,10 +2980,10 @@ var FormRenderer_default = FormRenderer;
 
 // ../renderers/src/FormSectionRenderer.tsx
 import { Header as Header4 } from "@transferwise/components";
-import { jsx as jsx43, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs12 } from "react/jsx-runtime";
 var FormSectionRenderer = {
   canRenderType: "form-section",
-  render: ({ title, description, children }) => /* @__PURE__ */ jsxs11("fieldset", { children: [
+  render: ({ title, description, children }) => /* @__PURE__ */ jsxs12("fieldset", { children: [
     title && /* @__PURE__ */ jsx43(
       Header4,
       {
@@ -3008,7 +3043,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState8 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -3027,8 +3062,8 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = useState7("");
-  useEffect9(() => {
+  const [imageSource, setImageSource] = useState8("");
+  useEffect10(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -3094,12 +3129,12 @@ import {
   Illustration,
   isIllustrationSupport3D
 } from "@wise/art";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
   const { rComponents } = stringToURN(uri);
-  return rComponents["type"] === "animated";
+  return rComponents.type === "animated";
 };
 
 // ../renderers/src/ImageRenderer/SafeIllustration3D.tsx
@@ -3117,7 +3152,7 @@ var Illustration3DErrorBoundary = class extends Component {
   componentDidCatch() {
     this.props.onError();
   }
-  render() {
+  async render() {
     if (this.state.hasError) {
       return null;
     }
@@ -3144,7 +3179,7 @@ function UrnIllustration({
   size,
   uri
 }) {
-  const [has3DFailed, setHas3DFailed] = useState8(false);
+  const [has3DFailed, setHas3DFailed] = useState9(false);
   const illustrationSize = getIllustrationSize(size);
   const illustrationName = getIllustrationName(uri);
   const illustration3DName = getIllustration3DName(uri);
@@ -3203,7 +3238,7 @@ var ImageRenderer_default = ImageRenderer;
 
 // ../renderers/src/InstructionsRenderer.tsx
 import { Header as Header5, InstructionsList } from "@transferwise/components";
-import { jsx as jsx51, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs13 } from "react/jsx-runtime";
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
 var InstructionsRenderer = {
@@ -3211,7 +3246,7 @@ var InstructionsRenderer = {
   render: ({ items, margin, title }) => {
     const dos = items.filter((item) => doContext.includes(item.context)).map(({ text }) => text);
     const donts = items.filter((item) => dontContext.includes(item.context)).map(({ text }) => text);
-    return /* @__PURE__ */ jsxs12("div", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs13("div", { className: getMargin(margin), children: [
       title ? /* @__PURE__ */ jsx51(Header5, { title }) : null,
       /* @__PURE__ */ jsx51(InstructionsList, { dos, donts })
     ] });
@@ -3311,10 +3346,10 @@ var getHeaderAction = (callToAction) => {
 };
 
 // ../renderers/src/ListRenderer.tsx
-import { jsx as jsx54, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs14 } from "react/jsx-runtime";
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ jsxs13("div", { className: getMargin(margin), children: [
+  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ jsxs14("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx54(Header, { title, callToAction }),
     items.map((item) => {
       var _a, _b;
@@ -3436,17 +3471,17 @@ var mapAvatarMediaSize = (size) => {
 
 // ../renderers/src/ModalLayoutRenderer.tsx
 import { Button as Button6, Modal as Modal2 } from "@transferwise/components";
-import { useState as useState9 } from "react";
-import { jsx as jsx58, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx58, jsxs as jsxs15 } from "react/jsx-runtime";
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
   render: (props) => /* @__PURE__ */ jsx58(DFModal, __spreadValues({}, props))
 };
 var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = useState9(false);
+  const [visible, setVisible] = useState10(false);
   const { children, title } = content;
-  return /* @__PURE__ */ jsxs14("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs15("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx58(Button6, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ jsx58(
       Modal2,
@@ -3474,7 +3509,7 @@ var ModalRenderer = {
 
 // ../renderers/src/MoneyInputRenderer.tsx
 import { MoneyInput } from "@transferwise/components";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var groupingTags2 = Object.keys(group_messages_default).filter((key) => key !== "all");
@@ -3497,7 +3532,7 @@ function MoneyInputRendererComponent(props) {
     onAmountChange,
     onCurrencyChange
   } = props;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isValidIndex(selectedCurrencyIndex, currencies.length)) {
       onCurrencyChange(0);
     }
@@ -3642,7 +3677,7 @@ function InlineComponent(props) {
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { useIntl as useIntl8 } from "react-intl";
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -3659,7 +3694,7 @@ var multi_select_messages_default = defineMessages7({
 import { jsx as jsx62 } from "react/jsx-runtime";
 function DefaultComponent(props) {
   const { formatMessage } = useIntl8();
-  const [stagedIndices, setStagedIndices] = useState10();
+  const [stagedIndices, setStagedIndices] = useState11();
   const {
     id,
     autoComplete,
@@ -3823,7 +3858,7 @@ import { Status, UploadInput } from "@transferwise/components";
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames5 = __toESM(require_classnames());
 import { InlineAlert as InlineAlert2 } from "@transferwise/components";
-import { jsx as jsx65, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs16 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
   children,
@@ -3836,7 +3871,7 @@ function UploadFieldInput({
   const labelContent = label && help ? /* @__PURE__ */ jsx65(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
   const { ref } = useScrollToError(validation, features);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref,
@@ -3923,10 +3958,10 @@ var MultiUploadInputRenderer = {
             "aria-describedby": descriptionId,
             description,
             disabled,
-            files: value.map(({ id: id2, file, validationState: validationState2 }) => ({
-              id: id2,
+            files: value.map(({ id: fileId, file, validationState: fileValidationState }) => ({
+              id: fileId,
               filename: file.name,
-              status: (validationState2 == null ? void 0 : validationState2.status) === "invalid" ? Status.FAILED : Status.SUCCEEDED
+              status: (fileValidationState == null ? void 0 : fileValidationState.status) === "invalid" ? Status.FAILED : Status.SUCCEEDED
             })),
             fileTypes: acceptsToFileTypes(accepts),
             maxFiles: maxItems,
@@ -4022,7 +4057,7 @@ var paragraph_messages_default = defineMessages8({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { jsx as jsx68, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs17 } from "react/jsx-runtime";
 var ParagraphRenderer = {
   canRenderType: "paragraph",
   render: (props) => /* @__PURE__ */ jsx68(Paragraph, __spreadValues({}, props))
@@ -4049,7 +4084,7 @@ function CopyableParagraph({
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ jsxs16("div", { className, children: [
+  return /* @__PURE__ */ jsxs17("div", { className, children: [
     /* @__PURE__ */ jsx68(
       Input4,
       {
@@ -4091,7 +4126,7 @@ var ProgressRenderer = {
 var import_classnames7 = __toESM(require_classnames());
 import { Button as Button8, Header as Header6, InlineAlert as InlineAlert3, Modal as Modal4, NavigationOption } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { useIntl as useIntl10 } from "react-intl";
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -4120,7 +4155,7 @@ var repeatable_messages_default = defineMessages9({
 });
 
 // ../renderers/src/RepeatableRenderer.tsx
-import { Fragment as Fragment7, jsx as jsx70, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx70, jsxs as jsxs18 } from "react/jsx-runtime";
 var RepeatableRenderer = {
   canRenderType: "repeatable",
   render: (props) => /* @__PURE__ */ jsx70(Repeatable, __spreadValues({}, props))
@@ -4141,7 +4176,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = useIntl10();
-  const [openModalType, setOpenModalType] = useState11(null);
+  const [openModalType, setOpenModalType] = useState12(null);
   const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
@@ -4164,11 +4199,11 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ jsxs17(Fragment7, { children: [
-    /* @__PURE__ */ jsxs17("div", { ref, children: [
+  return /* @__PURE__ */ jsxs18(Fragment8, { children: [
+    /* @__PURE__ */ jsxs18("div", { ref, children: [
       title && /* @__PURE__ */ jsx70(Header6, { title }),
       description && /* @__PURE__ */ jsx70("p", { children: description }),
-      /* @__PURE__ */ jsxs17(
+      /* @__PURE__ */ jsxs18(
         "div",
         {
           className: (0, import_classnames7.default)("form-group", {
@@ -4195,9 +4230,9 @@ function Repeatable(props) {
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ jsxs17(Fragment7, { children: [
+        body: /* @__PURE__ */ jsxs18(Fragment8, { children: [
           /* @__PURE__ */ jsx70("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsxs18("div", { children: [
             /* @__PURE__ */ jsx70(Button8, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
             /* @__PURE__ */ jsx70(
               Button8,
@@ -4237,12 +4272,12 @@ var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/ReviewLegacyRenderer.tsx
 import { DefinitionList } from "@transferwise/components";
-import { Fragment as Fragment8, jsx as jsx71, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs19 } from "react/jsx-runtime";
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title, trackEvent }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs19("div", { className: getMargin(margin), children: [
       /* @__PURE__ */ jsx71(Header, { title, callToAction }),
       /* @__PURE__ */ jsx71("div", { className: margin, children: /* @__PURE__ */ jsx71(
         DefinitionList,
@@ -4282,7 +4317,7 @@ var mapControlToDefinitionListLayout = (control) => {
 };
 var getFieldLabel = (label, help, onClick) => {
   if (help) {
-    return /* @__PURE__ */ jsxs18(Fragment8, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment9, { children: [
       label,
       " ",
       /* @__PURE__ */ jsx71(Help_default, { help, onClick })
@@ -4295,7 +4330,7 @@ var getFieldLabel = (label, help, onClick) => {
 import { ListItem as ListItem10, Markdown as Markdown4, Popover } from "@transferwise/components";
 import { QuestionMarkCircle } from "@transferwise/icons";
 import { useIntl as useIntl11 } from "react-intl";
-import { jsx as jsx72, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs20 } from "react/jsx-runtime";
 var IGNORED_CONTROLS = [
   "horizontal",
   "horizontal-end-aligned",
@@ -4317,7 +4352,7 @@ var Review = ({
   trackEvent
 }) => {
   const intl = useIntl11();
-  return /* @__PURE__ */ jsxs19("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs20("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx72(Header, { title, callToAction }),
     fields.map((field) => {
       var _a, _b, _c;
@@ -4363,7 +4398,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Input as Input5, InputGroup as InputGroup4, List, ListItem as ListItem11, Markdown as Markdown5 } from "@transferwise/components";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { useIntl as useIntl13 } from "react-intl";
 
 // ../renderers/src/messages/search.messages.ts
@@ -4400,20 +4435,20 @@ var generic_error_messages_default = defineMessages11({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-import { Link } from "@transferwise/components";
-import { jsx as jsx73, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Link as DSLink2 } from "@transferwise/components";
+import { jsx as jsx73, jsxs as jsxs21 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
   const intl = useIntl12();
-  return /* @__PURE__ */ jsxs20("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ jsxs21("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
-    /* @__PURE__ */ jsx73(Link, { onClick: () => state.onRetry(), children: intl.formatMessage(generic_error_messages_default.retry) })
+    /* @__PURE__ */ jsx73(DSLink2, { onClick: () => state.onRetry(), children: intl.formatMessage(generic_error_messages_default.retry) })
   ] });
 }
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Search as Search2 } from "@transferwise/icons";
-import { Fragment as Fragment9, jsx as jsx74, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx74, jsxs as jsxs22 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   hint,
@@ -4426,9 +4461,9 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = useState12(false);
+  const [hasSearched, setHasSearched] = useState13(false);
   const { formatMessage } = useIntl13();
-  return /* @__PURE__ */ jsxs21("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs22("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx74(
       FieldInput_default,
       {
@@ -4444,6 +4479,7 @@ function BlockSearchRendererComponent({
             id,
             name: id,
             placeholder: hint,
+            shape: "pill",
             type: "text",
             value: query,
             onChange: ({ currentTarget: { value } }) => {
@@ -4470,7 +4506,7 @@ function SearchResultContent({
     case "results":
       return /* @__PURE__ */ jsx74(SearchResults, { state, trackEvent });
     case "layout":
-      return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+      return /* @__PURE__ */ jsxs22(Fragment10, { children: [
         " ",
         state.layout,
         " "
@@ -4518,7 +4554,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 import { Markdown as Markdown6, Typeahead } from "@transferwise/components";
 import { Search as Search3 } from "@transferwise/icons";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 import { jsx as jsx75 } from "react/jsx-runtime";
 function InlineSearchRenderer({
@@ -4532,7 +4568,7 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = useState13(false);
+  const [hasSearched, setHasSearched] = useState14(false);
   const intl = useIntl14();
   return /* @__PURE__ */ jsx75("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx75(
     FieldInput_default,
@@ -4642,11 +4678,11 @@ var getHeaderAction2 = (callToAction) => {
 };
 
 // ../renderers/src/SectionRenderer.tsx
-import { jsx as jsx77, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs23 } from "react/jsx-runtime";
 var SectionRenderer = {
   canRenderType: "section",
   render: ({ children, callToAction, margin, title }) => {
-    return /* @__PURE__ */ jsxs22("section", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs23("section", { className: getMargin(margin), children: [
       (title || callToAction) && /* @__PURE__ */ jsx77(Header7, { title: title != null ? title : "", action: getHeaderAction2(callToAction) }),
       children
     ] });
@@ -4656,7 +4692,7 @@ var SectionRenderer_default = SectionRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
 import { RadioGroup } from "@transferwise/components";
-import { Fragment as Fragment10, jsx as jsx78, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs24 } from "react/jsx-runtime";
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -4671,7 +4707,7 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs23(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment11, { children: [
     /* @__PURE__ */ jsx78(
       FieldInput_default,
       {
@@ -4705,8 +4741,8 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect11 } from "react";
-import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect12 } from "react";
+import { Fragment as Fragment12, jsx as jsx79, jsxs as jsxs25 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -4721,12 +4757,12 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs24(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs25(Fragment12, { children: [
     /* @__PURE__ */ jsx79(
       FieldInput_default,
       {
@@ -4745,7 +4781,7 @@ function TabInputRendererComponent(props) {
               title: option.title,
               // if we pass null, we get some props-types console errors
               // eslint-disable-next-line react/jsx-no-useless-fragment
-              content: /* @__PURE__ */ jsx79(Fragment11, {}),
+              content: /* @__PURE__ */ jsx79(Fragment12, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -4760,7 +4796,7 @@ var isValidIndex2 = (index, options) => index !== null && index >= 0 && index <
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 import { SelectInput as SelectInput2, SelectInputOptionContent as SelectInputOptionContent2 } from "@transferwise/components";
-import { Fragment as Fragment12, jsx as jsx80, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx80, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectInputRendererComponent(props) {
   const {
     id,
@@ -4806,7 +4842,7 @@ function SelectInputRendererComponent(props) {
     return /* @__PURE__ */ jsx80(SelectInputOptionContent2, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ jsxs25(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
     /* @__PURE__ */ jsx80(
       FieldInput_default,
       {
@@ -4837,9 +4873,9 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { SegmentedControl } from "@transferwise/components";
-import { Fragment as Fragment13, jsx as jsx81, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx81, jsxs as jsxs27 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
   const {
     id,
@@ -4853,12 +4889,12 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect12(() => {
+  useEffect13(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
     /* @__PURE__ */ jsx81(
       FieldInput_default,
       {
@@ -4892,7 +4928,7 @@ var isValidIndex3 = (index, options) => index !== null && index >= 0 && index <
 
 // ../renderers/src/SelectInputRenderer/RadioItemRendererComponent.tsx
 import { Header as Header8, InlineAlert as InlineAlert4, List as List2, ListItem as ListItem12 } from "@transferwise/components";
-import { jsx as jsx82, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs28 } from "react/jsx-runtime";
 function RadioItemRendererComponent(props) {
   const {
     id,
@@ -4908,7 +4944,7 @@ function RadioItemRendererComponent(props) {
     onSelect
   } = props;
   const { ref } = useScrollToError(validationState, features);
-  return /* @__PURE__ */ jsxs27("div", { ref, children: [
+  return /* @__PURE__ */ jsxs28("div", { ref, children: [
     rootTitle && /* @__PURE__ */ jsx82(
       Header8,
       {
@@ -4968,10 +5004,10 @@ var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
 import { AvatarView as AvatarView4, Header as Header9, ListItem as ListItem13 } from "@transferwise/components";
-import { jsx as jsx84, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs29 } from "react/jsx-runtime";
 var StatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title }) => /* @__PURE__ */ jsxs28("div", { className: getMargin(margin), children: [
+  render: ({ margin, items, title }) => /* @__PURE__ */ jsxs29("div", { className: getMargin(margin), children: [
     title ? /* @__PURE__ */ jsx84(Header9, { title }) : null,
     items.map((item) => {
       const { callToAction, description, title: itemTitle } = item;
@@ -5021,12 +5057,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect13, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo2 } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = useTheme();
   const previousTheme = useMemo2(() => theming.theme, []);
-  useEffect13(() => {
+  useEffect14(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -5039,10 +5075,10 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepHeader.tsx
 import { Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment14, jsx as jsx85, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx85, jsxs as jsxs30 } from "react/jsx-runtime";
 var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs29(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment15, { children: [
     title ? /* @__PURE__ */ jsx85(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
     description ? /* @__PURE__ */ jsx85("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
@@ -5070,10 +5106,10 @@ var back_messages_default = defineMessages12({
 });
 
 // ../renderers/src/step/topbar/BackButton.tsx
-import { jsx as jsx86, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs31 } from "react/jsx-runtime";
 function BackButton({ title, onClick }) {
   const { formatMessage } = useIntl15();
-  return /* @__PURE__ */ jsxs30(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
+  return /* @__PURE__ */ jsxs31(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
     /* @__PURE__ */ jsx86("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
     /* @__PURE__ */ jsx86(ArrowLeft, {})
   ] });
@@ -5081,7 +5117,7 @@ function BackButton({ title, onClick }) {
 
 // ../renderers/src/step/topbar/Toolbar.tsx
 import { Button as Button9, IconButton as IconButton2 } from "@transferwise/components";
-import { jsx as jsx87, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs32 } from "react/jsx-runtime";
 var Toolbar = ({ items }) => {
   return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ jsx87("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ jsx87(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
 };
@@ -5093,7 +5129,7 @@ function MediaToolbarButton(props) {
   const { context, control, media, accessibilityDescription, disabled, onClick } = props;
   const priority = getIconButtonPriority(control);
   const type = getSentiment2(context);
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     IconButton2,
     {
       className: "df-toolbar-button",
@@ -5144,18 +5180,18 @@ var getIconButtonPriority = (control) => {
 };
 
 // ../renderers/src/step/topbar/TopBar.tsx
-import { jsx as jsx88, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
 function TopBar({ back, toolbar, tags }) {
   const isBackAllowed = !(tags == null ? void 0 : tags.includes("non-dismissible"));
   const backCTA = isBackAllowed ? back : void 0;
-  return backCTA || toolbar ? /* @__PURE__ */ jsxs32("div", { className: "d-flex m-b-2", children: [
+  return backCTA || toolbar ? /* @__PURE__ */ jsxs33("div", { className: "d-flex m-b-2", children: [
     backCTA ? /* @__PURE__ */ jsx88(BackButton, __spreadValues({}, backCTA)) : null,
     toolbar ? /* @__PURE__ */ jsx88(Toolbar, __spreadValues({}, toolbar)) : null
   ] }) : null;
 }
 
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-import { jsx as jsx89, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs34 } from "react/jsx-runtime";
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
@@ -5164,7 +5200,7 @@ var SplashCelebrationStepRenderer = {
 function SplashCelebrationStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  return /* @__PURE__ */ jsxs33("div", { className: "splash-screen m-t-5", children: [
+  return /* @__PURE__ */ jsxs34("div", { className: "splash-screen m-t-5", children: [
     /* @__PURE__ */ jsx89(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx89("div", { className: "m-b-4", children: /* @__PURE__ */ jsx89(StepHeader, { title, description, tags }) }) : void 0,
     children,
@@ -5173,7 +5209,7 @@ function SplashCelebrationStepRendererComponent(props) {
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-import { jsx as jsx90, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs35 } from "react/jsx-runtime";
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
@@ -5181,7 +5217,7 @@ var SplashStepRenderer = {
 };
 function SplashStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags } = props;
-  return /* @__PURE__ */ jsxs34("div", { className: "splash-screen m-t-5", children: [
+  return /* @__PURE__ */ jsxs35("div", { className: "splash-screen m-t-5", children: [
     /* @__PURE__ */ jsx90(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx90("div", { className: "m-b-4", children: /* @__PURE__ */ jsx90(StepHeader, { title, description, tags }) }) : void 0,
     children,
@@ -5191,14 +5227,14 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2 } from "@transferwise/components";
-import { jsx as jsx91, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs36 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
   const { back, description, error, title, children, toolbar, footer, tags } = props;
-  return /* @__PURE__ */ jsxs35("div", { children: [
+  return /* @__PURE__ */ jsxs36("div", { children: [
     /* @__PURE__ */ jsx91(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx91("div", { className: "m-b-4", children: /* @__PURE__ */ jsx91(StepHeader, { title, description, tags }) }) : void 0,
     error ? /* @__PURE__ */ jsx91(Alert2, { type: "negative", className: "m-b-2", message: error }) : null,
@@ -5209,8 +5245,8 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 import { Chips as Chips2, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
-import { useState as useState14 } from "react";
-import { jsx as jsx92, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx92, jsxs as jsxs37 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
   render: (props) => {
@@ -5228,7 +5264,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = useState14(0);
+  const [selectedIndex, setSelectedIndex] = useState15(0);
   return /* @__PURE__ */ jsx92("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx92(
     Tabs2,
     {
@@ -5237,7 +5273,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
       tabs: tabs.map((option) => ({
         title: option.title,
         disabled: false,
-        content: /* @__PURE__ */ jsxs36("div", { className: "m-t-2", children: [
+        content: /* @__PURE__ */ jsxs37("div", { className: "m-t-2", children: [
           " ",
           option.children,
           " "
@@ -5249,8 +5285,8 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState14(0);
-  return /* @__PURE__ */ jsxs36("div", { className: getMargin(margin), children: [
+  const [selectedIndex, setSelectedIndex] = useState15(0);
+  return /* @__PURE__ */ jsxs37("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx92(
       SegmentedControl2,
       {
@@ -5271,8 +5307,8 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState14(0);
-  return /* @__PURE__ */ jsxs36("div", { className: getMargin(margin), children: [
+  const [selectedIndex, setSelectedIndex] = useState15(0);
+  return /* @__PURE__ */ jsxs37("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx92("div", { className: "chips-container", children: /* @__PURE__ */ jsx92(
       Chips2,
       {
@@ -5532,7 +5568,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 import { Nudge } from "@transferwise/components";
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { jsx as jsx96 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -5540,7 +5576,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = useState15(true);
+  const [isVisible, setIsVisible] = useState16(true);
   return isVisible ? /* @__PURE__ */ jsx96(
     Nudge,
     {
@@ -5907,13 +5943,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsxs as jsxs38 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = useDynamicFlow(dfProps);
   const { onContextMenu, contextMenu } = useDFContextMenu(df.controller);
-  return /* @__PURE__ */ jsxs37("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs38("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });