@wise/dynamic-flow-client-internal 5.23.0 → 5.23.2

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.23.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.23.2" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -356,7 +356,7 @@ var AlertRenderer = {
   render: ({ context, markdown, margin, callToAction }) => /* @__PURE__ */ jsx2(
     Alert,
     {
-      type: context,
+      type: mapAlertType(context),
       className: getMargin(margin),
       message: markdown,
       action: mapCtaToAlertAction(callToAction)
@@ -372,6 +372,7 @@ var mapCtaToAlertAction = (callToAction) => {
   }
   return void 0;
 };
+var mapAlertType = (context) => context !== "proposition" ? context : "neutral";
 var AlertRenderer_default = AlertRenderer;
 
 // ../renderers/src/BoxRenderer.tsx
@@ -642,7 +643,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 +724,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 +915,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 })
   ] });
@@ -1125,7 +1129,7 @@ var useIsCollapsed = () => {
 };
 
 // ../renderers/src/ColumnsRenderer.tsx
-import { jsx as jsx24, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
 var RIGHT_FIRST_STACKING = "right-first-stacking";
 var ColumnsRenderer = {
   canRenderType: "columns",
@@ -1143,7 +1147,7 @@ function ColumnsRendererComponent({
   const reverse = isCollapsed && ((_a = tags == null ? void 0 : tags.includes(RIGHT_FIRST_STACKING)) != null ? _a : false);
   const startColumn = /* @__PURE__ */ jsx24("div", { className: "df-columns-renderer-column", children: startChildren });
   const endColumn = /* @__PURE__ */ jsx24("div", { className: "df-columns-renderer-column", children: endChildren });
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: (0, import_classnames3.default)("df-columns-renderer-container", getMargin(margin), {
@@ -1422,7 +1426,7 @@ var getGroupsFromTags = (knownTags, items) => {
 };
 
 // ../renderers/src/DecisionRenderer/GroupedDecisionList.tsx
-import { Fragment, jsx as jsx28, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
 var groupingTags = Object.keys(group_messages_default).filter((key) => key !== "all");
 var isGroupedDecision = (options) => {
   return getGroupsFromTags(groupingTags, options).length > 0;
@@ -1432,7 +1436,7 @@ var GroupedDecisionList = (_a) => {
   const { formatMessage } = useIntl3();
   const { options } = rest;
   const itemsByTag = [...getGroupsFromTags(groupingTags, options), { tag: "all", items: options }];
-  return /* @__PURE__ */ jsx28(Fragment, { children: itemsByTag.map(({ tag, items }) => /* @__PURE__ */ jsxs5(Section, { children: [
+  return /* @__PURE__ */ jsx28(Fragment2, { children: itemsByTag.map(({ tag, items }) => /* @__PURE__ */ jsxs6(Section, { children: [
     /* @__PURE__ */ jsx28(
       Header,
       {
@@ -1445,9 +1449,9 @@ var GroupedDecisionList = (_a) => {
 };
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs7 } from "react/jsx-runtime";
 var DecisionWrapper = (props) => {
-  return /* @__PURE__ */ jsxs6("div", { className: getMargin(props.margin), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: getMargin(props.margin), children: [
     props.title && /* @__PURE__ */ jsx29(Header2, { as: "h2", title: props.title }),
     props.control === "filtered" ? /* @__PURE__ */ jsx29(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsx29(UnfilteredDecisionList, __spreadValues({}, props))
   ] });
@@ -1462,7 +1466,7 @@ var FilteredDecisionList = (props) => {
   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__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
     /* @__PURE__ */ jsx29(
       SearchInput,
       {
@@ -1475,7 +1479,7 @@ var FilteredDecisionList = (props) => {
         }
       }
     ),
-    isGrouped && query.length === 0 ? /* @__PURE__ */ jsx29(GroupedDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    isGrouped && query.length === 0 ? /* @__PURE__ */ jsx29(GroupedDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
       query.length > 0 && /* @__PURE__ */ jsx29(Header2, { as: "h2", title: formatMessage(filter_messages_default.results), className: "m-t-4" }),
       filteredOptions.length > 0 ? renderDecisionList2({
         control,
@@ -1487,13 +1491,13 @@ var FilteredDecisionList = (props) => {
 };
 
 // ../renderers/src/DecisionRenderer/DecisionRenderer.tsx
-import { Fragment as Fragment3, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30 } from "react/jsx-runtime";
 var DecisionRenderer = {
   canRenderType: "decision",
   render: (props) => /* @__PURE__ */ jsx30(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList }))
 };
 var renderDecisionList = ({ options, control }) => {
-  return /* @__PURE__ */ jsx30(Fragment3, { children: options.map((_a) => {
+  return /* @__PURE__ */ jsx30(Fragment4, { children: options.map((_a) => {
     var _b = _a, { onClick } = _b, rest = __objRest(_b, ["onClick"]);
     const {
       description,
@@ -1576,7 +1580,7 @@ var external_confirmation_messages_default = defineMessages5({
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl5 } from "react-intl";
 import { useEffect as useEffect6 } from "react";
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
   render: ExternalConfirmationRendererComponent
@@ -1596,9 +1600,9 @@ function ExternalConfirmationRendererComponent({
     {
       open: visible,
       title: formatMessage(external_confirmation_messages_default.title),
-      body: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      body: /* @__PURE__ */ jsxs8(Fragment5, { children: [
         /* @__PURE__ */ jsx32(Markdown2, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(url) }) }),
-        /* @__PURE__ */ jsx32("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs7("div", { className: "df-box-renderer-width-lg", children: [
+        /* @__PURE__ */ jsx32("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs8("div", { className: "df-box-renderer-width-lg", children: [
           /* @__PURE__ */ jsx32(
             Button3,
             {
@@ -1639,10 +1643,10 @@ var FormRenderer_default = FormRenderer;
 
 // ../renderers/src/FormSectionRenderer.tsx
 import { Header as Header3 } from "@transferwise/components";
-import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs9 } from "react/jsx-runtime";
 var FormSectionRenderer = {
   canRenderType: "form-section",
-  render: ({ title, description, children }) => /* @__PURE__ */ jsxs8("fieldset", { children: [
+  render: ({ title, description, children }) => /* @__PURE__ */ jsxs9("fieldset", { children: [
     title && /* @__PURE__ */ jsx34(
       Header3,
       {
@@ -1793,7 +1797,7 @@ import { useState as useState7 } 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
@@ -1897,7 +1901,7 @@ var ImageRenderer_default = ImageRenderer;
 
 // ../renderers/src/InstructionsRenderer.tsx
 import { Header as Header4, InstructionsList } from "@transferwise/components";
-import { jsx as jsx42, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs10 } from "react/jsx-runtime";
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
 var InstructionsRenderer = {
@@ -1905,7 +1909,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__ */ jsxs9("div", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs10("div", { className: getMargin(margin), children: [
       title ? /* @__PURE__ */ jsx42(Header4, { title }) : null,
       /* @__PURE__ */ jsx42(InstructionsList, { dos, donts })
     ] });
@@ -2032,10 +2036,10 @@ var getHeaderAction = (callToAction) => {
 };
 
 // ../renderers/src/ListRenderer.tsx
-import { jsx as jsx46, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs11 } from "react/jsx-runtime";
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ jsxs10("div", { className: getMargin(margin), children: [
+  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ jsxs11("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx46(Header5, { title, callToAction }),
     items.map((item) => {
       var _a, _b;
@@ -2158,7 +2162,7 @@ var mapAvatarMediaSize = (size) => {
 // ../renderers/src/ModalLayoutRenderer.tsx
 import { Button as Button4, Modal as Modal2 } from "@transferwise/components";
 import { useState as useState8 } from "react";
-import { jsx as jsx50, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs12 } from "react/jsx-runtime";
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
   render: (props) => /* @__PURE__ */ jsx50(DFModal, __spreadValues({}, props))
@@ -2167,7 +2171,7 @@ var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = useState8(false);
   const { children, title } = content;
-  return /* @__PURE__ */ jsxs11("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx50(Button4, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ jsx50(
       Modal2,
@@ -2544,7 +2548,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 jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs13 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
   children,
@@ -2557,7 +2561,7 @@ function UploadFieldInput({
   const labelContent = label && help ? /* @__PURE__ */ jsx57(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
   const { ref } = useScrollToError(validation, features);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       ref,
@@ -2644,10 +2648,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,
@@ -2743,7 +2747,7 @@ var paragraph_messages_default = defineMessages7({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { jsx as jsx60, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs14 } from "react/jsx-runtime";
 var ParagraphRenderer = {
   canRenderType: "paragraph",
   render: (props) => /* @__PURE__ */ jsx60(Paragraph, __spreadValues({}, props))
@@ -2770,7 +2774,7 @@ function CopyableParagraph({
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ jsxs13("div", { className, children: [
+  return /* @__PURE__ */ jsxs14("div", { className, children: [
     /* @__PURE__ */ jsx60(
       Input3,
       {
@@ -2841,7 +2845,7 @@ var repeatable_messages_default = defineMessages8({
 });
 
 // ../renderers/src/RepeatableRenderer.tsx
-import { Fragment as Fragment5, jsx as jsx62, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs15 } from "react/jsx-runtime";
 var RepeatableRenderer = {
   canRenderType: "repeatable",
   render: (props) => /* @__PURE__ */ jsx62(Repeatable, __spreadValues({}, props))
@@ -2885,11 +2889,11 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    /* @__PURE__ */ jsxs14("div", { ref, children: [
+  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+    /* @__PURE__ */ jsxs15("div", { ref, children: [
       title && /* @__PURE__ */ jsx62(Header6, { title }),
       description && /* @__PURE__ */ jsx62("p", { children: description }),
-      /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs15(
         "div",
         {
           className: (0, import_classnames7.default)("form-group", {
@@ -2916,9 +2920,9 @@ function Repeatable(props) {
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ jsxs14(Fragment5, { children: [
+        body: /* @__PURE__ */ jsxs15(Fragment6, { children: [
           /* @__PURE__ */ jsx62("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsxs15("div", { children: [
             /* @__PURE__ */ jsx62(Button6, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
             /* @__PURE__ */ jsx62(
               Button6,
@@ -2958,12 +2962,12 @@ var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/ReviewLegacyRenderer.tsx
 import { DefinitionList } from "@transferwise/components";
-import { Fragment as Fragment6, jsx as jsx63, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx63, jsxs as jsxs16 } from "react/jsx-runtime";
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title, trackEvent }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    return /* @__PURE__ */ jsxs15("div", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs16("div", { className: getMargin(margin), children: [
       /* @__PURE__ */ jsx63(Header5, { title, callToAction }),
       /* @__PURE__ */ jsx63("div", { className: margin, children: /* @__PURE__ */ jsx63(
         DefinitionList,
@@ -3003,7 +3007,7 @@ var mapControlToDefinitionListLayout = (control) => {
 };
 var getFieldLabel = (label, help, onClick) => {
   if (help) {
-    return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs16(Fragment7, { children: [
       label,
       " ",
       /* @__PURE__ */ jsx63(Help_default, { help, onClick })
@@ -3016,7 +3020,7 @@ var getFieldLabel = (label, help, onClick) => {
 import { ListItem as ListItem9, Markdown as Markdown4, Popover } from "@transferwise/components";
 import { QuestionMarkCircle } from "@transferwise/icons";
 import { useIntl as useIntl10 } from "react-intl";
-import { jsx as jsx64, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs17 } from "react/jsx-runtime";
 var IGNORED_CONTROLS = [
   "horizontal",
   "horizontal-end-aligned",
@@ -3038,7 +3042,7 @@ var Review = ({
   trackEvent
 }) => {
   const intl = useIntl10();
-  return /* @__PURE__ */ jsxs16("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs17("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx64(Header5, { title, callToAction }),
     fields.map((field) => {
       var _a, _b, _c;
@@ -3121,20 +3125,20 @@ var generic_error_messages_default = defineMessages10({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-import { Link } from "@transferwise/components";
-import { jsx as jsx65, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Link as DSLink } from "@transferwise/components";
+import { jsx as jsx65, jsxs as jsxs18 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
   const intl = useIntl11();
-  return /* @__PURE__ */ jsxs17("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ jsxs18("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
-    /* @__PURE__ */ jsx65(Link, { onClick: () => state.onRetry(), children: intl.formatMessage(generic_error_messages_default.retry) })
+    /* @__PURE__ */ jsx65(DSLink, { onClick: () => state.onRetry(), children: intl.formatMessage(generic_error_messages_default.retry) })
   ] });
 }
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Search } from "@transferwise/icons";
-import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs19 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   hint,
@@ -3149,7 +3153,7 @@ function BlockSearchRendererComponent({
 }) {
   const [hasSearched, setHasSearched] = useState11(false);
   const { formatMessage } = useIntl12();
-  return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs19("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx66(
       FieldInput_default,
       {
@@ -3165,6 +3169,7 @@ function BlockSearchRendererComponent({
             id,
             name: id,
             placeholder: hint,
+            shape: "pill",
             type: "text",
             value: query,
             onChange: ({ currentTarget: { value } }) => {
@@ -3191,7 +3196,7 @@ function SearchResultContent({
     case "results":
       return /* @__PURE__ */ jsx66(SearchResults, { state, trackEvent });
     case "layout":
-      return /* @__PURE__ */ jsxs18(Fragment7, { children: [
+      return /* @__PURE__ */ jsxs19(Fragment8, { children: [
         " ",
         state.layout,
         " "
@@ -3363,11 +3368,11 @@ var getHeaderAction2 = (callToAction) => {
 };
 
 // ../renderers/src/SectionRenderer.tsx
-import { jsx as jsx69, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs20 } from "react/jsx-runtime";
 var SectionRenderer = {
   canRenderType: "section",
   render: ({ children, callToAction, margin, title }) => {
-    return /* @__PURE__ */ jsxs19("section", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs20("section", { className: getMargin(margin), children: [
       (title || callToAction) && /* @__PURE__ */ jsx69(Header7, { title: title != null ? title : "", action: getHeaderAction2(callToAction) }),
       children
     ] });
@@ -3377,7 +3382,7 @@ var SectionRenderer_default = SectionRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
 import { RadioGroup } from "@transferwise/components";
-import { Fragment as Fragment8, jsx as jsx70, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx70, jsxs as jsxs21 } from "react/jsx-runtime";
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -3392,7 +3397,7 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
     /* @__PURE__ */ jsx70(
       FieldInput_default,
       {
@@ -3427,7 +3432,7 @@ function RadioInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
 import { useEffect as useEffect9 } from "react";
-import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx71, jsxs as jsxs22 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -3447,7 +3452,7 @@ function TabInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
     /* @__PURE__ */ jsx71(
       FieldInput_default,
       {
@@ -3466,7 +3471,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__ */ jsx71(Fragment9, {}),
+              content: /* @__PURE__ */ jsx71(Fragment10, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -3481,7 +3486,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 Fragment10, jsx as jsx72, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx72, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectInputRendererComponent(props) {
   const {
     id,
@@ -3527,7 +3532,7 @@ function SelectInputRendererComponent(props) {
     return /* @__PURE__ */ jsx72(SelectInputOptionContent2, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
     /* @__PURE__ */ jsx72(
       FieldInput_default,
       {
@@ -3560,7 +3565,7 @@ function SelectInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
 import { useEffect as useEffect10 } from "react";
 import { SegmentedControl } from "@transferwise/components";
-import { Fragment as Fragment11, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs24 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
   const {
     id,
@@ -3579,7 +3584,7 @@ function SegmentedInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
     /* @__PURE__ */ jsx73(
       FieldInput_default,
       {
@@ -3613,7 +3618,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 ListItem11 } from "@transferwise/components";
-import { jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs25 } from "react/jsx-runtime";
 function RadioItemRendererComponent(props) {
   const {
     id,
@@ -3629,7 +3634,7 @@ function RadioItemRendererComponent(props) {
     onSelect
   } = props;
   const { ref } = useScrollToError(validationState, features);
-  return /* @__PURE__ */ jsxs24("div", { ref, children: [
+  return /* @__PURE__ */ jsxs25("div", { ref, children: [
     rootTitle && /* @__PURE__ */ jsx74(
       Header8,
       {
@@ -3689,10 +3694,10 @@ var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
 import { AvatarView as AvatarView4, Header as Header9, ListItem as ListItem12 } from "@transferwise/components";
-import { jsx as jsx76, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs26 } from "react/jsx-runtime";
 var StatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title }) => /* @__PURE__ */ jsxs25("div", { className: getMargin(margin), children: [
+  render: ({ margin, items, title }) => /* @__PURE__ */ jsxs26("div", { className: getMargin(margin), children: [
     title ? /* @__PURE__ */ jsx76(Header9, { title }) : null,
     items.map((item) => {
       const { callToAction, description, title: itemTitle } = item;
@@ -3774,7 +3779,7 @@ var step_messages_default = defineMessages11({
 });
 
 // ../renderers/src/step/StepFooter.tsx
-import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs27 } 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)) {
@@ -3808,9 +3813,9 @@ var FooterWithScrollButton = ({ footer }) => {
   if (isElementVisible && !hasStepFooterContent) {
     return /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
   }
-  return /* @__PURE__ */ jsxs26(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment13, { children: [
     /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs26("div", { className: "df-step-fixed__footer", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "df-step-fixed__footer", children: [
       !isElementVisible && scrollButton,
       footer
     ] })
@@ -3832,10 +3837,10 @@ var useIsElementVisible = (elementRef) => {
 
 // ../renderers/src/step/StepHeader.tsx
 import { Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
 var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs27(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment14, { children: [
     title ? /* @__PURE__ */ jsx78(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
     description ? /* @__PURE__ */ jsx78("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
@@ -3863,10 +3868,10 @@ var back_messages_default = defineMessages12({
 });
 
 // ../renderers/src/step/topbar/BackButton.tsx
-import { jsx as jsx79, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
 function BackButton({ title, onClick }) {
   const { formatMessage } = useIntl15();
-  return /* @__PURE__ */ jsxs28(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
+  return /* @__PURE__ */ jsxs29(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
     /* @__PURE__ */ jsx79("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
     /* @__PURE__ */ jsx79(ArrowLeft, {})
   ] });
@@ -3874,7 +3879,7 @@ function BackButton({ title, onClick }) {
 
 // ../renderers/src/step/topbar/Toolbar.tsx
 import { Button as Button8, IconButton as IconButton2 } from "@transferwise/components";
-import { jsx as jsx80, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
 var Toolbar = ({ items }) => {
   return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ jsx80("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ jsx80(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
 };
@@ -3886,7 +3891,7 @@ function MediaToolbarButton(props) {
   const { context, control, media, accessibilityDescription, disabled, onClick } = props;
   const priority = getIconButtonPriority(control);
   const type = getSentiment2(context);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     IconButton2,
     {
       className: "df-toolbar-button",
@@ -3937,18 +3942,18 @@ var getIconButtonPriority = (control) => {
 };
 
 // ../renderers/src/step/topbar/TopBar.tsx
-import { jsx as jsx81, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs31 } 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__ */ jsxs30("div", { className: "d-flex m-b-2", children: [
+  return backCTA || toolbar ? /* @__PURE__ */ jsxs31("div", { className: "d-flex m-b-2", children: [
     backCTA ? /* @__PURE__ */ jsx81(BackButton, __spreadValues({}, backCTA)) : null,
     toolbar ? /* @__PURE__ */ jsx81(Toolbar, __spreadValues({}, toolbar)) : null
   ] }) : null;
 }
 
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-import { jsx as jsx82, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs32 } from "react/jsx-runtime";
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
@@ -3957,7 +3962,7 @@ var SplashCelebrationStepRenderer = {
 function SplashCelebrationStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  return /* @__PURE__ */ jsxs31("div", { className: "splash-screen m-t-5", children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "splash-screen m-t-5", children: [
     /* @__PURE__ */ jsx82(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx82("div", { className: "m-b-4", children: /* @__PURE__ */ jsx82(StepHeader, { title, description, tags }) }) : void 0,
     children,
@@ -3966,7 +3971,7 @@ function SplashCelebrationStepRendererComponent(props) {
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-import { jsx as jsx83, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
@@ -3974,7 +3979,7 @@ var SplashStepRenderer = {
 };
 function SplashStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags } = props;
-  return /* @__PURE__ */ jsxs32("div", { className: "splash-screen m-t-5", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "splash-screen m-t-5", children: [
     /* @__PURE__ */ jsx83(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx83("div", { className: "m-b-4", children: /* @__PURE__ */ jsx83(StepHeader, { title, description, tags }) }) : void 0,
     children,
@@ -3984,14 +3989,14 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2 } from "@transferwise/components";
-import { jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs34 } 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__ */ jsxs33("div", { children: [
+  return /* @__PURE__ */ jsxs34("div", { children: [
     /* @__PURE__ */ jsx84(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx84("div", { className: "m-b-4", children: /* @__PURE__ */ jsx84(StepHeader, { title, description, tags }) }) : void 0,
     error ? /* @__PURE__ */ jsx84(Alert2, { type: "negative", className: "m-b-2", message: error }) : null,
@@ -4003,7 +4008,7 @@ function StepRendererComponent(props) {
 // ../renderers/src/TabsRenderer.tsx
 import { Chips, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
 import { useState as useState14 } from "react";
-import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs35 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
   render: (props) => {
@@ -4030,7 +4035,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
       tabs: tabs.map((option) => ({
         title: option.title,
         disabled: false,
-        content: /* @__PURE__ */ jsxs34("div", { className: "m-t-2", children: [
+        content: /* @__PURE__ */ jsxs35("div", { className: "m-t-2", children: [
           " ",
           option.children,
           " "
@@ -4043,7 +4048,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = useState14(0);
-  return /* @__PURE__ */ jsxs34("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs35("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx85(
       SegmentedControl2,
       {
@@ -4065,7 +4070,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = useState14(0);
-  return /* @__PURE__ */ jsxs34("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs35("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx85("div", { className: "chips-container", children: /* @__PURE__ */ jsx85(
       Chips,
       {
@@ -4699,13 +4704,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsxs as jsxs36 } 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__ */ jsxs35("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs36("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });