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

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.22.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.23.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -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");
@@ -660,7 +660,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 }
   }));
@@ -747,16 +747,19 @@ var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
   const iconNode = getIconNode(icon);
   const badge = getBadgedMedia(iconNode, imageNode, size);
   if (badge) {
-    return badge;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: badge });
   }
   if (imageNode) {
-    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.AvatarView, { children: imageNode }) : imageNode;
+    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.AvatarView, { children: imageNode }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      imageNode,
+      " "
+    ] });
   }
   if (iconNode && icon) {
     if ("text" in icon || size === 48) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.AvatarView, { size, children: iconNode });
     }
-    return iconNode;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: iconNode });
   }
   return null;
 };
@@ -2169,6 +2172,7 @@ var ContentComponent = (props) => {
   const isBottomVisible = useIsElementVisible(endOfContentRef);
   (0, import_react6.useEffect)(() => {
     var _a;
+    console.log("bottom visible", status);
     if (isBottomVisible && status.type === "idle" && status.loadMore) {
       (_a = status.loadMore) == null ? void 0 : _a.call(status);
     }
@@ -2209,9 +2213,10 @@ var ContentComponent = (props) => {
     overscan: 10,
     scrollMargin: listOffsetRef.current
   });
+  const showState = status.type === "idle" || status.reason === "pagination";
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: listRef, children: [
-    state.beforeSections,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    showState && state.beforeSections,
+    showState && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         style: {
@@ -2244,10 +2249,10 @@ var ContentComponent = (props) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: endOfContentRef, className: "d-flex m-x-auto m-y-2", children: [
-      status.type === "idle" || status.type === "loading" && status.reason === "pagination" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.ProcessIndicator, { size: "xs" }) : null,
+      status.type === "idle" && status.loadMore || status.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.ProcessIndicator, { size: "xs" }) : null,
       status.type === "error" && status.reason === "pagination" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "d-flex m-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.Button, { v2: true, size: "sm", priority: "secondary-neutral", onClick: status.retry, children: "Load more" }) }) : null
     ] }),
-    state.afterSections
+    showState && state.afterSections
   ] });
 };
 
@@ -2309,13 +2314,6 @@ var FilterComponent = (filter) => {
       multiple: multiSelect,
       selected: options.some((option) => option.selected) ? options.filter((option) => option.selected).map((option) => option.value) : multiSelect ? [] : "",
       chips: [
-        ...multiSelect ? [
-          {
-            value: "",
-            // this is a placeholder for now, only for single selects, when it is not possible to de-select options
-            label: "All"
-          }
-        ] : [],
         ...options.map((option) => ({
           value: option.value,
           label: option.title
@@ -2473,7 +2471,7 @@ var CollectionRendererComponent = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Search4, __spreadValues({}, props)),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Filters, __spreadValues({}, props)),
-    status.type === "idle" || status.reason === "pagination" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Results, __spreadValues({}, props)) : void 0,
+    status.type === "idle" || status.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Results, __spreadValues({}, props)) : void 0,
     status.type === "error" && status.reason === "search" && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_components19.InlinePrompt, { width: "full", sentiment: "negative", children: [
       "Something went wrong,\xA0",
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_components19.Link, { onClick: status.retry, children: "click here to retry" })
@@ -2492,10 +2490,47 @@ var CollectionRenderer_default = CollectionRenderer;
 
 // ../renderers/src/ColumnsRenderer.tsx
 var import_classnames3 = __toESM(require_classnames());
+
+// ../renderers/src/utils/useIsCollapsed.ts
+var import_react7 = require("react");
+var COLLAPSE_QUERY = "(max-width: 767.98px)";
+var supportsMatchMedia = () => typeof window !== "undefined" && !!window.matchMedia;
+var useIsCollapsed = () => {
+  const [collapsed, setCollapsed] = (0, import_react7.useState)(
+    () => supportsMatchMedia() && window.matchMedia(COLLAPSE_QUERY).matches
+  );
+  (0, import_react7.useEffect)(() => {
+    if (supportsMatchMedia()) {
+      const mql = window.matchMedia(COLLAPSE_QUERY);
+      const update = () => setCollapsed(mql.matches);
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    return void 0;
+  }, []);
+  return collapsed;
+};
+
+// ../renderers/src/ColumnsRenderer.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
+var RIGHT_FIRST_STACKING = "right-first-stacking";
 var ColumnsRenderer = {
   canRenderType: "columns",
-  render: ({ bias, margin, startChildren, endChildren }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  render: ColumnsRendererComponent
+};
+function ColumnsRendererComponent({
+  bias,
+  margin,
+  startChildren,
+  endChildren,
+  tags
+}) {
+  var _a;
+  const isCollapsed = useIsCollapsed();
+  const reverse = isCollapsed && ((_a = tags == null ? void 0 : tags.includes(RIGHT_FIRST_STACKING)) != null ? _a : false);
+  const startColumn = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "df-columns-renderer-column", children: startChildren });
+  const endColumn = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "df-columns-renderer-column", children: endChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: (0, import_classnames3.default)("df-columns-renderer-container", getMargin(margin), {
@@ -2503,12 +2538,12 @@ var ColumnsRenderer = {
         "df-columns-renderer-bias-end": bias === "end"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "df-columns-renderer-column", children: startChildren }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "df-columns-renderer-column", children: endChildren })
+        reverse ? endColumn : startColumn,
+        reverse ? startColumn : endColumn
       ]
     }
-  )
-};
+  );
+}
 var ColumnsRenderer_default = ColumnsRenderer;
 
 // ../renderers/src/components/VariableDateInput.tsx
@@ -2636,7 +2671,7 @@ var import_components23 = require("@transferwise/components");
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 var import_components22 = require("@transferwise/components");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_intl10 = require("react-intl");
 
 // ../renderers/src/messages/filter.messages.ts
@@ -2782,7 +2817,7 @@ var UnfilteredDecisionList = (_a) => {
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = (0, import_react_intl10.useIntl)();
-  const [query, setQuery] = (0, import_react7.useState)("");
+  const [query, setQuery] = (0, import_react8.useState)("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
   const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortDecisionOptions(options, query) : options;
   const isGrouped = isGroupedDecision(options);
@@ -2899,7 +2934,7 @@ var external_confirmation_messages_default = (0, import_react_intl11.defineMessa
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 var import_react_intl12 = require("react-intl");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -2912,7 +2947,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = (0, import_react_intl12.useIntl)();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     open();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -3026,7 +3061,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 var import_components28 = require("@transferwise/components");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -3045,8 +3080,8 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
+  const [imageSource, setImageSource] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -3109,19 +3144,19 @@ function UrnFlagImage({
 
 // ../renderers/src/ImageRenderer/UrnIllustration.tsx
 var import_art4 = require("@wise/art");
-var import_react11 = require("react");
+var import_react12 = require("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
 var import_art3 = require("@wise/art");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var Illustration3DErrorBoundary = class extends import_react10.Component {
+var Illustration3DErrorBoundary = class extends import_react11.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -3132,7 +3167,7 @@ var Illustration3DErrorBoundary = class extends import_react10.Component {
   componentDidCatch() {
     this.props.onError();
   }
-  render() {
+  async render() {
     if (this.state.hasError) {
       return null;
     }
@@ -3159,7 +3194,7 @@ function UrnIllustration({
   size,
   uri
 }) {
-  const [has3DFailed, setHas3DFailed] = (0, import_react11.useState)(false);
+  const [has3DFailed, setHas3DFailed] = (0, import_react12.useState)(false);
   const illustrationSize = getIllustrationSize(size);
   const illustrationName = getIllustrationName(uri);
   const illustration3DName = getIllustration3DName(uri);
@@ -3451,7 +3486,7 @@ var mapAvatarMediaSize = (size) => {
 
 // ../renderers/src/ModalLayoutRenderer.tsx
 var import_components35 = require("@transferwise/components");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
@@ -3459,7 +3494,7 @@ var ModalLayoutRenderer = {
 };
 var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = (0, import_react12.useState)(false);
+  const [visible, setVisible] = (0, import_react13.useState)(false);
   const { children, title } = content;
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components35.Button, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -3489,7 +3524,7 @@ var ModalRenderer = {
 
 // ../renderers/src/MoneyInputRenderer.tsx
 var import_components37 = require("@transferwise/components");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_intl13 = require("react-intl");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var groupingTags2 = Object.keys(group_messages_default).filter((key) => key !== "all");
@@ -3512,7 +3547,7 @@ function MoneyInputRendererComponent(props) {
     onAmountChange,
     onCurrencyChange
   } = props;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!isValidIndex(selectedCurrencyIndex, currencies.length)) {
       onCurrencyChange(0);
     }
@@ -3657,7 +3692,7 @@ function InlineComponent(props) {
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 var import_components39 = require("@transferwise/components");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_intl15 = require("react-intl");
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -3674,7 +3709,7 @@ var multi_select_messages_default = (0, import_react_intl14.defineMessages)({
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function DefaultComponent(props) {
   const { formatMessage } = (0, import_react_intl15.useIntl)();
-  const [stagedIndices, setStagedIndices] = (0, import_react14.useState)();
+  const [stagedIndices, setStagedIndices] = (0, import_react15.useState)();
   const {
     id,
     autoComplete,
@@ -3938,10 +3973,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" ? import_components42.Status.FAILED : import_components42.Status.SUCCEEDED
+              status: (fileValidationState == null ? void 0 : fileValidationState.status) === "invalid" ? import_components42.Status.FAILED : import_components42.Status.SUCCEEDED
             })),
             fileTypes: acceptsToFileTypes(accepts),
             maxFiles: maxItems,
@@ -4010,9 +4045,9 @@ var import_react_intl17 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 var import_components44 = require("@transferwise/components");
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react15.useContext)(import_components44.SnackbarContext);
+  const context = (0, import_react16.useContext)(import_components44.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -4106,7 +4141,7 @@ var ProgressRenderer = {
 var import_components47 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_classnames7 = __toESM(require_classnames());
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_intl19 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -4156,7 +4191,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = (0, import_react_intl19.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react16.useState)(null);
+  const [openModalType, setOpenModalType] = (0, import_react17.useState)(null);
   const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
@@ -4378,7 +4413,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_components51 = require("@transferwise/components");
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_intl24 = require("react-intl");
 
 // ../renderers/src/messages/search.messages.ts
@@ -4441,7 +4476,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react18.useState)(false);
   const { formatMessage } = (0, import_react_intl24.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
@@ -4459,6 +4494,7 @@ function BlockSearchRendererComponent({
             id,
             name: id,
             placeholder: hint,
+            shape: "pill",
             type: "text",
             value: query,
             onChange: ({ currentTarget: { value } }) => {
@@ -4533,7 +4569,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 var import_components52 = require("@transferwise/components");
 var import_icons5 = require("@transferwise/icons");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_intl25 = require("react-intl");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function InlineSearchRenderer({
@@ -4547,7 +4583,7 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react18.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react19.useState)(false);
   const intl = (0, import_react_intl25.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     FieldInput_default,
@@ -4720,7 +4756,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components55 = require("@transferwise/components");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -4736,7 +4772,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -4852,7 +4888,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_components57 = require("@transferwise/components");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
@@ -4868,7 +4904,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -5036,12 +5072,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
-var import_react21 = require("react");
+var import_react22 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react21.useMemo)(() => theming.theme, []);
-  (0, import_react21.useEffect)(() => {
+  const previousTheme = (0, import_react22.useMemo)(() => theming.theme, []);
+  (0, import_react22.useEffect)(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -5224,7 +5260,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components64 = require("@transferwise/components");
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -5243,7 +5279,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_runtime92.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     import_components64.Tabs,
     {
@@ -5264,7 +5300,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_runtime92.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       import_components64.SegmentedControl,
@@ -5286,7 +5322,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_runtime92.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       import_components64.Chips,
@@ -5541,7 +5577,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 var import_components68 = require("@transferwise/components");
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -5549,7 +5585,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_runtime96.jsx)(
     import_components68.Nudge,
     {
@@ -5801,7 +5837,7 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_intl29 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -5823,7 +5859,7 @@ var messages_default = (0, import_react_intl28.defineMessages)({
 var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl29.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react24.useCallback)(
+  return (0, import_react25.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -5836,11 +5872,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_intl30 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl30.useIntl)();
-  return (0, import_react25.useCallback)(
+  return (0, import_react26.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -5881,10 +5917,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,
@@ -5929,14 +5965,14 @@ 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_runtime102 = 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 () => {