@oliasoft-open-source/react-ui-library 4.17.0-beta-3 → 4.17.1

package/dist/index.js

@@ -11,12 +11,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var _docChanged, _ignoreNextExit, _suggesters, _next, _prev, _handlerMatches, _ignored, _removed, _lastChangeFromAppend, _a;
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React$4 from "react";
-import React__default, { useContext, isValidElement, useState, useRef, useEffect, useCallback, createElement, forwardRef, useMemo, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, memo as memo$1, cloneElement as cloneElement$1, PureComponent, useImperativeHandle } from "react";
+import React__default, { useContext, isValidElement, useState, useRef, useEffect, useCallback, createElement, forwardRef, useMemo, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, memo, cloneElement as cloneElement$1, PureComponent, useImperativeHandle } from "react";
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
-import ReactDOM, { createPortal, flushSync as flushSync$1, unstable_batchedUpdates, render } from "react-dom";
-import { noop as noop$2, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$1, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$3, isObject as isObject$5, isEqual as isEqual$3 } from "lodash";
-import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue, withUnit, convertSamePrecision, convertAndGetValue, split as split$1, label as label$b, isValidNum, getAltUnitsListByQuantity, altUnitsList, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
+import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
+import { noop as noop$2, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$1, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isEqual as isEqual$3 } from "lodash";
+import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue, withUnit, convertSamePrecision, convertAndGetValue, split as split$1, label as label$b, isValidNum, getAltUnitsListByQuantity, altUnitsList, withPrettyUnitLabel, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -222,32 +222,32 @@ function _setPrototypeOf$3(t, e2) {
 function _inheritsLoose$3(t, o) {
   t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf$3(t, o);
 }
-var extendStatics = function(d2, b2) {
-  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+var extendStatics$1 = function(d2, b2) {
+  extendStatics$1 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
     d3.__proto__ = b3;
   } || function(d3, b3) {
     for (var p in b3) if (Object.prototype.hasOwnProperty.call(b3, p)) d3[p] = b3[p];
   };
-  return extendStatics(d2, b2);
+  return extendStatics$1(d2, b2);
 };
-function __extends(d2, b2) {
+function __extends$1(d2, b2) {
   if (typeof b2 !== "function" && b2 !== null)
     throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-  extendStatics(d2, b2);
+  extendStatics$1(d2, b2);
   function __() {
     this.constructor = d2;
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-var __assign$3 = function() {
-  __assign$3 = Object.assign || function __assign2(t) {
+var __assign$4 = function() {
+  __assign$4 = Object.assign || function __assign2(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$3.apply(this, arguments);
+  return __assign$4.apply(this, arguments);
 };
 function __rest$1(s, e2) {
   var t = {};
@@ -883,15 +883,15 @@ var DefaultContext = {
   attr: void 0
 };
 var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-var __assign$2 = function() {
-  __assign$2 = Object.assign || function(t) {
+var __assign$3 = function() {
+  __assign$3 = Object.assign || function(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$2.apply(this, arguments);
+  return __assign$3.apply(this, arguments);
 };
 var __rest = function(s, e2) {
   var t = {};
@@ -903,15 +903,15 @@ var __rest = function(s, e2) {
 };
 function Tree2Element(tree2) {
   return tree2 && tree2.map(function(node2, i) {
-    return React__default.createElement(node2.tag, __assign$2({
+    return React__default.createElement(node2.tag, __assign$3({
       key: i
     }, node2.attr), Tree2Element(node2.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React__default.createElement(IconBase, __assign$2({
-      attr: __assign$2({}, data.attr)
+    return React__default.createElement(IconBase, __assign$3({
+      attr: __assign$3({}, data.attr)
     }, props), Tree2Element(data.child));
   };
 }
@@ -922,13 +922,13 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default.createElement("svg", __assign$2({
+    return React__default.createElement("svg", __assign$3({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className,
-      style: __assign$2(__assign$2({
+      style: __assign$3(__assign$3({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -1808,7 +1808,7 @@ var requestAnimationFrame$1 = function() {
   };
 }();
 var trailingTimeout = 2;
-function throttle$1(callback, delay) {
+function throttle$2(callback, delay) {
   var leadingCall = false, trailingCall = false, lastCallTime = 0;
   function resolvePending() {
     if (leadingCall) {
@@ -1850,7 +1850,7 @@ var ResizeObserverController$1 = (
       this.mutationsObserver_ = null;
       this.observers_ = [];
       this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
-      this.refresh = throttle$1(this.refresh.bind(this), REFRESH_DELAY);
+      this.refresh = throttle$2(this.refresh.bind(this), REFRESH_DELAY);
     }
     ResizeObserverController2.prototype.addObserver = function(observer) {
       if (!~this.observers_.indexOf(observer)) {
@@ -2354,7 +2354,7 @@ function useEventSubscriptions() {
     };
   }, []);
 }
-var useIsomorphicLayoutEffect$6 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$5 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
 function useLastState(currentState, enabled) {
   var lastState = useRef(currentState);
   if (!enabled) {
@@ -2602,7 +2602,7 @@ function useTrackElements(_ref) {
     resetWhenReferenceChangedWhileTracking(previousTrigger, trigger2);
   }, [get3, set2, resetWhenReferenceChangedWhileTracking, getScrollContainers]));
   var triggerOptionParent = triggerOption == null ? void 0 : triggerOption.getParent == null ? void 0 : triggerOption.getParent();
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (!triggerOptionParent) {
       return;
     }
@@ -2612,7 +2612,7 @@ function useTrackElements(_ref) {
       });
     });
   }, [triggerOptionParent, set2, getScrollContainers]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (enabled) {
       if (!hasEventSubscriptions()) {
         addEventListeners();
@@ -2624,7 +2624,7 @@ function useTrackElements(_ref) {
       }
     };
   }, [enabled, hasEventSubscriptions, addEventListeners, removeAllEventSubscriptions]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (enabled) {
       handleChange();
     }
@@ -5308,15 +5308,15 @@ const Card = ({
     }
   );
 };
-var __assign$1 = function() {
-  __assign$1 = Object.assign || function __assign2(t) {
+var __assign$2 = function() {
+  __assign$2 = Object.assign || function __assign2(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign$2.apply(this, arguments);
 };
 function __spreadArray$1(to2, from3, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from3.length, ar2; i < l; i++) {
@@ -6149,7 +6149,7 @@ var Ie = function(e2) {
   function e2(e3, n2, o) {
     void 0 === e3 && (e3 = C), void 0 === n2 && (n2 = {});
     var r2 = this;
-    this.options = __assign$1(__assign$1({}, Te), e3), this.gs = n2, this.names = new Map(o), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
+    this.options = __assign$2(__assign$2({}, Te), e3), this.gs = n2, this.names = new Map(o), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
       return function(e4) {
         for (var t = e4.getTag(), n3 = t.length, o2 = "", r3 = function(n4) {
           var r4 = function(e5) {
@@ -6172,7 +6172,7 @@ var Ie = function(e2) {
   }, e2.prototype.rehydrate = function() {
     !this.server && S && _e(this);
   }, e2.prototype.reconstructWithOptions = function(n2, o) {
-    return void 0 === o && (o = true), new e2(__assign$1(__assign$1({}, this.options), n2), this.gs, o && this.names || void 0);
+    return void 0 === o && (o = true), new e2(__assign$2(__assign$2({}, this.options), n2), this.gs, o && this.names || void 0);
   }, e2.prototype.allocateGSInstance = function(e3) {
     return this.gs[e3] = (this.gs[e3] || 0) + 1;
   }, e2.prototype.getTag = function() {
@@ -6345,9 +6345,9 @@ function it$1(e2, r2, s) {
       var i2 = e4.attrs, a3 = e4.componentStyle, c3 = e4.defaultProps, p2 = e4.foldedComponentIds, d3 = e4.styledComponentId, h2 = e4.target, f3 = React__default.useContext(et$1), m3 = Ge(), y3 = e4.shouldForwardProp || m3.shouldForwardProp;
       "production" !== process.env.NODE_ENV && useDebugValue(d3);
       var v2 = I(r4, f3, c3) || C, g3 = function(e5, n2, o) {
-        for (var r5, s3 = __assign$1(__assign$1({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
+        for (var r5, s3 = __assign$2(__assign$2({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
           var a4 = re(r5 = e5[i3]) ? r5(s3) : r5;
-          for (var c4 in a4) s3[c4] = "className" === c4 ? ie$2(s3[c4], a4[c4]) : "style" === c4 ? __assign$1(__assign$1({}, s3[c4]), a4[c4]) : a4[c4];
+          for (var c4 in a4) s3[c4] = "className" === c4 ? ie$2(s3[c4], a4[c4]) : "style" === c4 ? __assign$2(__assign$2({}, s3[c4]), a4[c4]) : a4[c4];
         }
         return n2.className && (s3.className = ie$2(s3.className, n2.className)), s3;
       }(i2, r4, v2), S3 = g3.as || h2, w3 = {};
@@ -6403,9 +6403,9 @@ function ut(n2, o, r2) {
     return n2(o, r2, lt$1.apply(void 0, __spreadArray$1([t], s2, false)));
   };
   return s.attrs = function(e2) {
-    return ut(n2, o, __assign$1(__assign$1({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
+    return ut(n2, o, __assign$2(__assign$2({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
   }, s.withConfig = function(e2) {
-    return ut(n2, o, __assign$1(__assign$1({}, r2), e2));
+    return ut(n2, o, __assign$2(__assign$2({}, r2), e2));
   }, s;
 }
 var pt$1 = function(e2) {
@@ -9501,803 +9501,383 @@ const InputGroupAddon = ({
   })();
   return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
-function memo(getDeps, fn, opts) {
-  let deps = opts.initialDeps ?? [];
-  let result;
-  return () => {
-    var _a2, _b, _c, _d;
-    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, index2) => deps[index2] !== 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⏱ ${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
-      );
-    }
-    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
-    return result;
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+var extendStatics = function(d2, b2) {
+  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+    d3.__proto__ = b3;
+  } || function(d3, b3) {
+    for (var p in b3) if (b3.hasOwnProperty(p)) d3[p] = b3[p];
   };
-}
-function notUndefined(value, msg2) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
+  return extendStatics(d2, b2);
+};
+function __extends(d2, b2) {
+  extendStatics(d2, b2);
+  function __() {
+    this.constructor = d2;
   }
+  d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-const approxEqual = (a2, b2) => Math.abs(a2 - b2) < 1;
-const debounce$2 = (targetWindow, fn, ms2) => {
-  let timeoutId;
-  return function(...args) {
-    targetWindow.clearTimeout(timeoutId);
-    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms2);
+var __assign$1 = function() {
+  __assign$1 = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
   };
+  return __assign$1.apply(this, arguments);
 };
-const defaultKeyExtractor = (index2) => index2;
-const defaultRangeExtractor = (range2) => {
-  const start = Math.max(range2.startIndex - range2.overscan, 0);
-  const end = Math.min(range2.endIndex + range2.overscan, range2.count - 1);
-  const arr = [];
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-const observeElementRect = (instance, cb2) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
+function throttle$1(delay, noTrailing, callback, debounceMode) {
+  var timeoutID;
+  var cancelled = false;
+  var lastExec = 0;
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
   }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
+  function cancel() {
+    clearExistingTimeout();
+    cancelled = true;
   }
-  const handler = (rect) => {
-    const { width: width2, height: height2 } = rect;
-    cb2({ width: Math.round(width2), height: Math.round(height2) });
-  };
-  handler(element.getBoundingClientRect());
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
+  if (typeof noTrailing !== "boolean") {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = void 0;
   }
-  const observer = new targetWindow.ResizeObserver((entries2) => {
-    const entry = entries2[0];
-    if (entry == null ? void 0 : entry.borderBoxSize) {
-      const box = entry.borderBoxSize[0];
-      if (box) {
-        handler({ width: box.inlineSize, height: box.blockSize });
-        return;
-      }
+  function wrapper2() {
+    var self2 = this;
+    var elapsed = Date.now() - lastExec;
+    var args = arguments;
+    if (cancelled) {
+      return;
     }
-    handler(element.getBoundingClientRect());
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
-};
-const addEventListenerOptions = {
-  passive: true
-};
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb2) => {
-  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$2(
-    targetWindow,
-    () => {
-      cb2(offset, false);
-    },
-    instance.options.isScrollingResetDelay
-  );
-  const createHandler = (isScrolling) => () => {
-    const { horizontal, isRtl } = instance.options;
-    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
-    fallback();
-    cb2(offset, isScrolling);
-  };
-  const handler = createHandler(true);
-  const endHandler = createHandler(false);
-  endHandler();
-  element.addEventListener("scroll", handler, addEventListenerOptions);
-  element.addEventListener("scrollend", endHandler, addEventListenerOptions);
-  return () => {
-    element.removeEventListener("scroll", handler);
-    element.removeEventListener("scrollend", endHandler);
-  };
-};
-const measureElement = (element, entry, instance) => {
-  if (entry == null ? void 0 : entry.borderBoxSize) {
-    const box = entry.borderBoxSize[0];
-    if (box) {
-      const size2 = Math.round(
-        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
-      );
-      return size2;
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self2, args);
+    }
+    function clear() {
+      timeoutID = void 0;
+    }
+    if (debounceMode && !timeoutID) {
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === void 0 && elapsed > delay) {
+      exec();
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === void 0 ? delay - elapsed : delay);
     }
   }
-  return Math.round(
-    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
-  );
+  wrapper2.cancel = cancel;
+  return wrapper2;
+}
+var ThresholdUnits = {
+  Pixel: "Pixel",
+  Percent: "Percent"
 };
-const elementScroll = (offset, {
-  adjustments = 0,
-  behavior
-}, instance) => {
-  var _a2, _b;
-  const toOffset = offset + adjustments;
-  (_b = (_a2 = instance.scrollElement) == null ? void 0 : _a2.scrollTo) == null ? void 0 : _b.call(_a2, {
-    [instance.options.horizontal ? "left" : "top"]: toOffset,
-    behavior
-  });
+var defaultThreshold$1 = {
+  unit: ThresholdUnits.Percent,
+  value: 0.8
 };
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const get3 = () => {
-        if (_ro) {
-          return _ro;
-        }
-        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
-          return null;
-        }
-        return _ro = new this.targetWindow.ResizeObserver((entries2) => {
-          entries2.forEach((entry) => {
-            this._measureElement(entry.target, entry);
-          });
-        });
-      };
+function parseThreshold(scrollThreshold) {
+  if (typeof scrollThreshold === "number") {
+    return {
+      unit: ThresholdUnits.Percent,
+      value: scrollThreshold * 100
+    };
+  }
+  if (typeof scrollThreshold === "string") {
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
       return {
-        disconnect: () => {
-          var _a2;
-          (_a2 = get3()) == null ? void 0 : _a2.disconnect();
-          _ro = null;
-        },
-        observe: (target) => {
-          var _a2;
-          return (_a2 = get3()) == null ? void 0 : _a2.observe(target, { box: "border-box" });
-        },
-        unobserve: (target) => {
-          var _a2;
-          return (_a2 = get3()) == null ? void 0 : _a2.unobserve(target);
-        }
+        unit: ThresholdUnits.Pixel,
+        value: parseFloat(scrollThreshold)
       };
-    })();
-    this.range = null;
-    this.setOptions = (opts2) => {
-      Object.entries(opts2).forEach(([key2, value]) => {
-        if (typeof value === "undefined") delete opts2[key2];
-      });
-      this.options = {
-        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: true,
-        ...opts2
+    }
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
+      return {
+        unit: ThresholdUnits.Percent,
+        value: parseFloat(scrollThreshold)
       };
-    };
-    this.notify = (sync2) => {
-      var _a2, _b;
-      (_b = (_a2 = this.options).onChange) == null ? void 0 : _b.call(_a2, this, sync2);
-    };
-    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: process.env.NODE_ENV !== "production" && "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((d2) => d2());
-      this.unsubs = [];
-      this.observer.disconnect();
-      this.scrollElement = null;
-      this.targetWindow = null;
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
+    }
+    console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
+    return defaultThreshold$1;
+  }
+  console.warn("scrollThreshold should be string or number");
+  return defaultThreshold$1;
+}
+var InfiniteScroll = (
+  /** @class */
+  function(_super) {
+    __extends(InfiniteScroll2, _super);
+    function InfiniteScroll2(props) {
+      var _this = _super.call(this, props) || this;
+      _this.lastScrollTop = 0;
+      _this.actionTriggered = false;
+      _this.startY = 0;
+      _this.currentY = 0;
+      _this.dragging = false;
+      _this.maxPullDownDistance = 0;
+      _this.getScrollableTarget = function() {
+        if (_this.props.scrollableTarget instanceof HTMLElement)
+          return _this.props.scrollableTarget;
+        if (typeof _this.props.scrollableTarget === "string") {
+          return document.getElementById(_this.props.scrollableTarget);
+        }
+        if (_this.props.scrollableTarget === null) {
+          console.warn("You are trying to pass scrollableTarget but it is null. This might\n        happen because the element may not have been added to DOM yet.\n        See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.\n      ");
+        }
+        return null;
       };
-    };
-    this._willUpdate = () => {
-      var _a2;
-      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        if (!scrollElement) {
-          this.maybeNotify();
+      _this.onStart = function(evt) {
+        if (_this.lastScrollTop)
           return;
+        _this.dragging = true;
+        if (evt instanceof MouseEvent) {
+          _this.startY = evt.pageY;
+        } else if (evt instanceof TouchEvent) {
+          _this.startY = evt.touches[0].pageY;
         }
-        this.scrollElement = scrollElement;
-        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
-          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
-        } else {
-          this.targetWindow = ((_a2 = this.scrollElement) == null ? void 0 : _a2.window) ?? null;
+        _this.currentY = _this.startY;
+        if (_this._infScroll) {
+          _this._infScroll.style.willChange = "transform";
+          _this._infScroll.style.transition = "transform 0.2s cubic-bezier(0,0,0.31,1)";
         }
-        this.elementsCache.forEach((cached) => {
-          this.observer.observe(cached);
-        });
-        this._scrollToOffset(this.getScrollOffset(), {
-          adjustments: void 0,
-          behavior: void 0
-        });
-        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;
-            this.maybeNotify();
-          })
-        );
-      }
-    };
-    this.getSize = () => {
-      if (!this.options.enabled) {
-        this.scrollRect = null;
-        return 0;
-      }
-      this.scrollRect = this.scrollRect ?? this.options.initialRect;
-      return this.scrollRect[this.options.horizontal ? "width" : "height"];
-    };
-    this.getScrollOffset = () => {
-      if (!this.options.enabled) {
-        this.scrollOffset = null;
-        return 0;
-      }
-      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
-      return this.scrollOffset;
-    };
-    this.getFurthestMeasurement = (measurements, index2) => {
-      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
-      const furthestMeasurements = /* @__PURE__ */ new Map();
-      for (let m2 = index2 - 1; m2 >= 0; m2--) {
-        const measurement = measurements[m2];
-        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((a2, b2) => {
-        if (a2.end === b2.end) {
-          return a2.index - b2.index;
+      };
+      _this.onMove = function(evt) {
+        if (!_this.dragging)
+          return;
+        if (evt instanceof MouseEvent) {
+          _this.currentY = evt.pageY;
+        } else if (evt instanceof TouchEvent) {
+          _this.currentY = evt.touches[0].pageY;
         }
-        return a2.end - b2.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled
-      ],
-      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count,
-          paddingStart,
-          scrollMargin,
-          getItemKey,
-          enabled
-        };
-      },
-      {
-        key: false
-      }
-    );
-    this.getMeasurements = memo(
-      () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
-        if (!enabled) {
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          return [];
-        }
-        if (this.measurementsCache.length === 0) {
-          this.measurementsCache = this.options.initialMeasurementsCache;
-          this.measurementsCache.forEach((item2) => {
-            this.itemSizeCache.set(item2.key, item2.size);
+        if (_this.currentY < _this.startY)
+          return;
+        if (_this.currentY - _this.startY >= Number(_this.props.pullDownToRefreshThreshold)) {
+          _this.setState({
+            pullToRefreshThresholdBreached: true
           });
         }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < count; i++) {
-          const key2 = getItemKey(i);
-          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
-          const measuredSize = itemSizeCache.get(key2);
-          const size2 = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
-          const end = start + size2;
-          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
-          measurements[i] = {
-            index: i,
-            start,
-            size: size2,
-            end,
-            key: key2,
-            lane
-          };
-        }
-        this.measurementsCache = measurements;
-        return measurements;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getMeasurements",
-        debug: () => this.options.debug
-      }
-    );
-    this.calculateRange = memo(
-      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
-      (measurements, outerSize, scrollOffset) => {
-        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset
-        }) : null;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "calculateRange",
-        debug: () => this.options.debug
-      }
-    );
-    this.getIndexes = memo(
-      () => [
-        this.options.rangeExtractor,
-        this.calculateRange(),
-        this.options.overscan,
-        this.options.count
-      ],
-      (rangeExtractor, range2, overscan, count) => {
-        return range2 === null ? [] : rangeExtractor({
-          startIndex: range2.startIndex,
-          endIndex: range2.endIndex,
-          overscan,
-          count
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getIndexes",
-        debug: () => this.options.debug
-      }
-    );
-    this.indexFromElement = (node2) => {
-      const attributeName = this.options.indexAttribute;
-      const indexStr = node2.getAttribute(attributeName);
-      if (!indexStr) {
-        console.warn(
-          `Missing attribute name '${attributeName}={index}' on measured element.`
-        );
-        return -1;
-      }
-      return parseInt(indexStr, 10);
-    };
-    this._measureElement = (node2, entry) => {
-      const index2 = this.indexFromElement(node2);
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return;
-      }
-      const key2 = item2.key;
-      const prevNode = this.elementsCache.get(key2);
-      if (prevNode !== node2) {
-        if (prevNode) {
-          this.observer.unobserve(prevNode);
+        if (_this.currentY - _this.startY > _this.maxPullDownDistance * 1.5)
+          return;
+        if (_this._infScroll) {
+          _this._infScroll.style.overflow = "visible";
+          _this._infScroll.style.transform = "translate3d(0px, " + (_this.currentY - _this.startY) + "px, 0px)";
         }
-        this.observer.observe(node2);
-        this.elementsCache.set(key2, node2);
-      }
-      if (node2.isConnected) {
-        this.resizeItem(index2, this.options.measureElement(node2, entry, this));
-      }
-    };
-    this.resizeItem = (index2, size2) => {
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return;
-      }
-      const itemSize = this.itemSizeCache.get(item2.key) ?? item2.size;
-      const delta = size2 - itemSize;
-      if (delta !== 0) {
-        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item2, delta, this) : item2.start < this.getScrollOffset() + this.scrollAdjustments) {
-          if (process.env.NODE_ENV !== "production" && this.options.debug) {
-            console.info("correction", delta);
-          }
-          this._scrollToOffset(this.getScrollOffset(), {
-            adjustments: this.scrollAdjustments += delta,
-            behavior: void 0
+      };
+      _this.onEnd = function() {
+        _this.startY = 0;
+        _this.currentY = 0;
+        _this.dragging = false;
+        if (_this.state.pullToRefreshThresholdBreached) {
+          _this.props.refreshFunction && _this.props.refreshFunction();
+          _this.setState({
+            pullToRefreshThresholdBreached: false
           });
         }
-        this.pendingMeasuredCacheIndexes.push(item2.index);
-        this.itemSizeCache = new Map(this.itemSizeCache.set(item2.key, size2));
-        this.notify(false);
-      }
-    };
-    this.measureElement = (node2) => {
-      if (!node2) {
-        this.elementsCache.forEach((cached, key2) => {
-          if (!cached.isConnected) {
-            this.observer.unobserve(cached);
-            this.elementsCache.delete(key2);
+        requestAnimationFrame(function() {
+          if (_this._infScroll) {
+            _this._infScroll.style.overflow = "auto";
+            _this._infScroll.style.transform = "none";
+            _this._infScroll.style.willChange = "unset";
           }
         });
-        return;
-      }
-      this._measureElement(node2, void 0);
-    };
-    this.getVirtualItems = memo(
-      () => [this.getIndexes(), this.getMeasurements()],
-      (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k2 = 0, len = indexes.length; k2 < len; k2++) {
-          const i = indexes[k2];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
-        }
-        return virtualItems;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "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,
-          (index2) => notUndefined(measurements[index2]).start,
-          offset
-        )]
-      );
-    };
-    this.getOffsetForAlignment = (toOffset, align) => {
-      const size2 = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (toOffset <= scrollOffset) {
-          align = "start";
-        } else if (toOffset >= scrollOffset + size2) {
-          align = "end";
-        } else {
-          align = "start";
+      };
+      _this.onScrollListener = function(event) {
+        if (typeof _this.props.onScroll === "function") {
+          setTimeout(function() {
+            return _this.props.onScroll && _this.props.onScroll(event);
+          }, 0);
+        }
+        var target = _this.props.height || _this._scrollableNode ? event.target : document.documentElement.scrollTop ? document.documentElement : document.body;
+        if (_this.actionTriggered)
+          return;
+        var atBottom = _this.props.inverse ? _this.isElementAtTop(target, _this.props.scrollThreshold) : _this.isElementAtBottom(target, _this.props.scrollThreshold);
+        if (atBottom && _this.props.hasMore) {
+          _this.actionTriggered = true;
+          _this.setState({ showLoader: true });
+          _this.props.next && _this.props.next();
+        }
+        _this.lastScrollTop = target.scrollTop;
+      };
+      _this.state = {
+        showLoader: false,
+        pullToRefreshThresholdBreached: false,
+        prevDataLength: props.dataLength
+      };
+      _this.throttledOnScrollListener = throttle$1(150, _this.onScrollListener).bind(_this);
+      _this.onStart = _this.onStart.bind(_this);
+      _this.onMove = _this.onMove.bind(_this);
+      _this.onEnd = _this.onEnd.bind(_this);
+      return _this;
+    }
+    InfiniteScroll2.prototype.componentDidMount = function() {
+      if (typeof this.props.dataLength === "undefined") {
+        throw new Error('mandatory prop "dataLength" is missing. The prop is needed when loading more content. Check README.md for usage');
+      }
+      this._scrollableNode = this.getScrollableTarget();
+      this.el = this.props.height ? this._infScroll : this._scrollableNode || window;
+      if (this.el) {
+        this.el.addEventListener("scroll", this.throttledOnScrollListener);
+      }
+      if (typeof this.props.initialScrollY === "number" && this.el && this.el instanceof HTMLElement && this.el.scrollHeight > this.props.initialScrollY) {
+        this.el.scrollTo(0, this.props.initialScrollY);
+      }
+      if (this.props.pullDownToRefresh && this.el) {
+        this.el.addEventListener("touchstart", this.onStart);
+        this.el.addEventListener("touchmove", this.onMove);
+        this.el.addEventListener("touchend", this.onEnd);
+        this.el.addEventListener("mousedown", this.onStart);
+        this.el.addEventListener("mousemove", this.onMove);
+        this.el.addEventListener("mouseup", this.onEnd);
+        this.maxPullDownDistance = this._pullDown && this._pullDown.firstChild && this._pullDown.firstChild.getBoundingClientRect().height || 0;
+        this.forceUpdate();
+        if (typeof this.props.refreshFunction !== "function") {
+          throw new Error(`Mandatory prop "refreshFunction" missing.
+          Pull Down To Refresh functionality will not work
+          as expected. Check README.md for usage'`);
         }
       }
-      if (align === "start") {
-        toOffset = toOffset;
-      } else if (align === "end") {
-        toOffset = toOffset - size2;
-      } else if (align === "center") {
-        toOffset = toOffset - size2 / 2;
-      }
-      const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
-      const scrollSize = this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[scrollSizeProp] : this.scrollElement[scrollSizeProp] : 0;
-      const maxOffset = scrollSize - size2;
-      return Math.max(Math.min(maxOffset, toOffset), 0);
     };
-    this.getOffsetForIndex = (index2, align = "auto") => {
-      index2 = Math.max(0, Math.min(index2, this.options.count - 1));
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return void 0;
-      }
-      const size2 = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (item2.end >= scrollOffset + size2 - this.options.scrollPaddingEnd) {
-          align = "end";
-        } else if (item2.start <= scrollOffset + this.options.scrollPaddingStart) {
-          align = "start";
-        } else {
-          return [scrollOffset, align];
+    InfiniteScroll2.prototype.componentWillUnmount = function() {
+      if (this.el) {
+        this.el.removeEventListener("scroll", this.throttledOnScrollListener);
+        if (this.props.pullDownToRefresh) {
+          this.el.removeEventListener("touchstart", this.onStart);
+          this.el.removeEventListener("touchmove", this.onMove);
+          this.el.removeEventListener("touchend", this.onEnd);
+          this.el.removeEventListener("mousedown", this.onStart);
+          this.el.removeEventListener("mousemove", this.onMove);
+          this.el.removeEventListener("mouseup", this.onEnd);
         }
       }
-      const toOffset = align === "end" ? item2.end + this.options.scrollPaddingEnd : item2.start - this.options.scrollPaddingStart;
-      return [this.getOffsetForAlignment(toOffset, align), align];
     };
-    this.isDynamicMode = () => this.elementsCache.size > 0;
-    this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-        this.scrollToIndexTimeoutId = null;
-      }
+    InfiniteScroll2.prototype.componentDidUpdate = function(prevProps) {
+      if (this.props.dataLength === prevProps.dataLength)
+        return;
+      this.actionTriggered = false;
+      this.setState({
+        showLoader: false
+      });
     };
-    this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
+    InfiniteScroll2.getDerivedStateFromProps = function(nextProps, prevState) {
+      var dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
+      if (dataLengthChanged) {
+        return __assign$1(__assign$1({}, prevState), { prevDataLength: nextProps.dataLength });
       }
-      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-        adjustments: void 0,
-        behavior
-      });
+      return null;
     };
-    this.scrollToIndex = (index2, { align: initialAlign = "auto", behavior } = {}) => {
-      index2 = Math.max(0, Math.min(index2, this.options.count - 1));
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
+    InfiniteScroll2.prototype.isElementAtTop = function(target, scrollThreshold) {
+      if (scrollThreshold === void 0) {
+        scrollThreshold = 0.8;
       }
-      const offsetAndAlign = this.getOffsetForIndex(index2, initialAlign);
-      if (!offsetAndAlign) return;
-      const [offset, align] = offsetAndAlign;
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-          this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.elementsCache.has(
-            this.options.getItemKey(index2)
-          );
-          if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index2, align)
-            );
-            if (!approxEqual(latestOffset, this.getScrollOffset())) {
-              this.scrollToIndex(index2, { align, behavior });
-            }
-          } else {
-            this.scrollToIndex(index2, { align, behavior });
-          }
-        });
+      var clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight : target.clientHeight;
+      var threshold = parseThreshold(scrollThreshold);
+      if (threshold.unit === ThresholdUnits.Pixel) {
+        return target.scrollTop <= threshold.value + clientHeight - target.scrollHeight + 1;
       }
+      return target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1;
     };
-    this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
+    InfiniteScroll2.prototype.isElementAtBottom = function(target, scrollThreshold) {
+      if (scrollThreshold === void 0) {
+        scrollThreshold = 0.8;
       }
-      this._scrollToOffset(this.getScrollOffset() + delta, {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.getTotalSize = () => {
-      var _a2;
-      const measurements = this.getMeasurements();
-      let end;
-      if (measurements.length === 0) {
-        end = this.options.paddingStart;
-      } else {
-        end = this.options.lanes === 1 ? ((_a2 = measurements[measurements.length - 1]) == null ? void 0 : _a2.end) ?? 0 : Math.max(
-          ...measurements.slice(-this.options.lanes).map((m2) => m2.end)
-        );
+      var clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight : target.clientHeight;
+      var threshold = parseThreshold(scrollThreshold);
+      if (threshold.unit === ThresholdUnits.Pixel) {
+        return target.scrollTop + clientHeight >= target.scrollHeight - threshold.value;
       }
-      return Math.max(
-        end - this.options.scrollMargin + this.options.paddingEnd,
-        0
-      );
-    };
-    this._scrollToOffset = (offset, {
-      adjustments,
-      behavior
-    }) => {
-      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+      return target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight;
     };
-    this.measure = () => {
-      this.itemSizeCache = /* @__PURE__ */ new Map();
-      this.notify(false);
+    InfiniteScroll2.prototype.render = function() {
+      var _this = this;
+      var style = __assign$1({ height: this.props.height || "auto", overflow: "auto", WebkitOverflowScrolling: "touch" }, this.props.style);
+      var hasChildren2 = this.props.hasChildren || !!(this.props.children && this.props.children instanceof Array && this.props.children.length);
+      var outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: "auto" } : {};
+      return React__default.createElement(
+        "div",
+        { style: outerDivStyle, className: "infinite-scroll-component__outerdiv" },
+        React__default.createElement(
+          "div",
+          { className: "infinite-scroll-component " + (this.props.className || ""), ref: function(infScroll) {
+            return _this._infScroll = infScroll;
+          }, style },
+          this.props.pullDownToRefresh && React__default.createElement(
+            "div",
+            { style: { position: "relative" }, ref: function(pullDown) {
+              return _this._pullDown = pullDown;
+            } },
+            React__default.createElement("div", { style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: -1 * this.maxPullDownDistance
+            } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent)
+          ),
+          this.props.children,
+          !this.state.showLoader && !hasChildren2 && this.props.hasMore && this.props.loader,
+          this.state.showLoader && this.props.hasMore && this.props.loader,
+          !this.props.hasMore && this.props.endMessage
+        )
+      );
     };
-    this.setOptions(opts);
-  }
-}
-const 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
-}) {
-  const count = measurements.length - 1;
-  const getOffset2 = (index2) => measurements[index2].start;
-  const startIndex = findNearestBinarySearch(0, count, getOffset2, scrollOffset);
-  let endIndex = startIndex;
-  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
-    endIndex++;
-  }
-  return { startIndex, endIndex };
-}
-const useIsomorphicLayoutEffect$5 = typeof document !== "undefined" ? React$4.useLayoutEffect : React$4.useEffect;
-function useVirtualizerBase(options) {
-  const rerender = React$4.useReducer(() => ({}), {})[1];
-  const resolvedOptions = {
-    ...options,
-    onChange: (instance2, sync2) => {
-      var _a2;
-      if (sync2) {
-        flushSync$1(rerender);
-      } else {
-        rerender();
-      }
-      (_a2 = options.onChange) == null ? void 0 : _a2.call(options, instance2, sync2);
-    }
-  };
-  const [instance] = React$4.useState(
-    () => new Virtualizer(resolvedOptions)
-  );
-  instance.setOptions(resolvedOptions);
-  React$4.useEffect(() => {
-    return instance._didMount();
-  }, []);
-  useIsomorphicLayoutEffect$5(() => {
-    return instance._willUpdate();
-  });
-  return instance;
-}
-function useVirtualizer(options) {
-  return useVirtualizerBase({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options
-  });
-}
-const inputInTable$8 = "_inputInTable_snjei_1";
-const inputHover$8 = "_inputHover_snjei_13";
-const inputFocus$8 = "_inputFocus_snjei_18";
-const inputError$8 = "_inputError_snjei_25";
-const inputWarning$8 = "_inputWarning_snjei_26";
-const inputDisabled$8 = "_inputDisabled_snjei_61";
-const hideScrollbars$8 = "_hideScrollbars_snjei_67";
-const list$1 = "_list_snjei_77";
-const bordered$1 = "_bordered_snjei_83";
-const virtualRow = "_virtualRow_snjei_87";
-const item$4 = "_item_snjei_87";
-const header$1 = "_header_snjei_90";
-const headerTitle = "_headerTitle_snjei_90";
-const heading$3 = "_heading_snjei_91";
-const itemHeader = "_itemHeader_snjei_91";
-const narrow = "_narrow_snjei_94";
-const stickyHeader = "_stickyHeader_snjei_98";
-const title$3 = "_title_snjei_109";
-const name = "_name_snjei_115";
-const iconTooltipMargin = "_iconTooltipMargin_snjei_118";
-const bold = "_bold_snjei_121";
-const toggleNarrow = "_toggleNarrow_snjei_132";
-const drag$1 = "_drag_snjei_150";
-const dragOverlay$1 = "_dragOverlay_snjei_171";
-const listContent = "_listContent_snjei_176";
-const action = "_action_snjei_203";
-const active$3 = "_active_snjei_206";
-const indented = "_indented_snjei_213";
-const disabled$5 = "_disabled_snjei_226";
-const label$6 = "_label_snjei_237";
-const details$2 = "_details_snjei_248";
-const metadata = "_metadata_snjei_249";
-const itemContent = "_itemContent_snjei_257";
-const indentIcon = "_indentIcon_snjei_264";
-const expandIcon = "_expandIcon_snjei_269";
-const expanded = "_expanded_snjei_276";
-const right$4 = "_right_snjei_279";
-const actions = "_actions_snjei_287";
-const hideScrollbar = "_hideScrollbar_snjei_67";
-const noPointerEvents = "_noPointerEvents_snjei_302";
-const virtualRows = "_virtualRows_snjei_305";
+    return InfiniteScroll2;
+  }(Component$1)
+);
+const inputInTable$8 = "_inputInTable_7sjlf_1";
+const inputHover$8 = "_inputHover_7sjlf_13";
+const inputFocus$8 = "_inputFocus_7sjlf_18";
+const inputError$8 = "_inputError_7sjlf_25";
+const inputWarning$8 = "_inputWarning_7sjlf_26";
+const inputDisabled$8 = "_inputDisabled_7sjlf_61";
+const hideScrollbars$8 = "_hideScrollbars_7sjlf_67";
+const header$1 = "_header_7sjlf_77";
+const headerTitle = "_headerTitle_7sjlf_77";
+const heading$3 = "_heading_7sjlf_78";
+const itemHeader = "_itemHeader_7sjlf_78";
+const narrow = "_narrow_7sjlf_81";
+const stickyHeader = "_stickyHeader_7sjlf_85";
+const title$3 = "_title_7sjlf_96";
+const name = "_name_7sjlf_102";
+const iconTooltipMargin = "_iconTooltipMargin_7sjlf_105";
+const bold = "_bold_7sjlf_108";
+const toggleNarrow = "_toggleNarrow_7sjlf_117";
+const drag$1 = "_drag_7sjlf_135";
+const dragOverlay$1 = "_dragOverlay_7sjlf_156";
+const list$1 = "_list_7sjlf_161";
+const bordered$1 = "_bordered_7sjlf_165";
+const item$4 = "_item_7sjlf_78";
+const action = "_action_7sjlf_198";
+const active$3 = "_active_7sjlf_201";
+const indented = "_indented_7sjlf_208";
+const disabled$5 = "_disabled_7sjlf_221";
+const label$6 = "_label_7sjlf_232";
+const details$2 = "_details_7sjlf_243";
+const metadata = "_metadata_7sjlf_244";
+const itemContent = "_itemContent_7sjlf_252";
+const indentIcon = "_indentIcon_7sjlf_259";
+const expandIcon = "_expandIcon_7sjlf_264";
+const expanded = "_expanded_7sjlf_271";
+const right$4 = "_right_7sjlf_274";
+const actions = "_actions_7sjlf_282";
+const scrollableList = "_scrollableList_7sjlf_287";
+const infiniteScrollContainer = "_infiniteScrollContainer_7sjlf_292";
+const hideScrollbar = "_hideScrollbar_7sjlf_67";
+const noPointerEvents = "_noPointerEvents_7sjlf_309";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -10306,10 +9886,6 @@ const listStyles = {
   inputWarning: inputWarning$8,
   inputDisabled: inputDisabled$8,
   hideScrollbars: hideScrollbars$8,
-  list: list$1,
-  bordered: bordered$1,
-  virtualRow,
-  item: item$4,
   header: header$1,
   headerTitle,
   heading: heading$3,
@@ -10323,7 +9899,9 @@ const listStyles = {
   toggleNarrow,
   drag: drag$1,
   dragOverlay: dragOverlay$1,
-  listContent,
+  list: list$1,
+  bordered: bordered$1,
+  item: item$4,
   action,
   active: active$3,
   indented,
@@ -10337,9 +9915,10 @@ const listStyles = {
   expanded,
   right: right$4,
   actions,
+  scrollableList,
+  infiniteScrollContainer,
   hideScrollbar,
-  noPointerEvents,
-  virtualRows
+  noPointerEvents
 };
 const ToggleNarrow = ({
   toggleNarrow: toggleNarrow2,
@@ -10564,9 +10143,9 @@ function isTouchEvent$2(event) {
     return false;
   }
   const {
-    TouchEvent
+    TouchEvent: TouchEvent2
   } = getWindow(event.target);
-  return TouchEvent && event instanceof TouchEvent;
+  return TouchEvent2 && event instanceof TouchEvent2;
 }
 function getEventCoordinates(event) {
   if (isTouchEvent$2(event)) {
@@ -12984,7 +12563,7 @@ var Status;
   Status2[Status2["Initializing"] = 1] = "Initializing";
   Status2[Status2["Initialized"] = 2] = "Initialized";
 })(Status || (Status = {}));
-const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
+const DndContext$1 = /* @__PURE__ */ memo(function DndContext(_ref) {
   var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
   let {
     id: id2,
@@ -14622,6 +14201,72 @@ const ListRow = forwardRef(
     return isSubheading ? /* @__PURE__ */ jsx(ListSubheading, { ref: listRowRefs, item: item2, index: index2 }, index2) : draggable ? listElementWithDrag(index2, item2) : listElement(index2, item2);
   }
 );
+const loader = "_loader_477i5_1";
+const fullViewPortSize = "_fullViewPortSize_477i5_7";
+const cover = "_cover_477i5_14";
+const dimmer = "_dimmer_477i5_21";
+const content$2 = "_content_477i5_44";
+const text$1 = "_text_477i5_49";
+const details$1 = "_details_477i5_53";
+const styles$t = {
+  loader,
+  fullViewPortSize,
+  cover,
+  dimmer,
+  content: content$2,
+  text: text$1,
+  details: details$1
+};
+const Loader = ({
+  width: width2,
+  height: height2,
+  text: text2 = "",
+  details: details2 = "",
+  fullViewPortSize: fullViewPortSize2 = false,
+  cover: cover2 = false,
+  children = null,
+  theme = Theme.DARK,
+  testId = null
+}) => {
+  const color2 = theme === Theme.DARK ? Theme.WHITE : Theme.INHERIT;
+  const background2 = theme === "white" ? "var(--color-background-raised)" : theme === "light" ? "var(--color-background)" : "black";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
+        [styles$t.fullViewPortSize]: fullViewPortSize2
+      }),
+      style: { width: width2, height: height2 },
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$t.content,
+          "data-testid": testId && `${testId}-content`,
+          children: [
+            children,
+            text2 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$t.text,
+                "data-testid": testId && `${testId}-text`,
+                children: text2
+              }
+            ),
+            details2 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$t.details,
+                "data-testid": testId && `${testId}-details`,
+                children: details2
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
 const ListDragWrapper = ({
   children,
   draggable,
@@ -14636,14 +14281,15 @@ const ListDragWrapper = ({
     setDragIndex(event.active.id);
   };
   const handleDragEnd = (event) => {
+    var _a2, _b, _c, _d, _e2, _f, _g, _h;
     setDragIndex(null);
     const { active: active2, over } = event;
-    const from3 = active2 == null ? void 0 : active2.id;
-    const to2 = over == null ? void 0 : over.id;
+    const from3 = (_b = (_a2 = active2 == null ? void 0 : active2.data) == null ? void 0 : _a2.current) == null ? void 0 : _b.sortable.index;
+    const to2 = (_d = (_c = over == null ? void 0 : over.data) == null ? void 0 : _c.current) == null ? void 0 : _d.sortable.index;
     if (from3 !== to2) {
       onListReorder({
-        from: Number(from3),
-        to: Number(to2)
+        from: (_f = (_e2 = active2 == null ? void 0 : active2.data) == null ? void 0 : _e2.current) == null ? void 0 : _f.sortable.index,
+        to: (_h = (_g = over == null ? void 0 : over.data) == null ? void 0 : _g.current) == null ? void 0 : _h.sortable.index
       });
     }
   };
@@ -14692,26 +14338,58 @@ const List = ({
   height: height2,
   testId,
   scrollDetails = {
+    scrollable: false,
     hideScrollbar: false,
-    triggerScrollToActiveItem: false
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false,
+    limit: 10,
+    infiniteScrollTarget: void 0
   }
 }) => {
-  const { hideScrollbar: hideScrollbar2, triggerScrollToActiveItem } = scrollDetails;
+  const {
+    scrollable,
+    hideScrollbar: hideScrollbar2,
+    triggerScrollToActiveItem,
+    infiniteScroll,
+    infiniteScrollTarget
+  } = scrollDetails;
+  const listHeadingRef = useRef(null);
+  const listRowRefs = useRef([]);
   const listContainerRef = useRef(null);
-  const MIN_ITEM_HEIGHT = 37;
-  const virtualizer = useVirtualizer({
-    count: list2.items.length,
-    getScrollElement: () => listContainerRef.current,
-    estimateSize: () => MIN_ITEM_HEIGHT,
-    overscan: 5
-  });
+  const MIN_ITEM_HEIGHT = 44;
+  const pageSize = infiniteScroll ? Math.ceil(window.innerHeight / MIN_ITEM_HEIGHT) : list2.items.length;
+  const [numVisibleRows, setNumVisibleRows] = useState(pageSize);
+  const [hasMore, setHasMore] = useState(numVisibleRows < (list2 == null ? void 0 : list2.items.length));
+  useEffect(() => {
+    listRowRefs.current = listRowRefs.current.slice(0, list2.items.length);
+  }, [list2.items.length]);
+  const loadMoreItems = () => {
+    if (numVisibleRows >= list2.items.length) {
+      setHasMore(false);
+      return;
+    }
+    const newVisibleRows = pageSize + numVisibleRows;
+    setNumVisibleRows(newVisibleRows);
+  };
   const findFirstActiveItemIndex = (items) => items.findIndex((item2) => item2.active === true);
   const setScrollToActiveItem = (activeItemIndex) => {
-    if (activeItemIndex >= 0) {
-      virtualizer.scrollToIndex(activeItemIndex, {
-        align: "center",
-        behavior: "smooth"
-      });
+    if (!listContainerRef.current || !listHeadingRef.current) return;
+    const itemBorderLength = 1;
+    if (triggerScrollToActiveItem && activeItemIndex >= 0) {
+      const itemOffsets = listRowRefs.current.reduce((acc, val, index2) => {
+        if (index2 < activeItemIndex) {
+          return acc + val.clientHeight + itemBorderLength;
+        }
+        return acc;
+      }, 0);
+      const centerOffset = listContainerRef.current.clientHeight / 2 - listRowRefs.current[activeItemIndex].clientHeight / 2;
+      const scrollOffset = itemOffsets - centerOffset;
+      if (stickyHeader2) {
+        const headingOffset2 = listHeadingRef.current.clientHeight / 2;
+        listContainerRef.current.scrollTop = scrollOffset + headingOffset2;
+      }
+      const headingOffset = listHeadingRef.current.clientHeight;
+      listContainerRef.current.scrollTop = scrollOffset + headingOffset;
     }
   };
   useEffect(() => {
@@ -14719,18 +14397,24 @@ const List = ({
       const activeItemIndex = findFirstActiveItemIndex(list2 == null ? void 0 : list2.items);
       setScrollToActiveItem(activeItemIndex);
     }
-  }, [triggerScrollToActiveItem]);
-  return /* @__PURE__ */ jsxs(
+  }, [
+    listContainerRef.current,
+    listHeadingRef.current,
+    triggerScrollToActiveItem
+  ]);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
-        listStyles.list,
         narrow2 ? listStyles.narrow : "",
-        bordered2 ? listStyles.bordered : ""
+        scrollable ? listStyles.scrollableList : "",
+        hideScrollbar2 ? listStyles.hideScrollbar : ""
       ),
       "data-testid": testId,
+      id: "scrollableDiv",
       style: { height: height2, marginBottom },
-      children: [
+      ref: listContainerRef,
+      children: /* @__PURE__ */ jsxs(Card, { bordered: bordered2, padding: false, children: [
         !noHeader && /* @__PURE__ */ jsx(
           ListHeading,
           {
@@ -14738,123 +14422,53 @@ const List = ({
             actions: list2.actions,
             toggleNarrow: toggleNarrow2,
             onToggleNarrow,
-            stickyHeader: stickyHeader2
+            stickyHeader: stickyHeader2,
+            ref: listHeadingRef
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""), children: /* @__PURE__ */ jsx(
           ListDragWrapper,
           {
             draggable,
             list: list2,
             onListReorder,
-            children: /* @__PURE__ */ jsx(
-              "div",
+            children: infiniteScroll ? /* @__PURE__ */ jsx(
+              InfiniteScroll,
               {
-                className: cx$2(
-                  listStyles.listContent,
-                  hideScrollbar2 ? listStyles.hideScrollbar : ""
-                ),
-                ref: listContainerRef,
-                children: /* @__PURE__ */ jsx(
-                  "div",
+                dataLength: numVisibleRows,
+                next: loadMoreItems,
+                hasMore,
+                scrollableTarget: infiniteScrollTarget || "scrollableDiv",
+                loader: /* @__PURE__ */ jsx(Loader, {}),
+                className: listStyles.infiniteScrollContainer,
+                children: list2.items.slice(0, numVisibleRows).map((item2, index2) => /* @__PURE__ */ jsx(
+                  ListRow,
                   {
-                    className: listStyles.virtualRows,
-                    style: { height: `${virtualizer.getTotalSize()}px` },
-                    children: virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        "data-index": virtualRow2.index,
-                        className: listStyles.virtualRow,
-                        style: {
-                          transform: `translateY(${virtualRow2.start}px)`
-                        },
-                        ref: virtualizer.measureElement,
-                        children: /* @__PURE__ */ jsx(
-                          ListRow,
-                          {
-                            index: virtualRow2.index,
-                            draggable,
-                            item: list2.items[virtualRow2.index],
-                            expanding,
-                            invokeEditOnRowClick
-                          }
-                        )
-                      },
-                      virtualRow2.key
-                    ))
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-const loader = "_loader_477i5_1";
-const fullViewPortSize = "_fullViewPortSize_477i5_7";
-const cover = "_cover_477i5_14";
-const dimmer = "_dimmer_477i5_21";
-const content$2 = "_content_477i5_44";
-const text$1 = "_text_477i5_49";
-const details$1 = "_details_477i5_53";
-const styles$t = {
-  loader,
-  fullViewPortSize,
-  cover,
-  dimmer,
-  content: content$2,
-  text: text$1,
-  details: details$1
-};
-const Loader = ({
-  width: width2,
-  height: height2,
-  text: text2 = "",
-  details: details2 = "",
-  fullViewPortSize: fullViewPortSize2 = false,
-  cover: cover2 = false,
-  children = null,
-  theme = Theme.DARK,
-  testId = null
-}) => {
-  const color2 = theme === Theme.DARK ? Theme.WHITE : Theme.INHERIT;
-  const background2 = theme === "white" ? "var(--color-background-raised)" : theme === "light" ? "var(--color-background)" : "black";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
-        [styles$t.fullViewPortSize]: fullViewPortSize2
-      }),
-      style: { width: width2, height: height2 },
-      "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles$t.content,
-          "data-testid": testId && `${testId}-content`,
-          children: [
-            children,
-            text2 && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: styles$t.text,
-                "data-testid": testId && `${testId}-text`,
-                children: text2
+                    index: index2,
+                    draggable,
+                    item: item2,
+                    expanding,
+                    invokeEditOnRowClick,
+                    ref: listRowRefs
+                  },
+                  index2
+                ))
               }
-            ),
-            details2 && /* @__PURE__ */ jsx(
-              "div",
+            ) : list2.items.map((item2, index2) => /* @__PURE__ */ jsx(
+              ListRow,
               {
-                className: styles$t.details,
-                "data-testid": testId && `${testId}-details`,
-                children: details2
-              }
-            )
-          ]
-        }
-      ) })
+                index: index2,
+                draggable,
+                item: item2,
+                expanding,
+                invokeEditOnRowClick,
+                ref: listRowRefs
+              },
+              index2
+            ))
+          }
+        ) })
+      ] })
     }
   );
 };
@@ -15628,7 +15242,7 @@ const useFontsReady = () => {
 const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 const useWindowWidth = () => {
   const [width2, setWidth] = useState(getWidth());
-  const resizeListener = debounce$3(() => setWidth(getWidth()), 150);
+  const resizeListener = debounce$2(() => setWidth(getWidth()), 150);
   useEffect(() => {
     window.addEventListener("resize", resizeListener);
     return () => {
@@ -48390,7 +48004,7 @@ const styles$d = {
   active: active$2,
   icon: icon$1
 };
-const TooltipIcon = memo$1(
+const TooltipIcon = memo(
   ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
@@ -48465,7 +48079,7 @@ const Sections = ({
     )
   ] }, i)) });
 };
-const SideBar = memo$1(
+const SideBar = memo(
   ({
     options,
     startOpen = false,
@@ -51091,19 +50705,19 @@ const Spacer = ({
     }
   }
 );
-const inputInTable$2 = "_inputInTable_xkoxm_1";
-const inputHover$2 = "_inputHover_xkoxm_13";
-const inputFocus$2 = "_inputFocus_xkoxm_18";
-const inputError$2 = "_inputError_xkoxm_25";
-const inputWarning$2 = "_inputWarning_xkoxm_26";
-const inputDisabled$2 = "_inputDisabled_xkoxm_61";
-const hideScrollbars$2 = "_hideScrollbars_xkoxm_67";
-const wrapper = "_wrapper_xkoxm_85";
-const bordered = "_bordered_xkoxm_93";
-const scroll = "_scroll_xkoxm_98";
-const table = "_table_xkoxm_109";
-const dragOverlay = "_dragOverlay_xkoxm_145";
-const striped = "_striped_xkoxm_194";
+const inputInTable$2 = "_inputInTable_xzacf_1";
+const inputHover$2 = "_inputHover_xzacf_13";
+const inputFocus$2 = "_inputFocus_xzacf_18";
+const inputError$2 = "_inputError_xzacf_25";
+const inputWarning$2 = "_inputWarning_xzacf_26";
+const inputDisabled$2 = "_inputDisabled_xzacf_61";
+const hideScrollbars$2 = "_hideScrollbars_xzacf_67";
+const wrapper = "_wrapper_xzacf_85";
+const bordered = "_bordered_xzacf_93";
+const scroll = "_scroll_xzacf_98";
+const table = "_table_xzacf_108";
+const dragOverlay = "_dragOverlay_xzacf_145";
+const striped = "_striped_xzacf_194";
 const styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
@@ -51209,6 +50823,36 @@ const hasActions = (rows) => rows.reduce(
 const hasRowActions = (rows, headers) => {
   return hasActions(headers) > 0 || hasActions(rows) > 0;
 };
+const TableScrollWrapper = ({
+  table: table2,
+  children
+}) => {
+  const { rows, infiniteScroll } = table2;
+  const pageSize = Math.ceil(window.innerHeight / 30);
+  const [visibleRows, setVisibleRows] = infiniteScroll ? useState(pageSize) : [rows.length, null];
+  const [hasMore, setHasMore] = infiniteScroll ? useState(visibleRows < rows.length) : [false, null];
+  const loadMoreItems = () => {
+    if (visibleRows >= rows.length && setHasMore) {
+      setHasMore(false);
+      return;
+    }
+    if (setVisibleRows) {
+      setVisibleRows(visibleRows + pageSize);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: infiniteScroll ? /* @__PURE__ */ jsx(
+    InfiniteScroll,
+    {
+      dataLength: Math.min(rows.length, visibleRows + pageSize),
+      next: loadMoreItems,
+      hasMore,
+      scrollableTarget: "scrollWrapper",
+      style: { overflow: "initial" },
+      loader: null,
+      children: children({ visibleRows })
+    }
+  ) : children({ visibleRows }) });
+};
 const clickableRow = "_clickableRow_10f34_1";
 const hoverableRow = "_hoverableRow_10f34_4";
 const rowActive = "_rowActive_10f34_4";
@@ -51978,7 +51622,7 @@ const Row = ({
     animateLayoutChanges: () => false
   });
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Translate.toString(transform),
     transition,
     opacity: isDragging ? 0 : void 0
   };
@@ -52036,8 +51680,6 @@ const Row = ({
         ),
         "data-error": error2 || null,
         "data-warning": warning2 || null,
-        "data-index": rowIndex,
-        "data-even": rowIndex % 2 === 0,
         style,
         children: [
           draggableTable ? getDragItem() : null,
@@ -52129,35 +51771,6 @@ const TableDragWrapper = (props) => {
     }
   );
 };
-const TableScrollWrapper = ({
-  table: table2,
-  theadRef,
-  children
-}) => {
-  var _a2, _b;
-  if (!table2.infiniteScroll) {
-    return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: children({}) });
-  }
-  const containerRef = useRef(null);
-  const MIN_ITEM_HEIGHT = 31;
-  const virtualizer = useVirtualizer({
-    count: ((_a2 = table2.rows) == null ? void 0 : _a2.length) ?? 0,
-    getScrollElement: () => containerRef.current,
-    estimateSize: () => MIN_ITEM_HEIGHT,
-    overscan: 10
-  });
-  const theadHeight = ((_b = theadRef.current) == null ? void 0 : _b.clientHeight) ?? 0;
-  const totalHeight = virtualizer.getTotalSize() + theadHeight;
-  const items = virtualizer.getVirtualItems();
-  const paddingTop = items.length > 0 ? items[0].start : 0;
-  const paddingBottom = items.length > 0 ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
-  const tableStyle = {
-    "--virtualPaddingTop": paddingTop + "px",
-    "--virtualPaddingBottom": paddingBottom + "px",
-    height: totalHeight
-  };
-  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, ref: containerRef, children: children({ virtualizer, tableStyle }) });
-};
 const Table = (props) => {
   var _a2, _b, _c, _d, _e2, _f, _g;
   const { onListReorder = () => {
@@ -52180,7 +51793,6 @@ const Table = (props) => {
     maxHeight,
     fixedWidth: width2
   } = propTable;
-  const theadRef = useRef(null);
   const tbodyRef = useRef(null);
   const headers = get$2(props, "table.headers", []);
   const columnCount = getColumnCount(propRows, headers);
@@ -52242,7 +51854,7 @@ const Table = (props) => {
         testId: testId && `${testId}-title`
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsx(
       TableDragWrapper,
       {
         colSpan,
@@ -52253,65 +51865,49 @@ const Table = (props) => {
         rowActions,
         rows,
         tbodyRef,
-        children: /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, theadRef, children: ({ virtualizer, tableStyle }) => {
-          return /* @__PURE__ */ jsxs(
-            "table",
-            {
-              className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
-              "data-testid": testId,
-              style: tableStyle,
-              children: [
-                /* @__PURE__ */ jsx("thead", { ref: theadRef, children: headers.map((row2, rowIndex) => {
-                  return /* @__PURE__ */ jsx(
-                    Row,
-                    {
-                      rowIndex,
-                      isHeader: true,
-                      row: row2,
-                      columnCount,
-                      columnWidths,
-                      colSpan,
-                      hasRowActions: rowActions,
-                      columnAlignment,
-                      columnHeaderAlignments,
-                      draggableTable: draggable
-                    },
-                    `0_${rowIndex}`
-                  );
-                }) }),
-                /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-                  Row,
-                  {
-                    rowIndex: virtualRow2.index,
-                    row: rows[virtualRow2.index],
-                    columnCount,
-                    columnWidths,
-                    colSpan,
-                    hasRowActions: rowActions,
-                    columnAlignment,
-                    draggableTable: draggable
-                  },
-                  `1_${virtualRow2.index}`
-                )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
+            "data-testid": testId,
+            children: [
+              /* @__PURE__ */ jsx("thead", { children: headers.map((row2, rowIndex) => {
+                return /* @__PURE__ */ jsx(
                   Row,
                   {
-                    rowIndex: index2,
+                    rowIndex,
+                    isHeader: true,
                     row: row2,
                     columnCount,
                     columnWidths,
                     colSpan,
                     hasRowActions: rowActions,
                     columnAlignment,
+                    columnHeaderAlignments,
                     draggableTable: draggable
                   },
-                  `1_${index2}`
-                )) })
-              ]
-            }
-          );
-        } })
+                  `0_${rowIndex}`
+                );
+              }) }),
+              /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: rows.slice(0, visibleRows).map((row2, rowIndex) => /* @__PURE__ */ jsx(
+                Row,
+                {
+                  rowIndex,
+                  row: row2,
+                  columnCount,
+                  columnWidths,
+                  colSpan,
+                  hasRowActions: rowActions,
+                  columnAlignment,
+                  draggableTable: draggable
+                },
+                `1_${rowIndex}`
+              )) })
+            ]
+          }
+        )
       }
-    ),
+    ) }),
     footer2 && /* @__PURE__ */ jsx(
       Footer,
       {
@@ -55424,7 +55020,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 let refCount = 0;
 const INSTANCE_SYM = Symbol.for("__REACT_DND_CONTEXT_INSTANCE__");
-var DndProvider = /* @__PURE__ */ memo$1(function DndProvider2(_param) {
+var DndProvider = /* @__PURE__ */ memo(function DndProvider2(_param) {
   var { children } = _param, props = _objectWithoutProperties(_param, [
     "children"
   ]);
@@ -57785,7 +57381,7 @@ function useFeatures(props, visualElement2, preloadedFeatures) {
     var name_1 = featureNames[i];
     var _a2 = featureDefinitions[name_1], isEnabled = _a2.isEnabled, Component2 = _a2.Component;
     if (isEnabled(props) && Component2) {
-      features.push(React$4.createElement(Component2, __assign$3({ key: name_1 }, props, { visualElement: visualElement2 })));
+      features.push(React$4.createElement(Component2, __assign$4({ key: name_1 }, props, { visualElement: visualElement2 })));
     }
   }
   return features;
@@ -58026,7 +57622,7 @@ function useProjection(projectionId, _a2, visualElement2, ProjectionNodeConstruc
 var VisualElementHandler = (
   /** @class */
   function(_super) {
-    __extends(VisualElementHandler2, _super);
+    __extends$1(VisualElementHandler2, _super);
     function VisualElementHandler2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -58052,20 +57648,20 @@ function createMotionComponent(_a2) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props, externalRef) {
     var layoutId = useLayoutId(props);
-    props = __assign$3(__assign$3({}, props), { layoutId });
+    props = __assign$4(__assign$4({}, props), { layoutId });
     var config = useContext(MotionConfigContext);
     var features = null;
     var context2 = useCreateMotionContext(props);
     var projectionId = config.isStatic ? void 0 : useProjectionId();
     var visualState = useVisualState(props, config.isStatic);
     if (!config.isStatic && isBrowser) {
-      context2.visualElement = useVisualElement(Component2, visualState, __assign$3(__assign$3({}, config), props), createVisualElement);
+      context2.visualElement = useVisualElement(Component2, visualState, __assign$4(__assign$4({}, config), props), createVisualElement);
       useProjection(projectionId, props, context2.visualElement, projectionNodeConstructor || featureDefinitions.projectionNodeConstructor);
       features = useFeatures(props, context2.visualElement, preloadedFeatures);
     }
     return React$4.createElement(
       VisualElementHandler,
-      { visualElement: context2.visualElement, props: __assign$3(__assign$3({}, config), props) },
+      { visualElement: context2.visualElement, props: __assign$4(__assign$4({}, config), props) },
       features,
       React$4.createElement(MotionContext.Provider, { value: context2 }, useRender(Component2, props, projectionId, useMotionRef(visualState, context2.visualElement, externalRef), visualState, config.isStatic, context2.visualElement))
     );
@@ -58391,7 +57987,7 @@ const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v
   const functions = v2.match(functionRegex);
   return functions ? functions.map(applyDefaultFilter).join(" ") : v2;
 } });
-var int = __assign$3(__assign$3({}, number), { transform: Math.round });
+var int = __assign$4(__assign$4({}, number), { transform: Math.round });
 var numberValueTypes = {
   // Border props
   borderWidth: px,
@@ -58521,7 +58117,7 @@ function useInitialMotionValues(_a2, visualState, isStatic) {
     var state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
     var vars = state.vars, style = state.style;
-    return __assign$3(__assign$3({}, vars), style);
+    return __assign$4(__assign$4({}, vars), style);
   }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
@@ -58679,18 +58275,18 @@ function buildSVGAttrs(state, _a2, options, transformTemplate) {
   }
 }
 var createSvgRenderState = function() {
-  return __assign$3(__assign$3({}, createHtmlRenderState()), { attrs: {} });
+  return __assign$4(__assign$4({}, createHtmlRenderState()), { attrs: {} });
 };
 function useSVGProps(props, visualState) {
   var visualProps = useMemo(function() {
     var state = createSvgRenderState();
     buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
-    return __assign$3(__assign$3({}, state.attrs), { style: __assign$3({}, state.style) });
+    return __assign$4(__assign$4({}, state.attrs), { style: __assign$4({}, state.style) });
   }, [visualState]);
   if (props.style) {
     var rawStyles = {};
     copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = __assign$3(__assign$3({}, rawStyles), visualProps.style);
+    visualProps.style = __assign$4(__assign$4({}, rawStyles), visualProps.style);
   }
   return visualProps;
 }
@@ -58703,7 +58299,7 @@ function createUseRender(forwardMotionProps) {
     var useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
     var visualProps = useVisualProps(props, latestValues, isStatic);
     var filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
-    var elementProps = __assign$3(__assign$3(__assign$3({}, filteredProps), visualProps), { ref });
+    var elementProps = __assign$4(__assign$4(__assign$4({}, filteredProps), visualProps), { ref });
     if (projectionId) {
       elementProps["data-projection-id"] = projectionId;
     }
@@ -58880,7 +58476,7 @@ var htmlMotionConfig = {
 function createDomMotionConfig(Component2, _a2, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
   var _b = _a2.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;
   var baseConfig = isSVGComponent(Component2) ? svgMotionConfig : htmlMotionConfig;
-  return __assign$3(__assign$3({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
+  return __assign$4(__assign$4({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
 }
 var AnimationType;
 (function(AnimationType2) {
@@ -59967,7 +59563,7 @@ function initIntersectionObserver(_a2) {
   var rootObservers = observers.get(lookupRoot);
   var key2 = JSON.stringify(options);
   if (!rootObservers[key2]) {
-    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$3({ root: root2 }, options));
+    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$4({ root: root2 }, options));
   }
   return rootObservers[key2];
 }
@@ -60185,9 +59781,9 @@ var getDefaultTransition = function(valueKey, to2) {
   } else {
     transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
   }
-  return __assign$3({ to: to2 }, transitionFactory(to2));
+  return __assign$4({ to: to2 }, transitionFactory(to2));
 };
-var defaultValueTypes = __assign$3(__assign$3({}, numberValueTypes), {
+var defaultValueTypes = __assign$4(__assign$4({}, numberValueTypes), {
   // Color props
   color,
   backgroundColor: color,
@@ -60229,7 +59825,7 @@ function isTransitionDefined(_a2) {
 var legacyRepeatWarning = false;
 function convertTransitionToAnimationOptions(_a2) {
   var ease = _a2.ease, times = _a2.times, yoyo = _a2.yoyo, flip = _a2.flip, loop = _a2.loop, transition = __rest$1(_a2, ["ease", "times", "yoyo", "flip", "loop"]);
-  var options = __assign$3({}, transition);
+  var options = __assign$4({}, transition);
   if (times)
     options["offset"] = times;
   if (transition.duration)
@@ -60276,9 +59872,9 @@ function getPopmotionAnimationOptions(transition, options, key2) {
   }
   hydrateKeyframes(options);
   if (!isTransitionDefined(transition)) {
-    transition = __assign$3(__assign$3({}, transition), getDefaultTransition(key2, options.to));
+    transition = __assign$4(__assign$4({}, transition), getDefaultTransition(key2, options.to));
   }
-  return __assign$3(__assign$3({}, options), convertTransitionToAnimationOptions(transition));
+  return __assign$4(__assign$4({}, options), convertTransitionToAnimationOptions(transition));
 }
 function getAnimation(key2, value, target, transition, onComplete) {
   var _a2;
@@ -60304,7 +59900,7 @@ function getAnimation(key2, value, target, transition, onComplete) {
         return value.set(v2);
       }
     };
-    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(__assign$3(__assign$3({}, options), valueTransition)) : animate$1(__assign$3(__assign$3({}, getPopmotionAnimationOptions(valueTransition, options, key2)), { onUpdate: function(v2) {
+    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(__assign$4(__assign$4({}, options), valueTransition)) : animate$1(__assign$4(__assign$4({}, getPopmotionAnimationOptions(valueTransition, options, key2)), { onUpdate: function(v2) {
       var _a3;
       options.onUpdate(v2);
       (_a3 = valueTransition.onUpdate) === null || _a3 === void 0 ? void 0 : _a3.call(valueTransition, v2);
@@ -60557,7 +60153,7 @@ function setTarget(visualElement2, definition) {
   var _a2 = resolved ? visualElement2.makeTargetAnimatable(resolved, false) : {}, _b = _a2.transitionEnd, transitionEnd = _b === void 0 ? {} : _b;
   _a2.transition;
   var target = __rest$1(_a2, ["transitionEnd", "transition"]);
-  target = __assign$3(__assign$3({}, target), transitionEnd);
+  target = __assign$4(__assign$4({}, target), transitionEnd);
   for (var key2 in target) {
     var value = resolveFinalValueInKeyframes(target[key2]);
     setMotionValue(visualElement2, key2, value);
@@ -60675,9 +60271,9 @@ function animateTarget(visualElement2, definition, _a2) {
     if (!value || valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key2)) {
       continue;
     }
-    var valueTransition = __assign$3({ delay }, transition);
+    var valueTransition = __assign$4({ delay }, transition);
     if (visualElement2.shouldReduceMotion && isTransformProp(key2)) {
-      valueTransition = __assign$3(__assign$3({}, valueTransition), { type: false, delay: 0 });
+      valueTransition = __assign$4(__assign$4({}, valueTransition), { type: false, delay: 0 });
     }
     var animation = startAnimation(key2, value, valueTarget, valueTransition);
     animations2.push(animation);
@@ -60710,7 +60306,7 @@ function animateChildren(visualElement2, variant, delayChildren, staggerChildren
     return maxStaggerDuration - i * staggerChildren;
   };
   Array.from(visualElement2.variantChildren).sort(sortByTreeOrder).forEach(function(child, i) {
-    animations2.push(animateVariant(child, variant, __assign$3(__assign$3({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
+    animations2.push(animateVariant(child, variant, __assign$4(__assign$4({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
       return child.notifyAnimationComplete(variant);
     }));
   });
@@ -60754,7 +60350,7 @@ function createAnimationState(visualElement2) {
     if (resolved) {
       resolved.transition;
       var transitionEnd = resolved.transitionEnd, target = __rest$1(resolved, ["transition", "transitionEnd"]);
-      acc = __assign$3(__assign$3(__assign$3({}, acc), target), transitionEnd);
+      acc = __assign$4(__assign$4(__assign$4({}, acc), target), transitionEnd);
     }
     return acc;
   };
@@ -60784,7 +60380,7 @@ function createAnimationState(visualElement2) {
       if (isInherited && isInitialRender && visualElement2.manuallyAnimateOnMount) {
         isInherited = false;
       }
-      typeState.protectedKeys = __assign$3({}, encounteredKeys);
+      typeState.protectedKeys = __assign$4({}, encounteredKeys);
       if (
         // If it isn't active and hasn't *just* been set as inactive
         !typeState.isActive && activeDelta === null || // If we didn't and don't have any defined prop for this animation type
@@ -60802,7 +60398,7 @@ function createAnimationState(visualElement2) {
       if (activeDelta === false)
         resolvedValues = {};
       var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
-      var allKeys = __assign$3(__assign$3({}, prevResolvedValues), resolvedValues);
+      var allKeys = __assign$4(__assign$4({}, prevResolvedValues), resolvedValues);
       var markToAnimate = function(key3) {
         shouldAnimateType = true;
         removedKeys.delete(key3);
@@ -60834,7 +60430,7 @@ function createAnimationState(visualElement2) {
       typeState.prevProp = prop;
       typeState.prevResolvedValues = resolvedValues;
       if (typeState.isActive) {
-        encounteredKeys = __assign$3(__assign$3({}, encounteredKeys), resolvedValues);
+        encounteredKeys = __assign$4(__assign$4({}, encounteredKeys), resolvedValues);
       }
       if (isInitialRender && visualElement2.blockInitialAnimation) {
         shouldAnimateType = false;
@@ -60843,7 +60439,7 @@ function createAnimationState(visualElement2) {
         animations2.push.apply(animations2, __spreadArray$2([], __read(definitionList.map(function(animation) {
           return {
             animation,
-            options: __assign$3({ type }, options)
+            options: __assign$4({ type }, options)
           };
         })), false));
       }
@@ -60851,7 +60447,7 @@ function createAnimationState(visualElement2) {
     for (var i = 0; i < numAnimationTypes; i++) {
       _loop_1(i);
     }
-    allAnimatedKeys = __assign$3({}, encounteredKeys);
+    allAnimatedKeys = __assign$4({}, encounteredKeys);
     if (removedKeys.size) {
       var fallbackAnimation_1 = {};
       removedKeys.forEach(function(key2) {
@@ -60959,7 +60555,7 @@ var PanSession = (
           return;
         var point2 = info3.point;
         var timestamp2 = getFrameData().timestamp;
-        _this.history.push(__assign$3(__assign$3({}, point2), { timestamp: timestamp2 }));
+        _this.history.push(__assign$4(__assign$4({}, point2), { timestamp: timestamp2 }));
         var _a3 = _this.handlers, onStart = _a3.onStart, onMove = _a3.onMove;
         if (!isPanStarted) {
           onStart && onStart(_this.lastMoveEvent, info3);
@@ -60993,7 +60589,7 @@ var PanSession = (
       var initialInfo = transformPoint(info2, this.transformPagePoint);
       var point = initialInfo.point;
       var timestamp = getFrameData().timestamp;
-      this.history = [__assign$3(__assign$3({}, point), { timestamp })];
+      this.history = [__assign$4(__assign$4({}, point), { timestamp })];
       var onSessionStart = handlers2.onSessionStart;
       onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
       this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
@@ -61514,7 +61110,7 @@ var VisualElementDragControls = (
           transition = { min: 0, max: 0 };
         var bounceStiffness = dragElastic ? 200 : 1e6;
         var bounceDamping = dragElastic ? 40 : 1e7;
-        var inertia2 = __assign$3(__assign$3({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+        var inertia2 = __assign$4(__assign$4({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
         return _this.startAxisValueAnimation(axis, inertia2);
       });
       return Promise.all(momentumAnimations).then(onDragTransitionEnd);
@@ -61625,7 +61221,7 @@ var VisualElementDragControls = (
     VisualElementDragControls2.prototype.getProps = function() {
       var props = this.visualElement.getProps();
       var _a2 = props.drag, drag2 = _a2 === void 0 ? false : _a2, _b = props.dragDirectionLock, dragDirectionLock = _b === void 0 ? false : _b, _c = props.dragPropagation, dragPropagation = _c === void 0 ? false : _c, _d = props.dragConstraints, dragConstraints = _d === void 0 ? false : _d, _e2 = props.dragElastic, dragElastic = _e2 === void 0 ? defaultElastic : _e2, _f = props.dragMomentum, dragMomentum = _f === void 0 ? true : _f;
-      return __assign$3(__assign$3({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
+      return __assign$4(__assign$4({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
     };
     return VisualElementDragControls2;
   }()
@@ -61782,7 +61378,7 @@ var visualElement = function(_a2) {
     var values2 = /* @__PURE__ */ new Map();
     var valueSubscriptions = /* @__PURE__ */ new Map();
     var prevMotionValues = {};
-    var baseTarget = __assign$3({}, latestValues);
+    var baseTarget = __assign$4({}, latestValues);
     var removeFromVariantTree;
     function render2() {
       if (!instance || !isMounted)
@@ -61816,7 +61412,7 @@ var visualElement = function(_a2) {
     }
     var isControllingVariants = checkIfControllingVariants(props);
     var isVariantNode = checkIfVariantNode(props);
-    var element = __assign$3(__assign$3({
+    var element = __assign$4(__assign$4({
       treeType,
       /**
        * This is a mirror of the internal instance prop, which keeps
@@ -62181,7 +61777,7 @@ function resolveCSSVariables(visualElement2, _a2, transitionEnd) {
   if (!(element instanceof Element))
     return { target, transitionEnd };
   if (transitionEnd) {
-    transitionEnd = __assign$3({}, transitionEnd);
+    transitionEnd = __assign$4({}, transitionEnd);
   }
   visualElement2.forEachValue(function(value) {
     var current2 = value.get();
@@ -62336,8 +61932,8 @@ var checkAndConvertChangedValueTypes = function(visualElement2, target, origin,
   if (transitionEnd === void 0) {
     transitionEnd = {};
   }
-  target = __assign$3({}, target);
-  transitionEnd = __assign$3({}, transitionEnd);
+  target = __assign$4({}, target);
+  transitionEnd = __assign$4({}, transitionEnd);
   var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
   var removedTransformValues = [];
   var hasAttemptedToRemoveTransformValues = false;
@@ -62490,7 +62086,7 @@ var htmlConfig = {
       transitionEnd = parsed.transitionEnd;
       target = parsed.target;
     }
-    return __assign$3({ transition, transitionEnd }, target);
+    return __assign$4({ transition, transitionEnd }, target);
   },
   scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
   build: function(element, renderState, latestValues, options, props) {
@@ -62502,7 +62098,7 @@ var htmlConfig = {
   render: renderHTML
 };
 var htmlVisualElement = visualElement(htmlConfig);
-var svgVisualElement = visualElement(__assign$3(__assign$3({}, htmlConfig), { getBaseTarget: function(props, key2) {
+var svgVisualElement = visualElement(__assign$4(__assign$4({}, htmlConfig), { getBaseTarget: function(props, key2) {
   return props[key2];
 }, readValueFromInstance: function(domElement, key2) {
   var _a2;
@@ -62580,7 +62176,7 @@ var correctBoxShadow = {
 var MeasureLayoutWithContext = (
   /** @class */
   function(_super) {
-    __extends(MeasureLayoutWithContext2, _super);
+    __extends$1(MeasureLayoutWithContext2, _super);
     function MeasureLayoutWithContext2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -62599,7 +62195,7 @@ var MeasureLayoutWithContext = (
         projection.addEventListener("animationComplete", function() {
           _this.safeToRemove();
         });
-        projection.setOptions(__assign$3(__assign$3({}, projection.options), { onExitComplete: function() {
+        projection.setOptions(__assign$4(__assign$4({}, projection.options), { onExitComplete: function() {
           return _this.safeToRemove();
         } }));
       }
@@ -62664,10 +62260,10 @@ var MeasureLayoutWithContext = (
 function MeasureLayout(props) {
   var _a2 = __read(usePresence(), 2), isPresent = _a2[0], safeToRemove = _a2[1];
   var layoutGroup = useContext(LayoutGroupContext);
-  return React__default.createElement(MeasureLayoutWithContext, __assign$3({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
+  return React__default.createElement(MeasureLayoutWithContext, __assign$4({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
 }
 var defaultScaleCorrectors = {
-  borderRadius: __assign$3(__assign$3({}, correctBorderRadius), { applyTo: [
+  borderRadius: __assign$4(__assign$4({}, correctBorderRadius), { applyTo: [
     "borderTopLeftRadius",
     "borderTopRightRadius",
     "borderBottomLeftRadius",
@@ -63090,7 +62686,7 @@ function createProjectionNode(_a2) {
                 _this.resumingFrom.resumingFrom = void 0;
               }
               _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-              var animationOptions = __assign$3(__assign$3({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+              var animationOptions = __assign$4(__assign$4({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
               if (visualElement2.shouldReduceMotion) {
                 animationOptions.delay = 0;
                 animationOptions.type = false;
@@ -63344,7 +62940,7 @@ function createProjectionNode(_a2) {
       };
       ProjectionNode.prototype.setOptions = function(options) {
         var _a3;
-        this.options = __assign$3(__assign$3(__assign$3({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
+        this.options = __assign$4(__assign$4(__assign$4({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
       };
       ProjectionNode.prototype.clearMeasurements = function() {
         this.scroll = void 0;
@@ -63462,7 +63058,7 @@ function createProjectionNode(_a2) {
         }
         var snapshot = this.snapshot;
         var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-        var mixedValues = __assign$3({}, this.latestValues);
+        var mixedValues = __assign$4({}, this.latestValues);
         var targetDelta = createDelta();
         this.relativeTarget = this.relativeTargetOrigin = void 0;
         this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
@@ -63505,7 +63101,7 @@ function createProjectionNode(_a2) {
         }
         this.pendingAnimation = sync.update(function() {
           globalProjectionState.hasAnimatedSinceResize = true;
-          _this.currentAnimation = animate(0, animationTarget, __assign$3(__assign$3({}, options), { onUpdate: function(latest) {
+          _this.currentAnimation = animate(0, animationTarget, __assign$4(__assign$4({}, options), { onUpdate: function(latest) {
             var _a4;
             _this.mixTargetDelta(latest);
             (_a4 = options.onUpdate) === null || _a4 === void 0 ? void 0 : _a4.call(options, latest);
@@ -63873,7 +63469,7 @@ var HTMLProjectionNode = createProjectionNode({
     return Boolean(window.getComputedStyle(instance).position === "fixed");
   }
 });
-var featureBundle = __assign$3(__assign$3(__assign$3(__assign$3({}, animations), gestureAnimations), drag), layoutFeatures);
+var featureBundle = __assign$4(__assign$4(__assign$4(__assign$4({}, animations), gestureAnimations), drag), layoutFeatures);
 var motion = /* @__PURE__ */ createMotionProxy(function(Component2, config) {
   return createDomMotionConfig(Component2, config, featureBundle, createDomVisualElement, HTMLProjectionNode);
 });
@@ -66179,6 +65775,10 @@ const checkConversion = ({
   if (!availableUnits.includes(toUnit)) {
     return false;
   }
+  const valueUnit = getUnit(String(value));
+  if (valueUnit && !availableUnits.includes(valueUnit)) {
+    return false;
+  }
   return true;
 };
 const convertUnit = ({
@@ -66231,6 +65831,14 @@ const safeConvertValue = ({
 }) => {
   const rawValue = getValue(value);
   const isInvalidInput = isWrongValue(rawValue);
+  const shouldConvert = checkConversion({
+    value,
+    unitkey,
+    toUnit
+  });
+  if (!shouldConvert) {
+    return { value: rawValue };
+  }
   if (isValueWithUnknownUnit(value)) {
     return { value: rawValue };
   }
@@ -66452,6 +66060,22 @@ const UnitInput = ({
   const createPredefinedOption = (el2) => {
     const elementValue = (el2 == null ? void 0 : el2.value) ? el2.value : "";
     const [value2 = "", unit2 = ""] = isValueWithUnit(elementValue) ? split$1(elementValue) : [elementValue];
+    let description2 = withPrettyUnitLabel(elementValue);
+    const shouldConvert = checkConversion({
+      value: elementValue,
+      unitkey,
+      toUnit: unit2
+    });
+    if (shouldConvert) {
+      const { value: value3 = "" } = safeConvertValue({
+        value: elementValue,
+        toUnit: preferredUnit,
+        unitkey,
+        defaultFromUnit: unit2,
+        doNotConvertValue: noConversion
+      });
+      description2 = withPrettyUnitLabel(withUnit(value3, preferredUnit));
+    }
     return {
       type: MenuType.OPTION,
       inline: true,
@@ -66473,7 +66097,7 @@ const UnitInput = ({
         /* @__PURE__ */ jsx(Text, { children: el2.label }),
         /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
       ] }),
-      description: isValueWithUnit(elementValue) ? `${value2} ${unit2}` : elementValue,
+      description: description2,
       selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
     };
   };
@@ -66664,7 +66288,7 @@ const convertVisibleRows = ({
           fromUnit: storageUnit
         });
         const convertedValue = unitChanged ? resultValue : cell2.value;
-        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue) : convertedValue;
+        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue, selectedUnit) : convertedValue;
         return {
           ...cell2,
           value: formattedDisplayValue,