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

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.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.24.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -191,7 +191,7 @@ var useDFContextMenu = (controller) => {
     if (!step) {
       return null;
     }
-    const model = await controller.getSubmittableValue();
+    const model = controller.getValue();
     return recursivelyRemoveNullish(__spreadProps(__spreadValues({}, step), { model }));
   };
   const getEncodedCurrentStep = () => {
@@ -1339,10 +1339,10 @@ var filter_messages_default = defineMessages3({
   }
 });
 
-// ../renderers/src/DecisionRenderer/filter-and-sort-decision-options.ts
-function filterAndSortDecisionOptions(selectOptions, query) {
+// ../renderers/src/utils/filter-and-sort-items.ts
+function filterAndSortItems(options, query) {
   const upperQuery = normalizeAndRemoveAccents(query);
-  const filteredItems = selectOptions.filter((option) => {
+  const filteredItems = options.filter((option) => {
     var _a, _b, _c, _d;
     const searchableWords = [
       option.title,
@@ -1451,9 +1451,10 @@ var GroupedDecisionList = (_a) => {
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs7 } from "react/jsx-runtime";
 var DecisionWrapper = (props) => {
-  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))
+  const { title, control, margin } = props;
+  return /* @__PURE__ */ jsxs7("div", { className: getMargin(margin), children: [
+    title && /* @__PURE__ */ jsx29(Header2, { as: "h2", title }),
+    control === "filtered" ? /* @__PURE__ */ jsx29(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsx29(UnfilteredDecisionList, __spreadValues({}, props))
   ] });
 };
 var UnfilteredDecisionList = (_a) => {
@@ -1464,7 +1465,7 @@ var FilteredDecisionList = (props) => {
   const { formatMessage } = useIntl4();
   const [query, setQuery] = useState5("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
-  const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortDecisionOptions(options, query) : options;
+  const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortItems(options, query) : options;
   const isGrouped = isGroupedDecision(options);
   return /* @__PURE__ */ jsxs7(Fragment3, { children: [
     /* @__PURE__ */ jsx29(
@@ -2299,8 +2300,17 @@ function assertCurrencyCodeIsString(currencyCode) {
 }
 
 // ../renderers/src/MultiSelectInputRenderer/InlineComponent.tsx
-import { ListItem as ListItem8 } from "@transferwise/components";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { ListItem as ListItem8, SearchInput as SearchInput2 } from "@transferwise/components";
+import { useState as useState9 } from "react";
+import { useIntl as useIntl7 } from "react-intl";
+
+// ../renderers/src/utils/items-with-index.ts
+var zipWithIndex = (items) => items.map((item, index) => __spreadProps(__spreadValues({}, item), {
+  index
+}));
+
+// ../renderers/src/MultiSelectInputRenderer/InlineComponent.tsx
+import { Fragment as Fragment6, jsx as jsx53, jsxs as jsxs13 } from "react/jsx-runtime";
 function InlineComponent(props) {
   const {
     id,
@@ -2310,65 +2320,87 @@ function InlineComponent(props) {
     help,
     options,
     selectedIndices,
+    tags,
     title,
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsx53(
-    FieldInput_default,
-    {
-      id,
-      label: title,
-      help,
-      description,
-      validation: validationState,
-      features,
-      children: options.map((option, index) => {
-        var _a;
-        const {
-          title: itemTitle,
-          description: subtitle,
-          disabled: optionDisabled,
-          media,
-          additionalText,
-          inlineAlert,
-          supportingValues,
-          childrenProps
-        } = option;
-        const key = (_a = childrenProps == null ? void 0 : childrenProps.uid) != null ? _a : index;
-        return /* @__PURE__ */ jsx53(
-          ListItem8,
-          {
+  const optionsWithIndex = zipWithIndex(options);
+  const [query, setQuery] = useState9("");
+  const { formatMessage } = useIntl7();
+  const filtered = tags == null ? void 0 : tags.includes("filtered");
+  const filteredOptions = query ? filterAndSortItems(optionsWithIndex, filtered ? query : "") : optionsWithIndex;
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    filtered && /* @__PURE__ */ jsx53(
+      SearchInput2,
+      {
+        placeholder: formatMessage(filter_messages_default.placeholder),
+        disabled,
+        value: query,
+        className: "m-b-2",
+        onChange: (e) => {
+          var _a;
+          return setQuery((_a = e.target.value) != null ? _a : "");
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx53(
+      FieldInput_default,
+      {
+        id,
+        label: title,
+        help,
+        description,
+        validation: validationState,
+        features,
+        children: filteredOptions.map((option) => {
+          var _a;
+          const {
             title: itemTitle,
-            subtitle,
-            valueTitle: supportingValues == null ? void 0 : supportingValues.value,
-            valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-            media: getMedia(media, false),
-            prompt: getInlineAlert(inlineAlert),
-            additionalInfo: additionalText ? /* @__PURE__ */ jsx53(ListItem8.AdditionalInfo, { children: additionalText }) : void 0,
-            disabled: disabled || optionDisabled,
-            control: /* @__PURE__ */ jsx53(
-              ListItem8.Checkbox,
-              {
-                checked: selectedIndices.includes(index),
-                onChange: (e) => {
-                  const newSelectedIndices = e.target.checked ? [...selectedIndices, index] : selectedIndices.filter((i) => i !== index);
-                  onSelect(newSelectedIndices);
+            description: subtitle,
+            disabled: optionDisabled,
+            media,
+            index,
+            additionalText,
+            inlineAlert,
+            supportingValues,
+            childrenProps
+          } = option;
+          const key = (_a = childrenProps == null ? void 0 : childrenProps.uid) != null ? _a : index;
+          return /* @__PURE__ */ jsx53(
+            ListItem8,
+            {
+              title: itemTitle,
+              subtitle,
+              valueTitle: supportingValues == null ? void 0 : supportingValues.value,
+              valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
+              media: getMedia(media, false),
+              prompt: getInlineAlert(inlineAlert),
+              additionalInfo: additionalText ? /* @__PURE__ */ jsx53(ListItem8.AdditionalInfo, { children: additionalText }) : void 0,
+              disabled: disabled || optionDisabled,
+              control: /* @__PURE__ */ jsx53(
+                ListItem8.Checkbox,
+                {
+                  checked: selectedIndices.includes(index),
+                  onChange: (e) => {
+                    const newSelectedIndices = e.target.checked ? [...selectedIndices, index] : selectedIndices.filter((i) => i !== index);
+                    onSelect(newSelectedIndices);
+                  }
                 }
-              }
-            )
-          },
-          key
-        );
-      })
-    }
-  );
+              )
+            },
+            key
+          );
+        })
+      }
+    )
+  ] });
 }
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
-import { useState as useState9 } from "react";
-import { useIntl as useIntl7 } from "react-intl";
+import { useState as useState10 } from "react";
+import { useIntl as useIntl8 } from "react-intl";
 
 // ../renderers/src/messages/multi-select.messages.ts
 import { defineMessages as defineMessages6 } from "react-intl";
@@ -2383,8 +2415,8 @@ var multi_select_messages_default = defineMessages6({
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
 function DefaultComponent(props) {
-  const { formatMessage } = useIntl7();
-  const [stagedIndices, setStagedIndices] = useState9();
+  const { formatMessage } = useIntl8();
+  const [stagedIndices, setStagedIndices] = useState10();
   const {
     id,
     autoComplete,
@@ -2548,7 +2580,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 jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs14 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
   children,
@@ -2561,7 +2593,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__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref,
@@ -2716,7 +2748,7 @@ var NumberInputRenderer = {
 var NumberInputRenderer_default = NumberInputRenderer;
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { useIntl as useIntl8 } from "react-intl";
+import { useIntl as useIntl9 } from "react-intl";
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 import { SnackbarContext } from "@transferwise/components";
@@ -2747,7 +2779,7 @@ var paragraph_messages_default = defineMessages7({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { jsx as jsx60, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs15 } from "react/jsx-runtime";
 var ParagraphRenderer = {
   canRenderType: "paragraph",
   render: (props) => /* @__PURE__ */ jsx60(Paragraph, __spreadValues({}, props))
@@ -2767,14 +2799,14 @@ function CopyableParagraph({
   align,
   className
 }) {
-  const { formatMessage } = useIntl8();
+  const { formatMessage } = useIntl9();
   const createSnackbar = useSnackBarIfAvailable();
   const copy = () => {
     navigator.clipboard.writeText(text).then(() => createSnackbar({ text: formatMessage(paragraph_messages_default.copied) })).catch(() => {
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ jsxs14("div", { className, children: [
+  return /* @__PURE__ */ jsxs15("div", { className, children: [
     /* @__PURE__ */ jsx60(
       Input3,
       {
@@ -2816,8 +2848,8 @@ var ProgressRenderer = {
 var import_classnames7 = __toESM(require_classnames());
 import { Button as Button6, Header as Header6, InlineAlert as InlineAlert3, Modal as Modal4, NavigationOption } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
-import { useState as useState10 } from "react";
-import { useIntl as useIntl9 } from "react-intl";
+import { useState as useState11 } from "react";
+import { useIntl as useIntl10 } from "react-intl";
 
 // ../renderers/src/messages/repeatable.messages.ts
 import { defineMessages as defineMessages8 } from "react-intl";
@@ -2845,7 +2877,7 @@ var repeatable_messages_default = defineMessages8({
 });
 
 // ../renderers/src/RepeatableRenderer.tsx
-import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs16 } from "react/jsx-runtime";
 var RepeatableRenderer = {
   canRenderType: "repeatable",
   render: (props) => /* @__PURE__ */ jsx62(Repeatable, __spreadValues({}, props))
@@ -2865,8 +2897,8 @@ function Repeatable(props) {
     onSave,
     onRemove
   } = props;
-  const { formatMessage } = useIntl9();
-  const [openModalType, setOpenModalType] = useState10(null);
+  const { formatMessage } = useIntl10();
+  const [openModalType, setOpenModalType] = useState11(null);
   const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
@@ -2889,11 +2921,11 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
-    /* @__PURE__ */ jsxs15("div", { ref, children: [
+  return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+    /* @__PURE__ */ jsxs16("div", { ref, children: [
       title && /* @__PURE__ */ jsx62(Header6, { title }),
       description && /* @__PURE__ */ jsx62("p", { children: description }),
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs16(
         "div",
         {
           className: (0, import_classnames7.default)("form-group", {
@@ -2920,9 +2952,9 @@ function Repeatable(props) {
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ jsxs15(Fragment6, { children: [
+        body: /* @__PURE__ */ jsxs16(Fragment7, { children: [
           /* @__PURE__ */ jsx62("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ jsxs15("div", { children: [
+          /* @__PURE__ */ jsxs16("div", { children: [
             /* @__PURE__ */ jsx62(Button6, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
             /* @__PURE__ */ jsx62(
               Button6,
@@ -2962,12 +2994,12 @@ var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/ReviewLegacyRenderer.tsx
 import { DefinitionList } from "@transferwise/components";
-import { Fragment as Fragment7, jsx as jsx63, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx63, jsxs as jsxs17 } from "react/jsx-runtime";
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title, trackEvent }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    return /* @__PURE__ */ jsxs16("div", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs17("div", { className: getMargin(margin), children: [
       /* @__PURE__ */ jsx63(Header5, { title, callToAction }),
       /* @__PURE__ */ jsx63("div", { className: margin, children: /* @__PURE__ */ jsx63(
         DefinitionList,
@@ -3007,7 +3039,7 @@ var mapControlToDefinitionListLayout = (control) => {
 };
 var getFieldLabel = (label, help, onClick) => {
   if (help) {
-    return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+    return /* @__PURE__ */ jsxs17(Fragment8, { children: [
       label,
       " ",
       /* @__PURE__ */ jsx63(Help_default, { help, onClick })
@@ -3019,8 +3051,8 @@ var getFieldLabel = (label, help, onClick) => {
 // ../renderers/src/ReviewRenderer.tsx
 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 jsxs17 } from "react/jsx-runtime";
+import { useIntl as useIntl11 } from "react-intl";
+import { jsx as jsx64, jsxs as jsxs18 } from "react/jsx-runtime";
 var IGNORED_CONTROLS = [
   "horizontal",
   "horizontal-end-aligned",
@@ -3041,8 +3073,8 @@ var Review = ({
   title,
   trackEvent
 }) => {
-  const intl = useIntl10();
-  return /* @__PURE__ */ jsxs17("div", { className: getMargin(margin), children: [
+  const intl = useIntl11();
+  return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx64(Header5, { title, callToAction }),
     fields.map((field) => {
       var _a, _b, _c;
@@ -3088,8 +3120,8 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Input as Input4, InputGroup as InputGroup3, List, ListItem as ListItem10, Markdown as Markdown5 } from "@transferwise/components";
-import { useState as useState11 } from "react";
-import { useIntl as useIntl12 } from "react-intl";
+import { useState as useState12 } from "react";
+import { useIntl as useIntl13 } from "react-intl";
 
 // ../renderers/src/messages/search.messages.ts
 import { defineMessages as defineMessages9 } from "react-intl";
@@ -3102,7 +3134,7 @@ var search_messages_default = defineMessages9({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-import { useIntl as useIntl11 } from "react-intl";
+import { useIntl as useIntl12 } from "react-intl";
 
 // ../renderers/src/messages/generic-error.messages.ts
 import { defineMessages as defineMessages10 } from "react-intl";
@@ -3126,10 +3158,10 @@ var generic_error_messages_default = defineMessages10({
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
 import { Link as DSLink } from "@transferwise/components";
-import { jsx as jsx65, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs19 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
-  const intl = useIntl11();
-  return /* @__PURE__ */ jsxs18("p", { className: "m-t-2", children: [
+  const intl = useIntl12();
+  return /* @__PURE__ */ jsxs19("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
     /* @__PURE__ */ jsx65(DSLink, { onClick: () => state.onRetry(), children: intl.formatMessage(generic_error_messages_default.retry) })
@@ -3138,7 +3170,7 @@ function ErrorResult({ state }) {
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Search } from "@transferwise/icons";
-import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx66, jsxs as jsxs20 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   hint,
@@ -3151,9 +3183,9 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = useState11(false);
-  const { formatMessage } = useIntl12();
-  return /* @__PURE__ */ jsxs19("div", { className: getMargin(margin), children: [
+  const [hasSearched, setHasSearched] = useState12(false);
+  const { formatMessage } = useIntl13();
+  return /* @__PURE__ */ jsxs20("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx66(
       FieldInput_default,
       {
@@ -3196,7 +3228,7 @@ function SearchResultContent({
     case "results":
       return /* @__PURE__ */ jsx66(SearchResults, { state, trackEvent });
     case "layout":
-      return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+      return /* @__PURE__ */ jsxs20(Fragment9, { children: [
         " ",
         state.layout,
         " "
@@ -3244,8 +3276,8 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 import { Markdown as Markdown6, Typeahead } from "@transferwise/components";
 import { Search as Search2 } from "@transferwise/icons";
-import { useState as useState12 } from "react";
-import { useIntl as useIntl13 } from "react-intl";
+import { useState as useState13 } from "react";
+import { useIntl as useIntl14 } from "react-intl";
 import { jsx as jsx67 } from "react/jsx-runtime";
 function InlineSearchRenderer({
   id,
@@ -3258,8 +3290,8 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = useState12(false);
-  const intl = useIntl13();
+  const [hasSearched, setHasSearched] = useState13(false);
+  const intl = useIntl14();
   return /* @__PURE__ */ jsx67("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx67(
     FieldInput_default,
     {
@@ -3318,7 +3350,7 @@ function mapResultToTypeaheadOption(result) {
   };
 }
 function TypeaheadFooter({ state, isLoading }) {
-  const { formatMessage } = useIntl13();
+  const { formatMessage } = useIntl14();
   if (state.type === "layout") {
     return /* @__PURE__ */ jsx67("div", { className: "m-x-1 m-y-1", children: state.layout });
   }
@@ -3368,11 +3400,11 @@ var getHeaderAction2 = (callToAction) => {
 };
 
 // ../renderers/src/SectionRenderer.tsx
-import { jsx as jsx69, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs21 } from "react/jsx-runtime";
 var SectionRenderer = {
   canRenderType: "section",
   render: ({ children, callToAction, margin, title }) => {
-    return /* @__PURE__ */ jsxs20("section", { className: getMargin(margin), children: [
+    return /* @__PURE__ */ jsxs21("section", { className: getMargin(margin), children: [
       (title || callToAction) && /* @__PURE__ */ jsx69(Header7, { title: title != null ? title : "", action: getHeaderAction2(callToAction) }),
       children
     ] });
@@ -3382,7 +3414,7 @@ var SectionRenderer_default = SectionRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
 import { RadioGroup } from "@transferwise/components";
-import { Fragment as Fragment9, jsx as jsx70, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx70, jsxs as jsxs22 } from "react/jsx-runtime";
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -3397,7 +3429,7 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
     /* @__PURE__ */ jsx70(
       FieldInput_default,
       {
@@ -3432,7 +3464,7 @@ function RadioInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
 import { useEffect as useEffect9 } from "react";
-import { Fragment as Fragment10, jsx as jsx71, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs23 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -3452,7 +3484,7 @@ function TabInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
     /* @__PURE__ */ jsx71(
       FieldInput_default,
       {
@@ -3471,7 +3503,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(Fragment10, {}),
+              content: /* @__PURE__ */ jsx71(Fragment11, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -3486,7 +3518,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 Fragment11, jsx as jsx72, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx72, jsxs as jsxs24 } from "react/jsx-runtime";
 function SelectInputRendererComponent(props) {
   const {
     id,
@@ -3532,7 +3564,7 @@ function SelectInputRendererComponent(props) {
     return /* @__PURE__ */ jsx72(SelectInputOptionContent2, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
     /* @__PURE__ */ jsx72(
       FieldInput_default,
       {
@@ -3565,7 +3597,7 @@ function SelectInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
 import { useEffect as useEffect10 } from "react";
 import { SegmentedControl } from "@transferwise/components";
-import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx73, jsxs as jsxs25 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
   const {
     id,
@@ -3584,7 +3616,7 @@ function SegmentedInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs25(Fragment13, { children: [
     /* @__PURE__ */ jsx73(
       FieldInput_default,
       {
@@ -3618,7 +3650,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 jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs26 } from "react/jsx-runtime";
 function RadioItemRendererComponent(props) {
   const {
     id,
@@ -3634,7 +3666,7 @@ function RadioItemRendererComponent(props) {
     onSelect
   } = props;
   const { ref } = useScrollToError(validationState, features);
-  return /* @__PURE__ */ jsxs25("div", { ref, children: [
+  return /* @__PURE__ */ jsxs26("div", { ref, children: [
     rootTitle && /* @__PURE__ */ jsx74(
       Header8,
       {
@@ -3694,10 +3726,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 jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs27 } from "react/jsx-runtime";
 var StatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title }) => /* @__PURE__ */ jsxs26("div", { className: getMargin(margin), children: [
+  render: ({ margin, items, title }) => /* @__PURE__ */ jsxs27("div", { className: getMargin(margin), children: [
     title ? /* @__PURE__ */ jsx76(Header9, { title }) : null,
     items.map((item) => {
       const { callToAction, description, title: itemTitle } = item;
@@ -3765,8 +3797,8 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button7 } from "@transferwise/components";
-import { useEffect as useEffect12, useRef as useRef2, useState as useState13 } from "react";
-import { useIntl as useIntl14 } from "react-intl";
+import { useEffect as useEffect12, useRef as useRef2, useState as useState14 } from "react";
+import { useIntl as useIntl15 } from "react-intl";
 
 // ../renderers/src/messages/step.messages.ts
 import { defineMessages as defineMessages11 } from "react-intl";
@@ -3779,7 +3811,7 @@ var step_messages_default = defineMessages11({
 });
 
 // ../renderers/src/step/StepFooter.tsx
-import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx77, jsxs as jsxs28 } 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)) {
@@ -3792,7 +3824,7 @@ var DefaultFooter = ({ footer }) => {
   return hasFooter ? /* @__PURE__ */ jsx77("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
 };
 var FooterWithScrollButton = ({ footer }) => {
-  const { formatMessage } = useIntl14();
+  const { formatMessage } = useIntl15();
   const endOfLayoutRef = useRef2(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ jsx77(
@@ -3813,16 +3845,16 @@ var FooterWithScrollButton = ({ footer }) => {
   if (isElementVisible && !hasStepFooterContent) {
     return /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
   }
-  return /* @__PURE__ */ jsxs27(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment14, { children: [
     /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs27("div", { className: "df-step-fixed__footer", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "df-step-fixed__footer", children: [
       !isElementVisible && scrollButton,
       footer
     ] })
   ] });
 };
 var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = useState13(false);
+  const [isVisible, setIsVisible] = useState14(false);
   useEffect12(() => {
     const element = elementRef.current;
     if (!element) return;
@@ -3837,10 +3869,10 @@ var useIsElementVisible = (elementRef) => {
 
 // ../renderers/src/step/StepHeader.tsx
 import { Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx78, jsxs as jsxs29 } from "react/jsx-runtime";
 var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs28(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment15, { 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
   ] });
@@ -3855,7 +3887,7 @@ var getHeaderStyle = (tags) => {
 // ../renderers/src/step/topbar/BackButton.tsx
 import { IconButton } from "@transferwise/components";
 import { ArrowLeft } from "@transferwise/icons";
-import { useIntl as useIntl15 } from "react-intl";
+import { useIntl as useIntl16 } from "react-intl";
 
 // ../renderers/src/messages/back.messages.ts
 import { defineMessages as defineMessages12 } from "react-intl";
@@ -3868,10 +3900,10 @@ var back_messages_default = defineMessages12({
 });
 
 // ../renderers/src/step/topbar/BackButton.tsx
-import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs30 } from "react/jsx-runtime";
 function BackButton({ title, onClick }) {
-  const { formatMessage } = useIntl15();
-  return /* @__PURE__ */ jsxs29(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
+  const { formatMessage } = useIntl16();
+  return /* @__PURE__ */ jsxs30(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, {})
   ] });
@@ -3879,7 +3911,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 jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs31 } 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;
 };
@@ -3891,7 +3923,7 @@ function MediaToolbarButton(props) {
   const { context, control, media, accessibilityDescription, disabled, onClick } = props;
   const priority = getIconButtonPriority(control);
   const type = getSentiment2(context);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     IconButton2,
     {
       className: "df-toolbar-button",
@@ -3942,18 +3974,18 @@ var getIconButtonPriority = (control) => {
 };
 
 // ../renderers/src/step/topbar/TopBar.tsx
-import { jsx as jsx81, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs32 } 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__ */ jsxs31("div", { className: "d-flex m-b-2", children: [
+  return backCTA || toolbar ? /* @__PURE__ */ jsxs32("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 jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
@@ -3962,7 +3994,7 @@ var SplashCelebrationStepRenderer = {
 function SplashCelebrationStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  return /* @__PURE__ */ jsxs32("div", { className: "splash-screen m-t-5", children: [
+  return /* @__PURE__ */ jsxs33("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,
@@ -3971,7 +4003,7 @@ function SplashCelebrationStepRendererComponent(props) {
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs34 } from "react/jsx-runtime";
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
@@ -3979,7 +4011,7 @@ var SplashStepRenderer = {
 };
 function SplashStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags } = props;
-  return /* @__PURE__ */ jsxs33("div", { className: "splash-screen m-t-5", children: [
+  return /* @__PURE__ */ jsxs34("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,
@@ -3989,14 +4021,14 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2 } from "@transferwise/components";
-import { jsx as jsx84, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs35 } 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__ */ jsxs34("div", { children: [
+  return /* @__PURE__ */ jsxs35("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,
@@ -4007,8 +4039,8 @@ 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 jsxs35 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx85, jsxs as jsxs36 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
   render: (props) => {
@@ -4026,7 +4058,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = useState14(0);
+  const [selectedIndex, setSelectedIndex] = useState15(0);
   return /* @__PURE__ */ jsx85("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx85(
     Tabs2,
     {
@@ -4035,7 +4067,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
       tabs: tabs.map((option) => ({
         title: option.title,
         disabled: false,
-        content: /* @__PURE__ */ jsxs35("div", { className: "m-t-2", children: [
+        content: /* @__PURE__ */ jsxs36("div", { className: "m-t-2", children: [
           " ",
           option.children,
           " "
@@ -4047,8 +4079,8 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState14(0);
-  return /* @__PURE__ */ jsxs35("div", { className: getMargin(margin), children: [
+  const [selectedIndex, setSelectedIndex] = useState15(0);
+  return /* @__PURE__ */ jsxs36("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx85(
       SegmentedControl2,
       {
@@ -4069,8 +4101,8 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState14(0);
-  return /* @__PURE__ */ jsxs35("div", { className: getMargin(margin), children: [
+  const [selectedIndex, setSelectedIndex] = useState15(0);
+  return /* @__PURE__ */ jsxs36("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx85("div", { className: "chips-container", children: /* @__PURE__ */ jsx85(
       Chips,
       {
@@ -4330,7 +4362,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 jsx89 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4338,7 +4370,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__ */ jsx89(
     Nudge,
     {
@@ -4590,7 +4622,7 @@ var customEventsToAnalytics = {
 
 // src/dynamicFlow/useOnCopy.tsx
 import { useCallback as useCallback2 } from "react";
-import { useIntl as useIntl16 } from "react-intl";
+import { useIntl as useIntl17 } from "react-intl";
 
 // src/dynamicFlow/messages.ts
 import { defineMessages as defineMessages13 } from "react-intl";
@@ -4609,7 +4641,7 @@ var messages_default = defineMessages13({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = useIntl16();
+  const { formatMessage } = useIntl17();
   const createSnackBar = useSnackBarIfAvailable();
   return useCallback2(
     (copiedContent) => {
@@ -4625,9 +4657,9 @@ var useOnCopy = () => {
 
 // src/dynamicFlow/useWiseHttpClient.tsx
 import { useCallback as useCallback3 } from "react";
-import { useIntl as useIntl17 } from "react-intl";
+import { useIntl as useIntl18 } from "react-intl";
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl17();
+  const { locale } = useIntl18();
   return useCallback3(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
@@ -4704,13 +4736,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsxs as jsxs37 } 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__ */ jsxs36("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs37("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });
@@ -4730,9 +4762,9 @@ var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
   useImperativeHandle(
     ref,
     () => ({
-      getValue: async () => {
+      getValue: () => {
         var _a;
-        return (_a = await df.controller.getSubmittableValue()) != null ? _a : null;
+        return (_a = df.controller.getValue()) != null ? _a : null;
       },
       validate: () => df.controller.validate()
     }),