@wise/dynamic-flow-client-internal 5.15.0-experimental-76b77f2 → 5.15.0-experimental-2996a75

package/build/main.mjs

@@ -305,7 +305,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {
@@ -1088,7 +1088,7 @@ var getInlineAlertOrValidation = (validationState, inlineAlert) => {
 var CheckboxInputRenderer_default = CheckboxInputRenderer;
 
 // ../renderers/src/CollectionRenderer.tsx
-import { Chips, Input, InputGroup, ListItem as ListItem6 } from "@transferwise/components";
+import { Chips, Input, InputGroup, ListItem as ListItem6, ProcessIndicator } from "@transferwise/components";
 
 // ../renderers/src/utils/listItem/getAdditionalInfo.tsx
 import { ListItem as ListItem4 } from "@transferwise/components";
@@ -1164,7 +1164,7 @@ var shouldUseAvatar = (control, tags) => {
 };
 
 // ../renderers/src/CollectionRenderer.tsx
-import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2 } from "react";
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button3 } from "@transferwise/components";
@@ -1240,18 +1240,977 @@ var useIsElementVisible = (elementRef) => {
 
 // ../renderers/src/CollectionRenderer.tsx
 import { Search } from "@transferwise/icons";
+
+// ../../node_modules/.pnpm/@tanstack+react-virtual@3.13.24_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/@tanstack/react-virtual/dist/esm/index.js
+import * as React from "react";
+import { flushSync } from "react-dom";
+
+// ../../node_modules/.pnpm/@tanstack+virtual-core@3.14.0/node_modules/@tanstack/virtual-core/dist/esm/utils.js
+function memo(getDeps, fn, opts) {
+  var _a;
+  let deps = (_a = opts.initialDeps) != null ? _a : [];
+  let result;
+  let isInitial = true;
+  function memoizedFunction() {
+    var _a2, _b, _c;
+    let depTime;
+    if (opts.key && ((_a2 = opts.debug) == null ? void 0 : _a2.call(opts))) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
+    }
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
+    result = fn(...newDeps);
+    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = " " + str;
+        }
+        return str;
+      };
+      console.info(
+        `%c\u23F1 ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * resultFpsPercentage, 120)
+        )}deg 100% 31%);`,
+        opts == null ? void 0 : opts.key
+      );
+    }
+    if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) {
+      opts.onChange(result);
+    }
+    isInitial = false;
+    return result;
+  }
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
+  };
+  return memoizedFunction;
+}
+function notUndefined(value, msg) {
+  if (value === void 0) {
+    throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
+  } else {
+    return value;
+  }
+}
+var approxEqual = (a, b) => Math.abs(a - b) < 1.01;
+var debounce = (targetWindow, fn, ms) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+// ../../node_modules/.pnpm/@tanstack+virtual-core@3.14.0/node_modules/@tanstack/virtual-core/dist/esm/index.js
+var defaultKeyExtractor = (index) => index;
+var defaultRangeExtractor = (range) => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+var addEventListenerOptions = {
+  passive: true
+};
+var observeWindowRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const handler = () => {
+    cb({ width: element.innerWidth, height: element.innerHeight });
+  };
+  handler();
+  element.addEventListener("resize", handler, addEventListenerOptions);
+  return () => {
+    element.removeEventListener("resize", handler);
+  };
+};
+var supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
+var observeWindowOffset = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  let offset = 0;
+  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
+    targetWindow,
+    () => {
+      cb(offset, false);
+    },
+    instance.options.isScrollingResetDelay
+  );
+  const createHandler = (isScrolling) => () => {
+    offset = element[instance.options.horizontal ? "scrollX" : "scrollY"];
+    fallback();
+    cb(offset, isScrolling);
+  };
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
+  if (registerScrollendEvent) {
+    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  }
+  return () => {
+    element.removeEventListener("scroll", handler);
+    if (registerScrollendEvent) {
+      element.removeEventListener("scrollend", endHandler);
+    }
+  };
+};
+var measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size;
+    }
+  }
+  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
+};
+var windowScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+var Virtualizer = class {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.scrollState = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.laneAssignments = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.prevLanes = void 0;
+    this.lanesChangedFlag = false;
+    this.lanesSettling = false;
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.elementsCache = /* @__PURE__ */ new Map();
+    this.now = () => {
+      var _a2;
+      var _a, _b, _c;
+      return (_a2 = (_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) != null ? _a2 : Date.now();
+    };
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const run = () => {
+              const node = entry.target;
+              const index = this.indexFromElement(node);
+              if (!node.isConnected) {
+                this.observer.unobserve(node);
+                return;
+              }
+              if (this.shouldMeasureDuringScroll(index)) {
+                this.resizeItem(
+                  index,
+                  this.options.measureElement(node, entry, this)
+                );
+              }
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          (_a = get()) == null ? void 0 : _a.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      Object.entries(opts2).forEach(([key, value]) => {
+        if (typeof value === "undefined") delete opts2[key];
+      });
+      this.options = __spreadValues({
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {
+        },
+        measureElement,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: true,
+        isRtl: false,
+        useScrollendEvent: false,
+        useAnimationFrameWithResizeObserver: false,
+        laneAssignmentMode: "estimate"
+      }, opts2);
+    };
+    this.notify = (sync) => {
+      var _a, _b;
+      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
+    };
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
+      {
+        key: "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    );
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d) => d());
+      this.unsubs = [];
+      this.observer.disconnect();
+      if (this.rafId != null && this.targetWindow) {
+        this.targetWindow.cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+      }
+      this.scrollState = null;
+      this.scrollElement = null;
+      this.targetWindow = null;
+    };
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _a2;
+      var _a;
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        if (!scrollElement) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = scrollElement;
+        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
+          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
+        } else {
+          this.targetWindow = (_a2 = (_a = this.scrollElement) == null ? void 0 : _a.window) != null ? _a2 : null;
+        }
+        this.elementsCache.forEach((cached) => {
+          this.observer.observe(cached);
+        });
+        this.unsubs.push(
+          this.options.observeElementRect(this, (rect) => {
+            this.scrollRect = rect;
+            this.maybeNotify();
+          })
+        );
+        this.unsubs.push(
+          this.options.observeElementOffset(this, (offset, isScrolling) => {
+            this.scrollAdjustments = 0;
+            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
+            this.scrollOffset = offset;
+            this.isScrolling = isScrolling;
+            if (this.scrollState) {
+              this.scheduleScrollReconcile();
+            }
+            this.maybeNotify();
+          })
+        );
+        this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        });
+      }
+    };
+    this.rafId = null;
+    this.getSize = () => {
+      var _a;
+      if (!this.options.enabled) {
+        this.scrollRect = null;
+        return 0;
+      }
+      this.scrollRect = (_a = this.scrollRect) != null ? _a : this.options.initialRect;
+      return this.scrollRect[this.options.horizontal ? "width" : "height"];
+    };
+    this.getScrollOffset = () => {
+      var _a;
+      if (!this.options.enabled) {
+        this.scrollOffset = null;
+        return 0;
+      }
+      this.scrollOffset = (_a = this.scrollOffset) != null ? _a : typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset;
+      return this.scrollOffset;
+    };
+    this.getFurthestMeasurement = (measurements, index) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
+      const furthestMeasurements = /* @__PURE__ */ new Map();
+      for (let m = index - 1; m >= 0; m--) {
+        const measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        const previousFurthestMeasurement = furthestMeasurements.get(
+          measurement.lane
+        );
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
+        return a.end - b.end;
+      })[0] : void 0;
+    };
+    this.getMeasurementOptions = memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled,
+        this.options.lanes,
+        this.options.laneAssignmentMode
+      ],
+      (count, paddingStart, scrollMargin, getItemKey, enabled, lanes, laneAssignmentMode) => {
+        const lanesChanged = this.prevLanes !== void 0 && this.prevLanes !== lanes;
+        if (lanesChanged) {
+          this.lanesChangedFlag = true;
+        }
+        this.prevLanes = lanes;
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled,
+          lanes,
+          laneAssignmentMode
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getMeasurements = memo(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({
+        count,
+        paddingStart,
+        scrollMargin,
+        getItemKey,
+        enabled,
+        lanes,
+        laneAssignmentMode
+      }, itemSizeCache) => {
+        if (!enabled) {
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          this.laneAssignments.clear();
+          return [];
+        }
+        if (this.laneAssignments.size > count) {
+          for (const index of this.laneAssignments.keys()) {
+            if (index >= count) {
+              this.laneAssignments.delete(index);
+            }
+          }
+        }
+        if (this.lanesChangedFlag) {
+          this.lanesChangedFlag = false;
+          this.lanesSettling = true;
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          this.laneAssignments.clear();
+          this.pendingMeasuredCacheIndexes = [];
+        }
+        if (this.measurementsCache.length === 0 && !this.lanesSettling) {
+          this.measurementsCache = this.options.initialMeasurementsCache;
+          this.measurementsCache.forEach((item) => {
+            this.itemSizeCache.set(item.key, item.size);
+          });
+        }
+        const min = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        if (this.lanesSettling && this.measurementsCache.length === count) {
+          this.lanesSettling = false;
+        }
+        const measurements = this.measurementsCache.slice(0, min);
+        const laneLastIndex = new Array(lanes).fill(
+          void 0
+        );
+        for (let m = 0; m < min; m++) {
+          const item = measurements[m];
+          if (item) {
+            laneLastIndex[item.lane] = m;
+          }
+        }
+        for (let i = min; i < count; i++) {
+          const key = getItemKey(i);
+          const cachedLane = this.laneAssignments.get(i);
+          let lane;
+          let start;
+          const shouldCacheLane = laneAssignmentMode === "estimate" || itemSizeCache.has(key);
+          if (cachedLane !== void 0 && this.options.lanes > 1) {
+            lane = cachedLane;
+            const prevIndex = laneLastIndex[lane];
+            const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
+            start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
+          } else {
+            const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+            start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+            lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+            if (this.options.lanes > 1 && shouldCacheLane) {
+              this.laneAssignments.set(i, lane);
+            }
+          }
+          const measuredSize = itemSizeCache.get(key);
+          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end = start + size;
+          measurements[i] = {
+            index: i,
+            start,
+            size,
+            end,
+            key,
+            lane
+          };
+          laneLastIndex[lane] = i;
+        }
+        this.measurementsCache = measurements;
+        return measurements;
+      },
+      {
+        key: "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (measurements, outerSize, scrollOffset, lanes) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset,
+          lanes
+        }) : null;
+      },
+      {
+        key: "calculateRange",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualIndexes = memo(
+      () => {
+        let startIndex = null;
+        let endIndex = null;
+        const range = this.calculateRange();
+        if (range) {
+          startIndex = range.startIndex;
+          endIndex = range.endIndex;
+        }
+        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
+        return [
+          this.options.rangeExtractor,
+          this.options.overscan,
+          this.options.count,
+          startIndex,
+          endIndex
+        ];
+      },
+      (rangeExtractor, overscan, count, startIndex, endIndex) => {
+        return startIndex === null || endIndex === null ? [] : rangeExtractor({
+          startIndex,
+          endIndex,
+          overscan,
+          count
+        });
+      },
+      {
+        key: "getVirtualIndexes",
+        debug: () => this.options.debug
+      }
+    );
+    this.indexFromElement = (node) => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(
+          `Missing attribute name '${attributeName}={index}' on measured element.`
+        );
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this.shouldMeasureDuringScroll = (index) => {
+      var _a2;
+      var _a;
+      if (!this.scrollState || this.scrollState.behavior !== "smooth") {
+        return true;
+      }
+      const scrollIndex = (_a2 = this.scrollState.index) != null ? _a2 : (_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index;
+      if (scrollIndex !== void 0 && this.range) {
+        const bufferSize = Math.max(
+          this.options.overscan,
+          Math.ceil((this.range.endIndex - this.range.startIndex) / 2)
+        );
+        const minIndex = Math.max(0, scrollIndex - bufferSize);
+        const maxIndex = Math.min(
+          this.options.count - 1,
+          scrollIndex + bufferSize
+        );
+        return index >= minIndex && index <= maxIndex;
+      }
+      return true;
+    };
+    this.measureElement = (node) => {
+      if (!node) {
+        this.elementsCache.forEach((cached, key2) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key2);
+          }
+        });
+        return;
+      }
+      const index = this.indexFromElement(node);
+      const key = this.options.getItemKey(index);
+      const prevNode = this.elementsCache.get(key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node);
+        this.elementsCache.set(key, node);
+      }
+      if ((!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(index)) {
+        this.resizeItem(index, this.options.measureElement(node, void 0, this));
+      }
+    };
+    this.resizeItem = (index, size) => {
+      var _a2;
+      var _a;
+      const item = this.measurementsCache[index];
+      if (!item) return;
+      const itemSize = (_a2 = this.itemSizeCache.get(item.key)) != null ? _a2 : item.size;
+      const delta = size - itemSize;
+      if (delta !== 0) {
+        if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments)) {
+          if (this.options.debug) {
+            console.info("correction", delta);
+          }
+          this._scrollToOffset(this.getScrollOffset(), {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: void 0
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(item.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
+        this.notify(false);
+      }
+    };
+    this.getVirtualItems = memo(
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
+      (indexes, measurements) => {
+        const virtualItems = [];
+        for (let k = 0, len = indexes.length; k < len; k++) {
+          const i = indexes[k];
+          const measurement = measurements[i];
+          virtualItems.push(measurement);
+        }
+        return virtualItems;
+      },
+      {
+        key: "getVirtualItems",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualItemForOffset = (offset) => {
+      const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return void 0;
+      }
+      return notUndefined(
+        measurements[findNearestBinarySearch(
+          0,
+          measurements.length - 1,
+          (index) => notUndefined(measurements[index]).start,
+          offset
+        )]
+      );
+    };
+    this.getMaxScrollOffset = () => {
+      if (!this.scrollElement) return 0;
+      if ("scrollHeight" in this.scrollElement) {
+        return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
+      } else {
+        const doc = this.scrollElement.document.documentElement;
+        return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
+      }
+    };
+    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
+      if (!this.scrollElement) return 0;
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        align = toOffset >= scrollOffset + size ? "end" : "start";
+      }
+      if (align === "center") {
+        toOffset += (itemSize - size) / 2;
+      } else if (align === "end") {
+        toOffset -= size;
+      }
+      const maxOffset = this.getMaxScrollOffset();
+      return Math.max(Math.min(maxOffset, toOffset), 0);
+    };
+    this.getOffsetForIndex = (index, align = "auto") => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      const item = this.measurementsCache[index];
+      if (!item) return;
+      if (align === "auto") {
+        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
+          align = "end";
+        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
+          align = "start";
+        } else {
+          return [scrollOffset, align];
+        }
+      }
+      if (align === "end" && index === this.options.count - 1) {
+        return [this.getMaxScrollOffset(), align];
+      }
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(toOffset, align, item.size),
+        align
+      ];
+    };
+    this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
+      const offset = this.getOffsetForAlignment(toOffset, align);
+      const now = this.now();
+      this.scrollState = {
+        index: null,
+        align,
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      this.scheduleScrollReconcile();
+    };
+    this.scrollToIndex = (index, {
+      align: initialAlign = "auto",
+      behavior = "auto"
+    } = {}) => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const offsetInfo = this.getOffsetForIndex(index, initialAlign);
+      if (!offsetInfo) {
+        return;
+      }
+      const [offset, align] = offsetInfo;
+      const now = this.now();
+      this.scrollState = {
+        index,
+        align,
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      this.scheduleScrollReconcile();
+    };
+    this.scrollBy = (delta, { behavior = "auto" } = {}) => {
+      const offset = this.getScrollOffset() + delta;
+      const now = this.now();
+      this.scrollState = {
+        index: null,
+        align: "start",
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      this.scheduleScrollReconcile();
+    };
+    this.getTotalSize = () => {
+      var _a2;
+      var _a;
+      const measurements = this.getMeasurements();
+      let end;
+      if (measurements.length === 0) {
+        end = this.options.paddingStart;
+      } else if (this.options.lanes === 1) {
+        end = (_a2 = (_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) != null ? _a2 : 0;
+      } else {
+        const endByLane = Array(this.options.lanes).fill(null);
+        let endIndex = measurements.length - 1;
+        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+          const item = measurements[endIndex];
+          if (endByLane[item.lane] === null) {
+            endByLane[item.lane] = item.end;
+          }
+          endIndex--;
+        }
+        end = Math.max(...endByLane.filter((val) => val !== null));
+      }
+      return Math.max(
+        end - this.options.scrollMargin + this.options.paddingEnd,
+        0
+      );
+    };
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+    };
+    this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map();
+      this.laneAssignments = /* @__PURE__ */ new Map();
+      this.notify(false);
+    };
+    this.setOptions(opts);
+  }
+  scheduleScrollReconcile() {
+    if (!this.targetWindow) {
+      this.scrollState = null;
+      return;
+    }
+    if (this.rafId != null) return;
+    this.rafId = this.targetWindow.requestAnimationFrame(() => {
+      this.rafId = null;
+      this.reconcileScroll();
+    });
+  }
+  reconcileScroll() {
+    if (!this.scrollState) return;
+    const el = this.scrollElement;
+    if (!el) return;
+    const MAX_RECONCILE_MS = 5e3;
+    if (this.now() - this.scrollState.startedAt > MAX_RECONCILE_MS) {
+      this.scrollState = null;
+      return;
+    }
+    const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
+    const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
+    const STABLE_FRAMES = 1;
+    const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
+    if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
+      this.scrollState.stableFrames++;
+      if (this.scrollState.stableFrames >= STABLE_FRAMES) {
+        this.scrollState = null;
+        return;
+      }
+    } else {
+      this.scrollState.stableFrames = 0;
+      if (targetChanged) {
+        this.scrollState.lastTargetOffset = targetOffset;
+        this.scrollState.behavior = "auto";
+        this._scrollToOffset(targetOffset, {
+          adjustments: void 0,
+          behavior: "auto"
+        });
+      }
+    }
+    this.scheduleScrollReconcile();
+  }
+};
+var findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange({
+  measurements,
+  outerSize,
+  scrollOffset,
+  lanes
+}) {
+  const lastIndex = measurements.length - 1;
+  const getOffset = (index) => measurements[index].start;
+  if (measurements.length <= lanes) {
+    return {
+      startIndex: 0,
+      endIndex: lastIndex
+    };
+  }
+  let startIndex = findNearestBinarySearch(
+    0,
+    lastIndex,
+    getOffset,
+    scrollOffset
+  );
+  let endIndex = startIndex;
+  if (lanes === 1) {
+    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
+      endIndex++;
+    }
+  } else if (lanes > 1) {
+    const endPerLane = Array(lanes).fill(0);
+    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+      const item = measurements[endIndex];
+      endPerLane[item.lane] = item.end;
+      endIndex++;
+    }
+    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+      const item = measurements[startIndex];
+      startPerLane[item.lane] = item.start;
+      startIndex--;
+    }
+    startIndex = Math.max(0, startIndex - startIndex % lanes);
+    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+  }
+  return { startIndex, endIndex };
+}
+
+// ../../node_modules/.pnpm/@tanstack+react-virtual@3.13.24_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/@tanstack/react-virtual/dist/esm/index.js
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase(_a) {
+  var _b = _a, {
+    useFlushSync = true
+  } = _b, options = __objRest(_b, [
+    "useFlushSync"
+  ]);
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = __spreadProps(__spreadValues({}, options), {
+    onChange: (instance2, sync) => {
+      var _a2;
+      if (useFlushSync && sync) {
+        flushSync(rerender);
+      } else {
+        rerender();
+      }
+      (_a2 = options.onChange) == null ? void 0 : _a2.call(options, instance2, sync);
+    }
+  });
+  const [instance] = React.useState(
+    () => new Virtualizer(resolvedOptions)
+  );
+  instance.setOptions(resolvedOptions);
+  useIsomorphicLayoutEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useWindowVirtualizer(options) {
+  return useVirtualizerBase(__spreadValues({
+    getScrollElement: () => typeof document !== "undefined" ? window : null,
+    observeElementRect: observeWindowRect,
+    observeElementOffset: observeWindowOffset,
+    scrollToFn: windowScroll,
+    initialOffset: () => typeof document !== "undefined" ? window.scrollY : 0
+  }, options));
+}
+
+// ../renderers/src/CollectionRenderer.tsx
 import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs5 } from "react/jsx-runtime";
-var CollectionRendererComponent = ({
-  control,
-  state,
-  filters,
-  search,
-  tags,
-  loadMore
-}) => {
+var CollectionRendererComponent = (props) => {
+  const { state, filters, search, loading, loadMore } = props;
   const endOfContentRef = useRef2(null);
   const isBottomVisible = useIsElementVisible(endOfContentRef);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isBottomVisible) {
       loadMore == null ? void 0 : loadMore();
     }
@@ -1303,44 +2262,147 @@ var CollectionRendererComponent = ({
         JSON.stringify(filter.options)
       );
     }),
-    state.type === "collection-content" ? state.sections.map((section) => {
-      return /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx27(Header, { title: section.title, callToAction: section.callToAction }),
-        section.items.map((item) => {
-          var _a, _b;
-          const {
-            title: itemTitle,
-            description,
-            supportingValues,
-            media,
-            additionalInfo,
-            inlineAlert,
-            callToAction: itemCallToAction,
-            tags: itemTags
-          } = item;
-          const controlOptions = {
-            ctaSecondary: (_a = itemTags == null ? void 0 : itemTags.includes("cta-secondary")) != null ? _a : false,
-            fullyInteractive: (_b = (tags == null ? void 0 : tags.includes("fully-interactive")) && (additionalInfo == null ? void 0 : additionalInfo.onClick) == null) != null ? _b : false
-          };
+    state.type === "collection-content" ? /* @__PURE__ */ jsx27(ContentComponent, __spreadProps(__spreadValues({}, props), { state })) : state.children,
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        ref: endOfContentRef,
+        style: {
+          marginLeft: "auto",
+          marginRight: "auto",
+          display: "flex"
+        },
+        children: loading ? /* @__PURE__ */ jsx27(ProcessIndicator, { size: "xs" }) : null
+      }
+    )
+  ] });
+};
+var ContentComponent = (props) => {
+  const { state, tags, control } = props;
+  const stateCount = state.sections.reduce(
+    (total, section) => section.items.length + total + (section.title ? 1 : 0),
+    0
+  );
+  const items = useMemo(() => {
+    return state.sections.reduce((acc, section) => {
+      return [
+        ...acc,
+        ...section.title ? [{ type: "header", title: section.title }] : [],
+        ...section.items.map((item) => ({
+          item,
+          type: "item"
+        }))
+      ];
+    }, []);
+  }, [stateCount]);
+  const listRef = useRef2(null);
+  const listOffsetRef = useRef2(0);
+  useLayoutEffect2(() => {
+    var _a, _b;
+    listOffsetRef.current = (_b = (_a = listRef.current) == null ? void 0 : _a.offsetTop) != null ? _b : 0;
+  });
+  const virtualizer = useWindowVirtualizer({
+    count: stateCount,
+    estimateSize: () => 120,
+    overscan: 10,
+    // eslint-disable-next-line react-hooks/refs
+    scrollMargin: listOffsetRef.current
+  });
+  return /* @__PURE__ */ jsx27("div", { ref: listRef, children: /* @__PURE__ */ jsx27(
+    "div",
+    {
+      style: {
+        height: `${virtualizer.getTotalSize()}px`,
+        width: "100%",
+        position: "relative"
+      },
+      children: virtualizer.getVirtualItems().map((item) => {
+        const i = items[item.index];
+        if (!i) {
+          return null;
+        }
+        if (i.type === "header") {
           return /* @__PURE__ */ jsx27(
-            ListItem6,
+            "div",
             {
-              title: itemTitle,
-              subtitle: description,
-              valueTitle: supportingValues == null ? void 0 : supportingValues.value,
-              valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
-              media: getMedia(media, shouldUseAvatar(control, itemTags)),
-              prompt: getInlineAlert(inlineAlert),
-              additionalInfo: getAdditionalInfo(additionalInfo),
-              control: getCTAControl(itemCallToAction, controlOptions)
+              ref: virtualizer.measureElement,
+              "data-index": item.index,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+              },
+              children: /* @__PURE__ */ jsx27(Header, { title: i.title, callToAction: i.callToAction })
             },
-            itemTitle
+            item.key
           );
-        })
-      ] }, section.id);
-    }) : state.children,
-    /* @__PURE__ */ jsx27("div", { ref: endOfContentRef, "aria-hidden": true })
-  ] });
+        }
+        return /* @__PURE__ */ jsx27(
+          "div",
+          {
+            ref: virtualizer.measureElement,
+            "data-index": item.index,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+            },
+            children: /* @__PURE__ */ jsx27(ItemComponent, __spreadProps(__spreadValues({}, i.item), { parentTags: tags, control }))
+          },
+          item.key
+        );
+      })
+    }
+  ) });
+};
+var getNavigationControl = (onClick, href) => {
+  if (href) {
+    return /* @__PURE__ */ jsx27(ListItem6.Navigation, { href });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx27(ListItem6.Navigation, { onClick });
+  }
+  return null;
+};
+var ItemComponent = (props) => {
+  var _a, _b;
+  const {
+    title,
+    description,
+    supportingValues,
+    media,
+    additionalInfo,
+    inlineAlert,
+    href,
+    onClick,
+    callToAction,
+    tags,
+    parentTags,
+    control
+  } = props;
+  const controlOptions = {
+    ctaSecondary: (_a = tags == null ? void 0 : tags.includes("cta-secondary")) != null ? _a : false,
+    fullyInteractive: (_b = (tags == null ? void 0 : tags.includes("fully-interactive")) && (additionalInfo == null ? void 0 : additionalInfo.onClick) == null) != null ? _b : false
+  };
+  console.log("title", title, "onClick", onClick, "href", href, "cta", callToAction);
+  return /* @__PURE__ */ jsx27(
+    ListItem6,
+    {
+      title,
+      subtitle: description,
+      valueTitle: supportingValues == null ? void 0 : supportingValues.value,
+      valueSubtitle: supportingValues == null ? void 0 : supportingValues.subvalue,
+      media: getMedia(media, shouldUseAvatar(control, parentTags)),
+      prompt: getInlineAlert(inlineAlert),
+      additionalInfo: getAdditionalInfo(additionalInfo),
+      control: onClick || href ? getNavigationControl(onClick, href) : getCTAControl(callToAction, controlOptions)
+    },
+    title
+  );
 };
 var CollectionRenderer = {
   canRenderType: "collection",
@@ -1491,7 +2553,7 @@ import { ListItem as ListItem7 } from "@transferwise/components";
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 import { Header as Header3, SearchInput } from "@transferwise/components";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { useIntl as useIntl5 } from "react-intl";
 
 // ../renderers/src/messages/filter.messages.ts
@@ -1637,7 +2699,7 @@ var UnfilteredDecisionList = (_a) => {
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = useIntl5();
-  const [query, setQuery] = useState5("");
+  const [query, setQuery] = useState6("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
   const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortDecisionOptions(options, query) : options;
   const isGrouped = isGroupedDecision(options);
@@ -1754,7 +2816,7 @@ var external_confirmation_messages_default = defineMessages6({
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl6 } from "react-intl";
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -1767,7 +2829,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = useIntl6();
-  useEffect6(() => {
+  useEffect7(() => {
     open();
   }, []);
   return /* @__PURE__ */ jsx35(
@@ -1881,7 +2943,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1900,8 +2962,8 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = useState6("");
-  useEffect7(() => {
+  const [imageSource, setImageSource] = useState7("");
+  useEffect8(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -1967,7 +3029,7 @@ import {
   Illustration,
   isIllustrationSupport3D
 } from "@wise/art";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
@@ -2017,7 +3079,7 @@ function UrnIllustration({
   size,
   uri
 }) {
-  const [has3DFailed, setHas3DFailed] = useState7(false);
+  const [has3DFailed, setHas3DFailed] = useState8(false);
   const illustrationSize = getIllustrationSize(size);
   const illustrationName = getIllustrationName(uri);
   const illustration3DName = getIllustration3DName(uri);
@@ -2312,7 +3374,7 @@ var mapAvatarMediaSize = (size) => {
 
 // ../renderers/src/ModalLayoutRenderer.tsx
 import { Button as Button5, Modal as Modal2 } from "@transferwise/components";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx52, jsxs as jsxs13 } from "react/jsx-runtime";
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
@@ -2320,7 +3382,7 @@ var ModalLayoutRenderer = {
 };
 var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = useState8(false);
+  const [visible, setVisible] = useState9(false);
   const { children, title } = content;
   return /* @__PURE__ */ jsxs13("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx52(Button5, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -2350,7 +3412,7 @@ var ModalRenderer = {
 
 // ../renderers/src/MoneyInputRenderer.tsx
 import { MoneyInput } from "@transferwise/components";
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
 import { jsx as jsx54 } from "react/jsx-runtime";
 var groupingTags2 = Object.keys(group_messages_default).filter((key) => key !== "all");
@@ -2373,7 +3435,7 @@ function MoneyInputRendererComponent(props) {
     onAmountChange,
     onCurrencyChange
   } = props;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isValidIndex(selectedCurrencyIndex, currencies.length)) {
       onCurrencyChange(0);
     }
@@ -2515,7 +3577,7 @@ function InlineComponent(props) {
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { useIntl as useIntl8 } from "react-intl";
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -2532,7 +3594,7 @@ var multi_select_messages_default = defineMessages7({
 import { jsx as jsx56 } from "react/jsx-runtime";
 function DefaultComponent(props) {
   const { formatMessage } = useIntl8();
-  const [stagedIndices, setStagedIndices] = useState9();
+  const [stagedIndices, setStagedIndices] = useState10();
   const {
     id,
     autoComplete,
@@ -2952,7 +4014,7 @@ var ProgressRenderer = {
 var import_classnames6 = __toESM(require_classnames());
 import { Button as Button7, 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 { useState as useState11 } from "react";
 import { useIntl as useIntl10 } from "react-intl";
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -3001,7 +4063,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = useIntl10();
-  const [openModalType, setOpenModalType] = useState10(null);
+  const [openModalType, setOpenModalType] = useState11(null);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -3220,7 +4282,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Input as Input5, InputGroup as InputGroup4, List, ListItem as ListItem11, Markdown as Markdown5 } from "@transferwise/components";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { useIntl as useIntl13 } from "react-intl";
 
 // ../renderers/src/messages/search.messages.ts
@@ -3282,7 +4344,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = useState11(false);
+  const [hasSearched, setHasSearched] = useState12(false);
   const { formatMessage } = useIntl13();
   return /* @__PURE__ */ jsxs20("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx68(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx68(InputGroup4, { addonStart: { content: /* @__PURE__ */ jsx68(Search2, { size: 24 }) }, children: /* @__PURE__ */ jsx68(
@@ -3363,7 +4425,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 import { Markdown as Markdown6, Typeahead } from "@transferwise/components";
 import { Search as Search3 } from "@transferwise/icons";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 import { jsx as jsx69 } from "react/jsx-runtime";
 function InlineSearchRenderer({
@@ -3376,7 +4438,7 @@ function InlineSearchRenderer({
   title,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = useState12(false);
+  const [hasSearched, setHasSearched] = useState13(false);
   const intl = useIntl14();
   return /* @__PURE__ */ jsx69("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx69(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx69(
     Typeahead,
@@ -3536,7 +4598,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { Fragment as Fragment11, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -3551,7 +4613,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3664,7 +4726,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment13, jsx as jsx75, jsxs as jsxs25 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -3679,7 +4741,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3835,12 +4897,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect11, useMemo } from "react";
+import { useEffect as useEffect12, useMemo as useMemo2 } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = useTheme();
-  const previousTheme = useMemo(() => theming.theme, []);
-  useEffect11(() => {
+  const previousTheme = useMemo2(() => theming.theme, []);
+  useEffect12(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -4021,7 +5083,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 import { Chips as Chips2, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { jsx as jsx86, jsxs as jsxs35 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -4040,7 +5102,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = useState13(0);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
   return /* @__PURE__ */ jsx86("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx86(
     Tabs2,
     {
@@ -4061,7 +5123,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState13(0);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
   return /* @__PURE__ */ jsxs35("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx86(
       SegmentedControl2,
@@ -4083,7 +5145,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState13(0);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
   return /* @__PURE__ */ jsxs35("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx86("div", { className: "chips-container", children: /* @__PURE__ */ jsx86(
       Chips2,
@@ -4326,7 +5388,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 import { Nudge } from "@transferwise/components";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4334,7 +5396,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = useState14(true);
+  const [isVisible, setIsVisible] = useState15(true);
   return isVisible ? /* @__PURE__ */ jsx90(
     Nudge,
     {
@@ -4624,9 +5686,9 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo2(() => getMergedRenderers(props), [renderers]);
-  const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const mergedRenderers = useMemo3(() => getMergedRenderers(props), [renderers]);
+  const logEvent = useMemo3(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = useMemo3(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,