@wise/dynamic-flow-client-internal 5.20.0 → 5.21.0

package/build/main.css

@@ -52,6 +52,37 @@
     width: 66.66%;
   }
 }
+/* container queries (when .df-prefer-container-queries is set on a parent) */
+.df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
+  padding: var(--size-16);
+}
+.df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs,
+.df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm,
+.df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md,
+.df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
+  width: 100%;
+}
+@container (min-width: 480px) {
+  .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
+    padding: var(--size-24);
+  }
+
+  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs {
+    width: 33.33%;
+  }
+
+  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm {
+    width: 50%;
+  }
+
+  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md {
+    width: 66.66%;
+  }
+
+  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
+    width: 83.33%;
+  }
+}
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);
@@ -137,13 +168,6 @@
     width: 300px;
   }
 }
-/**
-  * This speficies the container for container queries about width.
-  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
- */
-.df-prefer-container-queries {
-  container-type: inline-size;
-}
 /* narrow container */
 @container (max-width: 576px) {
   .df-image.xs img.df-reserve-space {
@@ -230,6 +254,13 @@
   margin-left: auto;
   margin-right: auto;
 }
+/**
+  * This specifies the container for container queries about width.
+  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
+ */
+.df-prefer-container-queries {
+  container-type: inline-size;
+}
 .df-context-menu {
   position: fixed;
   z-index: 10;

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.20.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.21.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_react25 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -403,7 +403,7 @@ var BoxRenderer = {
     const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        className: (0, import_classnames.default)({
+        className: (0, import_classnames.default)("df-box-renderer", {
           "df-box-renderer-border": hasBorder,
           [`df-box-renderer-width-${width}`]: hasFixedWidth,
           [getMargin(margin)]: !hasFixedWidth
@@ -869,11 +869,24 @@ var getPriority = (control, tags) => {
   return control && isButtonPriority(control) ? control : "secondary";
 };
 
+// ../renderers/src/CheckboxInputRenderer.tsx
+var import_components11 = require("@transferwise/components");
+
 // ../renderers/src/components/FieldInput.tsx
 var import_components8 = require("@transferwise/components");
-var import_react4 = require("react");
 
-// ../renderers/src/utils/scroll-to-if-not-visible.ts
+// ../renderers/src/utils/useScrollToError.ts
+var import_react4 = require("react");
+var useScrollToError = (validationState, features) => {
+  const ref = (0, import_react4.useRef)(null);
+  const enabled = (features == null ? void 0 : features.scrollToError) !== false;
+  (0, import_react4.useEffect)(() => {
+    if ((validationState == null ? void 0 : validationState.status) === "invalid" && (validationState == null ? void 0 : validationState.message) && enabled) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [validationState == null ? void 0 : validationState.status, validationState == null ? void 0 : validationState.message, enabled]);
+  return { ref };
+};
 var scrollToIfNotVisible = (ref) => {
   const rect = ref == null ? void 0 : ref.getBoundingClientRect();
   if (!ref || !rect) {
@@ -937,22 +950,16 @@ function FieldInput({
   inlineAlert,
   features
 }) {
+  var _a;
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabelContentWithHelp, { text: label, help }) : label;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = (0, import_react4.useRef)(null);
-  const shouldScrollToError = features.scrollToError !== false;
-  (0, import_react4.useEffect)(() => {
-    if (message && shouldScrollToError) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message, shouldScrollToError]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_components8.Field,
     {
       id,
       label: labelContent,
       description,
-      message: message != null ? message : inlineAlert == null ? void 0 : inlineAlert.content,
+      message: (_a = validation == null ? void 0 : validation.message) != null ? _a : inlineAlert == null ? void 0 : inlineAlert.content,
       messageLoading: loadingState !== "idle",
       sentiment: mapStatusToSentiment(validation, inlineAlert == null ? void 0 : inlineAlert.context),
       children
@@ -972,33 +979,30 @@ var mapStatusToSentiment = (validation, defaultContext) => {
 };
 var FieldInput_default = FieldInput;
 
-// ../renderers/src/CheckboxInputRenderer.tsx
-var import_components11 = require("@transferwise/components");
-
-// ../renderers/src/utils/listItem/getMedia.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(OptionMedia, { media, preferAvatar }) : void 0;
-
 // ../renderers/src/utils/listItem/getAdditionalText.tsx
 var import_components9 = require("@transferwise/components");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var getAdditionalText = (additionalText) => {
   if (!additionalText) {
     return void 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components9.ListItem.AdditionalInfo, { children: additionalText });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_components9.ListItem.AdditionalInfo, { children: additionalText });
 };
 
+// ../renderers/src/utils/listItem/getInlineAlert.tsx
+var import_components10 = require("@transferwise/components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components10.ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
+
+// ../renderers/src/utils/listItem/getMedia.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(OptionMedia, { media, preferAvatar }) : void 0;
+
 // ../renderers/src/utils/listItem/getSupportingValues.ts
 var getSupportingValues = (supportingValues) => {
   return __spreadValues(__spreadValues({}, (supportingValues == null ? void 0 : supportingValues.value) ? { valueTitle: supportingValues.value } : {}), (supportingValues == null ? void 0 : supportingValues.subvalue) ? { valueSubtitle: supportingValues.subvalue } : {});
 };
 
-// ../renderers/src/utils/listItem/getInlineAlert.tsx
-var import_components10 = require("@transferwise/components");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.ListItem.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
-
 // ../renderers/src/CheckboxInputRenderer.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var CheckboxInputRenderer = {
@@ -1062,9 +1066,11 @@ var CheckboxItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_components11.ListItem,
     __spreadValues({
       title,
@@ -1075,7 +1081,7 @@ var CheckboxItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.ListItem.Checkbox, { checked: value, onChange: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var SwitchItemComponent = (props) => {
   const {
@@ -1088,9 +1094,11 @@ var SwitchItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_components11.ListItem,
     __spreadValues({
       title,
@@ -1101,7 +1109,7 @@ var SwitchItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.ListItem.Switch, { checked: value, onClick: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
   if ((validationState == null ? void 0 : validationState.status) === "invalid") {
@@ -2510,7 +2518,6 @@ var import_components36 = require("@transferwise/components");
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_components35 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
-var import_react13 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
@@ -2523,14 +2530,7 @@ function UploadFieldInput({
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = (0, import_react13.useRef)(null);
-  const shouldScrollToError = features.scrollToError !== false;
-  (0, import_react13.useEffect)(() => {
-    if (message && shouldScrollToError) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message, shouldScrollToError]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
@@ -2690,9 +2690,9 @@ var import_react_intl15 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 var import_components38 = require("@transferwise/components");
-var import_react14 = require("react");
+var import_react13 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react14.useContext)(import_components38.SnackbarContext);
+  const context = (0, import_react13.useContext)(import_components38.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -2786,7 +2786,7 @@ var ProgressRenderer = {
 var import_components41 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_classnames6 = __toESM(require_classnames());
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_react_intl17 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -2826,6 +2826,7 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
+    features,
     items,
     title,
     validationState,
@@ -2835,7 +2836,8 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = (0, import_react_intl17.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react15.useState)(null);
+  const [openModalType, setOpenModalType] = (0, import_react14.useState)(null);
+  const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -2858,29 +2860,31 @@ function Repeatable(props) {
     setOpenModalType(null);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.Header, { title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-      "div",
-      {
-        className: (0, import_classnames6.default)("form-group", {
-          "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
-        }),
-        children: [
-          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            import_components41.NavigationOption,
-            {
-              media: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons.Plus, {}),
-              title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
-              showMediaAtAllSizes: true,
-              onClick: () => onAddItem()
-            }
-          ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.InlineAlert, { type: "negative", children: validationState.message })
-        ]
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { ref, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.Header, { title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        "div",
+        {
+          className: (0, import_classnames6.default)("form-group", {
+            "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
+          }),
+          children: [
+            items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              import_components41.NavigationOption,
+              {
+                media: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons.Plus, {}),
+                title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
+                showMediaAtAllSizes: true,
+                onClick: () => onAddItem()
+              }
+            ),
+            (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components41.InlineAlert, { type: "negative", children: validationState.message })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_components41.Modal,
       {
@@ -3054,7 +3058,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_components45 = require("@transferwise/components");
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_react_intl22 = require("react-intl");
 
 // ../renderers/src/messages/search.messages.ts
@@ -3117,7 +3121,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react15.useState)(false);
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -3209,7 +3213,7 @@ 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_react16 = require("react");
 var import_react_intl23 = require("react-intl");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function InlineSearchRenderer({
@@ -3223,7 +3227,7 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
   const intl = (0, import_react_intl23.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     FieldInput_default,
@@ -3396,7 +3400,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components49 = require("@transferwise/components");
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -3412,7 +3416,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3528,7 +3532,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_components51 = require("@transferwise/components");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
@@ -3544,7 +3548,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3590,6 +3594,7 @@ function RadioItemRendererComponent(props) {
     children,
     description: rootDescription,
     disabled: rootDisabled,
+    features,
     help,
     title: rootTitle,
     options,
@@ -3597,7 +3602,8 @@ function RadioItemRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { ref, children: [
     rootTitle && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       import_components52.Header,
       {
@@ -3710,12 +3716,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_react19 = 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_react19.useMemo)(() => theming.theme, []);
+  (0, import_react19.useEffect)(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3728,7 +3734,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 var import_components54 = require("@transferwise/components");
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_react_intl25 = require("react-intl");
 
 // ../renderers/src/messages/step.messages.ts
@@ -3756,7 +3762,7 @@ var DefaultFooter = ({ footer }) => {
 };
 var FooterWithScrollButton = ({ footer }) => {
   const { formatMessage } = (0, import_react_intl25.useIntl)();
-  const endOfLayoutRef = (0, import_react21.useRef)(null);
+  const endOfLayoutRef = (0, import_react20.useRef)(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     import_components54.Button,
@@ -3785,8 +3791,8 @@ var FooterWithScrollButton = ({ footer }) => {
   ] });
 };
 var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3970,7 +3976,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components59 = require("@transferwise/components");
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -3989,7 +3995,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react21.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_components59.Tabs,
     {
@@ -4010,7 +4016,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_react21.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.SegmentedControl,
@@ -4032,7 +4038,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_react21.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,
@@ -4287,7 +4293,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 var import_components63 = require("@transferwise/components");
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4295,7 +4301,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_react22.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     import_components63.Nudge,
     {
@@ -4543,7 +4549,7 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_react_intl29 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -4565,7 +4571,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_react23.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -4578,11 +4584,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react25 = require("react");
+var import_react24 = 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_react24.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -4623,10 +4629,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react26.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react25.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_react25.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react25.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -4671,14 +4677,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react27 = require("react");
+var import_react26 = 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_react26.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_react26.useImperativeHandle)(
     ref,
     () => ({
       getValue: async () => {