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

package/build/main.js

@@ -145,7 +145,7 @@ var import_dynamic_flow_client4 = require("@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
@@ -209,7 +209,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 = () => {
@@ -329,7 +329,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -1357,10 +1357,10 @@ var filter_messages_default = (0, import_react_intl5.defineMessages)({
   }
 });
 
-// ../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,
@@ -1469,9 +1469,10 @@ var GroupedDecisionList = (_a) => {
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var DecisionWrapper = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getMargin(props.margin), children: [
-    props.title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components15.Header, { as: "h2", title: props.title }),
-    props.control === "filtered" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UnfilteredDecisionList, __spreadValues({}, props))
+  const { title, control, margin } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getMargin(margin), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components15.Header, { as: "h2", title }),
+    control === "filtered" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UnfilteredDecisionList, __spreadValues({}, props))
   ] });
 };
 var UnfilteredDecisionList = (_a) => {
@@ -1482,7 +1483,7 @@ var FilteredDecisionList = (props) => {
   const { formatMessage } = (0, import_react_intl8.useIntl)();
   const [query, setQuery] = (0, import_react6.useState)("");
   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__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -2315,6 +2316,15 @@ function assertCurrencyCodeIsString(currencyCode) {
 
 // ../renderers/src/MultiSelectInputRenderer/InlineComponent.tsx
 var import_components32 = require("@transferwise/components");
+var import_react13 = require("react");
+var import_react_intl12 = require("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
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function InlineComponent(props) {
   const {
@@ -2325,69 +2335,91 @@ function InlineComponent(props) {
     help,
     options,
     selectedIndices,
+    tags,
     title,
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-    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__ */ (0, import_jsx_runtime53.jsx)(
-          import_components32.ListItem,
-          {
+  const optionsWithIndex = zipWithIndex(options);
+  const [query, setQuery] = (0, import_react13.useState)("");
+  const { formatMessage } = (0, import_react_intl12.useIntl)();
+  const filtered = tags == null ? void 0 : tags.includes("filtered");
+  const filteredOptions = query ? filterAndSortItems(optionsWithIndex, filtered ? query : "") : optionsWithIndex;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    filtered && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      import_components32.SearchInput,
+      {
+        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__ */ (0, import_jsx_runtime53.jsx)(
+      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__ */ (0, import_jsx_runtime53.jsx)(import_components32.ListItem.AdditionalInfo, { children: additionalText }) : void 0,
-            disabled: disabled || optionDisabled,
-            control: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              import_components32.ListItem.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__ */ (0, import_jsx_runtime53.jsx)(
+            import_components32.ListItem,
+            {
+              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__ */ (0, import_jsx_runtime53.jsx)(import_components32.ListItem.AdditionalInfo, { children: additionalText }) : void 0,
+              disabled: disabled || optionDisabled,
+              control: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                import_components32.ListItem.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
 var import_components33 = require("@transferwise/components");
-var import_react13 = require("react");
-var import_react_intl13 = require("react-intl");
+var import_react14 = require("react");
+var import_react_intl14 = require("react-intl");
 
 // ../renderers/src/messages/multi-select.messages.ts
-var import_react_intl12 = require("react-intl");
-var multi_select_messages_default = (0, import_react_intl12.defineMessages)({
+var import_react_intl13 = require("react-intl");
+var multi_select_messages_default = (0, import_react_intl13.defineMessages)({
   summary: {
     id: "df.wise.MultiSelect.summary",
     defaultMessage: "{first} and {count} more",
@@ -2398,8 +2430,8 @@ var multi_select_messages_default = (0, import_react_intl12.defineMessages)({
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function DefaultComponent(props) {
-  const { formatMessage } = (0, import_react_intl13.useIntl)();
-  const [stagedIndices, setStagedIndices] = (0, import_react13.useState)();
+  const { formatMessage } = (0, import_react_intl14.useIntl)();
+  const [stagedIndices, setStagedIndices] = (0, import_react14.useState)();
   const {
     id,
     autoComplete,
@@ -2731,13 +2763,13 @@ var NumberInputRenderer = {
 var NumberInputRenderer_default = NumberInputRenderer;
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_react_intl15 = require("react-intl");
+var import_react_intl16 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 var import_components38 = require("@transferwise/components");
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react14.useContext)(import_components38.SnackbarContext);
+  const context = (0, import_react15.useContext)(import_components38.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -2747,8 +2779,8 @@ var import_components39 = require("@transferwise/components");
 var import_classnames6 = __toESM(require_classnames());
 
 // ../renderers/src/messages/paragraph.messages.ts
-var import_react_intl14 = require("react-intl");
-var paragraph_messages_default = (0, import_react_intl14.defineMessages)({
+var import_react_intl15 = require("react-intl");
+var paragraph_messages_default = (0, import_react_intl15.defineMessages)({
   copy: {
     id: "df.wise.DynamicParagraph.copy",
     defaultMessage: "Copy",
@@ -2782,7 +2814,7 @@ function CopyableParagraph({
   align,
   className
 }) {
-  const { formatMessage } = (0, import_react_intl15.useIntl)();
+  const { formatMessage } = (0, import_react_intl16.useIntl)();
   const createSnackbar = useSnackBarIfAvailable();
   const copy = () => {
     navigator.clipboard.writeText(text).then(() => createSnackbar({ text: formatMessage(paragraph_messages_default.copied) })).catch(() => {
@@ -2831,12 +2863,12 @@ var ProgressRenderer = {
 var import_components41 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_classnames7 = __toESM(require_classnames());
-var import_react15 = require("react");
-var import_react_intl17 = require("react-intl");
+var import_react16 = require("react");
+var import_react_intl18 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
-var import_react_intl16 = require("react-intl");
-var repeatable_messages_default = (0, import_react_intl16.defineMessages)({
+var import_react_intl17 = require("react-intl");
+var repeatable_messages_default = (0, import_react_intl17.defineMessages)({
   addItemTitle: {
     id: "df.wise.ArraySchema.addItemTitle",
     defaultMessage: "Add Item",
@@ -2880,8 +2912,8 @@ function Repeatable(props) {
     onSave,
     onRemove
   } = props;
-  const { formatMessage } = (0, import_react_intl17.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react15.useState)(null);
+  const { formatMessage } = (0, import_react_intl18.useIntl)();
+  const [openModalType, setOpenModalType] = (0, import_react16.useState)(null);
   const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
@@ -3034,7 +3066,7 @@ var getFieldLabel = (label, help, onClick) => {
 // ../renderers/src/ReviewRenderer.tsx
 var import_components43 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
-var import_react_intl18 = require("react-intl");
+var import_react_intl19 = require("react-intl");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var IGNORED_CONTROLS = [
   "horizontal",
@@ -3056,7 +3088,7 @@ var Review = ({
   title,
   trackEvent
 }) => {
-  const intl = (0, import_react_intl18.useIntl)();
+  const intl = (0, import_react_intl19.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Header5, { title, callToAction }),
     fields.map((field) => {
@@ -3103,12 +3135,12 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_components45 = require("@transferwise/components");
-var import_react16 = require("react");
-var import_react_intl22 = require("react-intl");
+var import_react17 = require("react");
+var import_react_intl23 = require("react-intl");
 
 // ../renderers/src/messages/search.messages.ts
-var import_react_intl19 = require("react-intl");
-var search_messages_default = (0, import_react_intl19.defineMessages)({
+var import_react_intl20 = require("react-intl");
+var search_messages_default = (0, import_react_intl20.defineMessages)({
   loading: {
     id: "df.wise.SearchLayout.loading",
     defaultMessage: "Loading...",
@@ -3117,11 +3149,11 @@ var search_messages_default = (0, import_react_intl19.defineMessages)({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-var import_react_intl21 = require("react-intl");
+var import_react_intl22 = require("react-intl");
 
 // ../renderers/src/messages/generic-error.messages.ts
-var import_react_intl20 = require("react-intl");
-var generic_error_messages_default = (0, import_react_intl20.defineMessages)({
+var import_react_intl21 = require("react-intl");
+var generic_error_messages_default = (0, import_react_intl21.defineMessages)({
   genericErrorRetryHint: {
     id: "df.wise.PersistAsyncSchema.genericError",
     defaultMessage: "Something went wrong, please try again.",
@@ -3143,7 +3175,7 @@ var generic_error_messages_default = (0, import_react_intl20.defineMessages)({
 var import_components44 = require("@transferwise/components");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function ErrorResult({ state }) {
-  const intl = (0, import_react_intl21.useIntl)();
+  const intl = (0, import_react_intl22.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
@@ -3166,8 +3198,8 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
-  const { formatMessage } = (0, import_react_intl22.useIntl)();
+  const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
+  const { formatMessage } = (0, import_react_intl23.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       FieldInput_default,
@@ -3259,8 +3291,8 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 var import_components46 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
-var import_react17 = require("react");
-var import_react_intl23 = require("react-intl");
+var import_react18 = require("react");
+var import_react_intl24 = require("react-intl");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
@@ -3273,8 +3305,8 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
-  const intl = (0, import_react_intl23.useIntl)();
+  const [hasSearched, setHasSearched] = (0, import_react18.useState)(false);
+  const intl = (0, import_react_intl24.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     FieldInput_default,
     {
@@ -3333,7 +3365,7 @@ function mapResultToTypeaheadOption(result) {
   };
 }
 function TypeaheadFooter({ state, isLoading }) {
-  const { formatMessage } = (0, import_react_intl23.useIntl)();
+  const { formatMessage } = (0, import_react_intl24.useIntl)();
   if (state.type === "layout") {
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "m-x-1 m-y-1", children: state.layout });
   }
@@ -3446,7 +3478,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components49 = require("@transferwise/components");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -3462,7 +3494,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3578,7 +3610,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_components51 = require("@transferwise/components");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
@@ -3594,7 +3626,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3762,12 +3794,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
-var import_react20 = require("react");
+var import_react21 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react20.useMemo)(() => theming.theme, []);
-  (0, import_react20.useEffect)(() => {
+  const previousTheme = (0, import_react21.useMemo)(() => theming.theme, []);
+  (0, import_react21.useEffect)(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3780,12 +3812,12 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 var import_components54 = require("@transferwise/components");
-var import_react21 = require("react");
-var import_react_intl25 = require("react-intl");
+var import_react22 = require("react");
+var import_react_intl26 = require("react-intl");
 
 // ../renderers/src/messages/step.messages.ts
-var import_react_intl24 = require("react-intl");
-var step_messages_default = (0, import_react_intl24.defineMessages)({
+var import_react_intl25 = require("react-intl");
+var step_messages_default = (0, import_react_intl25.defineMessages)({
   scrollToBottom: {
     id: "df.wise.step.scrollToBottom",
     defaultMessage: "Scroll to bottom",
@@ -3807,8 +3839,8 @@ var DefaultFooter = ({ footer }) => {
   return hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
 };
 var FooterWithScrollButton = ({ footer }) => {
-  const { formatMessage } = (0, import_react_intl25.useIntl)();
-  const endOfLayoutRef = (0, import_react21.useRef)(null);
+  const { formatMessage } = (0, import_react_intl26.useIntl)();
+  const endOfLayoutRef = (0, import_react22.useRef)(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     import_components54.Button,
@@ -3837,8 +3869,8 @@ var FooterWithScrollButton = ({ footer }) => {
   ] });
 };
 var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3870,11 +3902,11 @@ var getHeaderStyle = (tags) => {
 // ../renderers/src/step/topbar/BackButton.tsx
 var import_components56 = require("@transferwise/components");
 var import_icons5 = require("@transferwise/icons");
-var import_react_intl27 = require("react-intl");
+var import_react_intl28 = require("react-intl");
 
 // ../renderers/src/messages/back.messages.ts
-var import_react_intl26 = require("react-intl");
-var back_messages_default = (0, import_react_intl26.defineMessages)({
+var import_react_intl27 = require("react-intl");
+var back_messages_default = (0, import_react_intl27.defineMessages)({
   back: {
     id: "df.wise.back.label",
     defaultMessage: "Back",
@@ -3885,7 +3917,7 @@ var back_messages_default = (0, import_react_intl26.defineMessages)({
 // ../renderers/src/step/topbar/BackButton.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
-  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  const { formatMessage } = (0, import_react_intl28.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_components56.IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_icons5.ArrowLeft, {})
@@ -4022,7 +4054,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components59 = require("@transferwise/components");
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -4041,7 +4073,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react23.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_components59.Tabs,
     {
@@ -4062,7 +4094,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react23.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.SegmentedControl,
@@ -4084,7 +4116,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react23.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.Chips,
@@ -4339,7 +4371,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 var import_components63 = require("@transferwise/components");
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4347,7 +4379,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = (0, import_react23.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react24.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     import_components63.Nudge,
     {
@@ -4598,12 +4630,12 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react24 = require("react");
-var import_react_intl29 = require("react-intl");
+var import_react25 = require("react");
+var import_react_intl30 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
-var import_react_intl28 = require("react-intl");
-var messages_default = (0, import_react_intl28.defineMessages)({
+var import_react_intl29 = require("react-intl");
+var messages_default = (0, import_react_intl29.defineMessages)({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -4618,9 +4650,9 @@ var messages_default = (0, import_react_intl28.defineMessages)({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = (0, import_react_intl29.useIntl)();
+  const { formatMessage } = (0, import_react_intl30.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react24.useCallback)(
+  return (0, import_react25.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -4633,11 +4665,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react25 = require("react");
-var import_react_intl30 = require("react-intl");
+var import_react26 = require("react");
+var import_react_intl31 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl30.useIntl)();
-  return (0, import_react25.useCallback)(
+  const { locale } = (0, import_react_intl31.useIntl)();
+  return (0, import_react26.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -4678,10 +4710,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react26.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react27.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react26.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react26.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react27.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react27.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -4726,19 +4758,19 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react27.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react28.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react27.useImperativeHandle)(
+  (0, import_react28.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()
     }),