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

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, Component as Component$1, memo, 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, memo as memo$1, cloneElement as cloneElement$1, PureComponent, useImperativeHandle } from "react";
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
-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";
+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";
 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$1 = function(d2, b2) {
-  extendStatics$1 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+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 (Object.prototype.hasOwnProperty.call(b3, p)) d3[p] = b3[p];
   };
-  return extendStatics$1(d2, b2);
+  return extendStatics(d2, b2);
 };
-function __extends$1(d2, b2) {
+function __extends(d2, b2) {
   if (typeof b2 !== "function" && b2 !== null)
     throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-  extendStatics$1(d2, b2);
+  extendStatics(d2, b2);
   function __() {
     this.constructor = d2;
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-var __assign$4 = function() {
-  __assign$4 = Object.assign || function __assign2(t) {
+var __assign$3 = function() {
+  __assign$3 = 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$4.apply(this, arguments);
+  return __assign$3.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$3 = function() {
-  __assign$3 = Object.assign || function(t) {
+var __assign$2 = function() {
+  __assign$2 = 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$3.apply(this, arguments);
+  return __assign$2.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$3({
+    return React__default.createElement(node2.tag, __assign$2({
       key: i
     }, node2.attr), Tree2Element(node2.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React__default.createElement(IconBase, __assign$3({
-      attr: __assign$3({}, data.attr)
+    return React__default.createElement(IconBase, __assign$2({
+      attr: __assign$2({}, 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$3({
+    return React__default.createElement("svg", __assign$2({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className,
-      style: __assign$3(__assign$3({
+      style: __assign$2(__assign$2({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -1808,7 +1808,7 @@ var requestAnimationFrame$1 = function() {
   };
 }();
 var trailingTimeout = 2;
-function throttle$2(callback, delay) {
+function throttle$1(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$2(this.refresh.bind(this), REFRESH_DELAY);
+      this.refresh = throttle$1(this.refresh.bind(this), REFRESH_DELAY);
     }
     ResizeObserverController2.prototype.addObserver = function(observer) {
       if (!~this.observers_.indexOf(observer)) {
@@ -2354,7 +2354,7 @@ function useEventSubscriptions() {
     };
   }, []);
 }
-var useIsomorphicLayoutEffect$5 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$6 = 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$5(function() {
+  useIsomorphicLayoutEffect$6(function() {
     if (!triggerOptionParent) {
       return;
     }
@@ -2612,7 +2612,7 @@ function useTrackElements(_ref) {
       });
     });
   }, [triggerOptionParent, set2, getScrollContainers]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$6(function() {
     if (enabled) {
       if (!hasEventSubscriptions()) {
         addEventListeners();
@@ -2624,7 +2624,7 @@ function useTrackElements(_ref) {
       }
     };
   }, [enabled, hasEventSubscriptions, addEventListeners, removeAllEventSubscriptions]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$6(function() {
     if (enabled) {
       handleChange();
     }
@@ -4078,6 +4078,7 @@ const Button$1 = ({
   basic: basic2 = false,
   colored: colored2 = false,
   disabled: disabled2 = false,
+  ignoreDisabledContext = false,
   groupOrder = null,
   icon: icon2 = null,
   label: label2 = "",
@@ -4133,6 +4134,7 @@ const Button$1 = ({
     }
     return "";
   })();
+  const isDisabled = disabled2 || disabledContext && !ignoreDisabledContext;
   return /* @__PURE__ */ jsx(ButtonTooltipWrapper, { tooltip: tooltip2, children: /* @__PURE__ */ jsxs(
     Component2,
     {
@@ -4142,7 +4144,7 @@ const Button$1 = ({
         active2 ? buttonStyles.active : "",
         basic2 ? buttonStyles.basic : "",
         color2,
-        disabled2 || disabledContext ? buttonStyles.disabled : "",
+        isDisabled ? buttonStyles.disabled : "",
         (icon2 || loading) && !label2 ? buttonStyles.iconOnly : "",
         inverted2 ? buttonStyles.inverted : "",
         order2,
@@ -4151,7 +4153,7 @@ const Button$1 = ({
         small2 ? buttonStyles.small : "",
         styles2
       ),
-      disabled: disabled2 || disabledContext,
+      disabled: isDisabled,
       name: name2 ?? "",
       onClick,
       ...title2 ? { title: title2 } : {},
@@ -5306,15 +5308,15 @@ const Card = ({
     }
   );
 };
-var __assign$2 = function() {
-  __assign$2 = Object.assign || function __assign2(t) {
+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$2.apply(this, arguments);
+  return __assign$1.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++) {
@@ -6147,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$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() {
+    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() {
       return function(e4) {
         for (var t = e4.getTag(), n3 = t.length, o2 = "", r3 = function(n4) {
           var r4 = function(e5) {
@@ -6170,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$2(__assign$2({}, this.options), n2), this.gs, o && this.names || void 0);
+    return void 0 === o && (o = true), new e2(__assign$1(__assign$1({}, 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() {
@@ -6343,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$2(__assign$2({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
+        for (var r5, s3 = __assign$1(__assign$1({}, 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$2(__assign$2({}, s3[c4]), a4[c4]) : a4[c4];
+          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];
         }
         return n2.className && (s3.className = ie$2(s3.className, n2.className)), s3;
       }(i2, r4, v2), S3 = g3.as || h2, w3 = {};
@@ -6401,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$2(__assign$2({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
+    return ut(n2, o, __assign$1(__assign$1({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
   }, s.withConfig = function(e2) {
-    return ut(n2, o, __assign$2(__assign$2({}, r2), e2));
+    return ut(n2, o, __assign$1(__assign$1({}, r2), e2));
   }, s;
 }
 var pt$1 = function(e2) {
@@ -6688,7 +6690,8 @@ const Dialog = ({ dialog: dialog2 }) => {
               small: true,
               colored: "muted",
               onClick: onClose,
-              testId: testId && `${testId}-dismiss`
+              testId: testId && `${testId}-dismiss`,
+              ignoreDisabledContext: true
             }
           ) }) : null
         ] }),
@@ -9498,383 +9501,803 @@ const InputGroupAddon = ({
   })();
   return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
-/*! *****************************************************************************
-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 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;
   };
-  return extendStatics(d2, b2);
-};
-function __extends(d2, b2) {
-  extendStatics(d2, b2);
-  function __() {
-    this.constructor = d2;
+}
+function notUndefined(value, msg2) {
+  if (value === void 0) {
+    throw new Error(`Unexpected undefined${""}`);
+  } else {
+    return value;
   }
-  d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-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;
+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);
   };
-  return __assign$1.apply(this, arguments);
 };
-function throttle$1(delay, noTrailing, callback, debounceMode) {
-  var timeoutID;
-  var cancelled = false;
-  var lastExec = 0;
-  function clearExistingTimeout() {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
+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);
   }
-  function cancel() {
-    clearExistingTimeout();
-    cancelled = true;
+  return arr;
+};
+const observeElementRect = (instance, cb2) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
   }
-  if (typeof noTrailing !== "boolean") {
-    debounceMode = callback;
-    callback = noTrailing;
-    noTrailing = void 0;
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
   }
-  function wrapper2() {
-    var self2 = this;
-    var elapsed = Date.now() - lastExec;
-    var args = arguments;
-    if (cancelled) {
-      return;
-    }
-    function exec() {
-      lastExec = Date.now();
-      callback.apply(self2, args);
-    }
-    function clear() {
-      timeoutID = void 0;
-    }
-    if (debounceMode && !timeoutID) {
-      exec();
+  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 () => {
+    };
+  }
+  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;
+      }
     }
-    clearExistingTimeout();
-    if (debounceMode === void 0 && elapsed > delay) {
-      exec();
-    } else if (noTrailing !== true) {
-      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === void 0 ? delay - elapsed : delay);
+    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;
     }
   }
-  wrapper2.cancel = cancel;
-  return wrapper2;
-}
-var ThresholdUnits = {
-  Pixel: "Pixel",
-  Percent: "Percent"
+  return Math.round(
+    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
+  );
 };
-var defaultThreshold$1 = {
-  unit: ThresholdUnits.Percent,
-  value: 0.8
+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
+  });
 };
-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 {
-        unit: ThresholdUnits.Pixel,
-        value: parseFloat(scrollThreshold)
+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);
+          });
+        });
       };
-    }
-    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
       return {
-        unit: ThresholdUnits.Percent,
-        value: parseFloat(scrollThreshold)
-      };
-    }
-    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      ");
+        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);
         }
-        return null;
       };
-      _this.onStart = function(evt) {
-        if (_this.lastScrollTop)
+    })();
+    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
+      };
+    };
+    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();
+      };
+    };
+    this._willUpdate = () => {
+      var _a2;
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        if (!scrollElement) {
+          this.maybeNotify();
           return;
-        _this.dragging = true;
-        if (evt instanceof MouseEvent) {
-          _this.startY = evt.pageY;
-        } else if (evt instanceof TouchEvent) {
-          _this.startY = evt.touches[0].pageY;
         }
-        _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.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.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;
+        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;
         }
-        if (_this.currentY < _this.startY)
-          return;
-        if (_this.currentY - _this.startY >= Number(_this.props.pullDownToRefreshThreshold)) {
-          _this.setState({
-            pullToRefreshThresholdBreached: true
-          });
+        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 (_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)";
+        if (furthestMeasurementsFound.size === this.options.lanes) {
+          break;
         }
-      };
-      _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
-          });
+      }
+      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a2, b2) => {
+        if (a2.end === b2.end) {
+          return a2.index - b2.index;
         }
-        requestAnimationFrame(function() {
-          if (_this._infScroll) {
-            _this._infScroll.style.overflow = "auto";
-            _this._infScroll.style.transform = "none";
-            _this._infScroll.style.willChange = "unset";
-          }
-        });
-      };
-      _this.onScrollListener = function(event) {
-        if (typeof _this.props.onScroll === "function") {
-          setTimeout(function() {
-            return _this.props.onScroll && _this.props.onScroll(event);
-          }, 0);
+        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);
+          });
         }
-        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();
+        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.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'`);
+        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);
         }
+        this.observer.observe(node2);
+        this.elementsCache.set(key2, node2);
+      }
+      if (node2.isConnected) {
+        this.resizeItem(index2, this.options.measureElement(node2, entry, this));
       }
     };
-    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);
+    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.pendingMeasuredCacheIndexes.push(item2.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item2.key, size2));
+        this.notify(false);
       }
     };
-    InfiniteScroll2.prototype.componentDidUpdate = function(prevProps) {
-      if (this.props.dataLength === prevProps.dataLength)
+    this.measureElement = (node2) => {
+      if (!node2) {
+        this.elementsCache.forEach((cached, key2) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key2);
+          }
+        });
         return;
-      this.actionTriggered = false;
-      this.setState({
-        showLoader: false
-      });
+      }
+      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
+        )]
+      );
     };
-    InfiniteScroll2.getDerivedStateFromProps = function(nextProps, prevState) {
-      var dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
-      if (dataLengthChanged) {
-        return __assign$1(__assign$1({}, prevState), { prevDataLength: nextProps.dataLength });
+    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";
+        }
       }
-      return null;
+      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);
     };
-    InfiniteScroll2.prototype.isElementAtTop = function(target, scrollThreshold) {
-      if (scrollThreshold === void 0) {
-        scrollThreshold = 0.8;
+    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;
       }
-      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;
+      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];
+        }
       }
-      return target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1;
+      const toOffset = align === "end" ? item2.end + this.options.scrollPaddingEnd : item2.start - this.options.scrollPaddingStart;
+      return [this.getOffsetForAlignment(toOffset, align), align];
     };
-    InfiniteScroll2.prototype.isElementAtBottom = function(target, scrollThreshold) {
-      if (scrollThreshold === void 0) {
-        scrollThreshold = 0.8;
+    this.isDynamicMode = () => this.elementsCache.size > 0;
+    this.cancelScrollToIndex = () => {
+      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
+        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
+        this.scrollToIndexTimeoutId = null;
       }
-      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;
+    };
+    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."
+        );
       }
-      return target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight;
+      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
+        adjustments: void 0,
+        behavior
+      });
     };
-    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.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."
+        );
+      }
+      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 });
+          }
+        });
+      }
+    };
+    this.scrollBy = (delta, { behavior } = {}) => {
+      this.cancelScrollToIndex();
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
+      }
+      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)
+        );
+      }
+      return Math.max(
+        end - this.options.scrollMargin + this.options.paddingEnd,
+        0
       );
     };
-    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";
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+    };
+    this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map();
+      this.notify(false);
+    };
+    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";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -9883,6 +10306,10 @@ 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,
@@ -9896,9 +10323,7 @@ const listStyles = {
   toggleNarrow,
   drag: drag$1,
   dragOverlay: dragOverlay$1,
-  list: list$1,
-  bordered: bordered$1,
-  item: item$4,
+  listContent,
   action,
   active: active$3,
   indented,
@@ -9912,10 +10337,9 @@ const listStyles = {
   expanded,
   right: right$4,
   actions,
-  scrollableList,
-  infiniteScrollContainer,
   hideScrollbar,
-  noPointerEvents
+  noPointerEvents,
+  virtualRows
 };
 const ToggleNarrow = ({
   toggleNarrow: toggleNarrow2,
@@ -10140,9 +10564,9 @@ function isTouchEvent$2(event) {
     return false;
   }
   const {
-    TouchEvent: TouchEvent2
+    TouchEvent
   } = getWindow(event.target);
-  return TouchEvent2 && event instanceof TouchEvent2;
+  return TouchEvent && event instanceof TouchEvent;
 }
 function getEventCoordinates(event) {
   if (isTouchEvent$2(event)) {
@@ -12560,7 +12984,7 @@ var Status;
   Status2[Status2["Initializing"] = 1] = "Initializing";
   Status2[Status2["Initialized"] = 2] = "Initialized";
 })(Status || (Status = {}));
-const DndContext$1 = /* @__PURE__ */ memo(function DndContext(_ref) {
+const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
   var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
   let {
     id: id2,
@@ -14198,72 +14622,6 @@ 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,
@@ -14278,15 +14636,14 @@ 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 = (_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;
+    const from3 = active2 == null ? void 0 : active2.id;
+    const to2 = over == null ? void 0 : over.id;
     if (from3 !== to2) {
       onListReorder({
-        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
+        from: Number(from3),
+        to: Number(to2)
       });
     }
   };
@@ -14335,58 +14692,26 @@ const List = ({
   height: height2,
   testId,
   scrollDetails = {
-    scrollable: false,
     hideScrollbar: false,
-    triggerScrollToActiveItem: false,
-    infiniteScroll: false,
-    limit: 10,
-    infiniteScrollTarget: void 0
+    triggerScrollToActiveItem: false
   }
 }) => {
-  const {
-    scrollable,
-    hideScrollbar: hideScrollbar2,
-    triggerScrollToActiveItem,
-    infiniteScroll,
-    infiniteScrollTarget
-  } = scrollDetails;
-  const listHeadingRef = useRef(null);
-  const listRowRefs = useRef([]);
+  const { hideScrollbar: hideScrollbar2, triggerScrollToActiveItem } = scrollDetails;
   const listContainerRef = useRef(null);
-  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 MIN_ITEM_HEIGHT = 37;
+  const virtualizer = useVirtualizer({
+    count: list2.items.length,
+    getScrollElement: () => listContainerRef.current,
+    estimateSize: () => MIN_ITEM_HEIGHT,
+    overscan: 5
+  });
   const findFirstActiveItemIndex = (items) => items.findIndex((item2) => item2.active === true);
   const setScrollToActiveItem = (activeItemIndex) => {
-    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;
+    if (activeItemIndex >= 0) {
+      virtualizer.scrollToIndex(activeItemIndex, {
+        align: "center",
+        behavior: "smooth"
+      });
     }
   };
   useEffect(() => {
@@ -14394,24 +14719,18 @@ const List = ({
       const activeItemIndex = findFirstActiveItemIndex(list2 == null ? void 0 : list2.items);
       setScrollToActiveItem(activeItemIndex);
     }
-  }, [
-    listContainerRef.current,
-    listHeadingRef.current,
-    triggerScrollToActiveItem
-  ]);
-  return /* @__PURE__ */ jsx(
+  }, [triggerScrollToActiveItem]);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx$2(
+        listStyles.list,
         narrow2 ? listStyles.narrow : "",
-        scrollable ? listStyles.scrollableList : "",
-        hideScrollbar2 ? listStyles.hideScrollbar : ""
+        bordered2 ? listStyles.bordered : ""
       ),
       "data-testid": testId,
-      id: "scrollableDiv",
       style: { height: height2, marginBottom },
-      ref: listContainerRef,
-      children: /* @__PURE__ */ jsxs(Card, { bordered: bordered2, padding: false, children: [
+      children: [
         !noHeader && /* @__PURE__ */ jsx(
           ListHeading,
           {
@@ -14419,53 +14738,123 @@ const List = ({
             actions: list2.actions,
             toggleNarrow: toggleNarrow2,
             onToggleNarrow,
-            stickyHeader: stickyHeader2,
-            ref: listHeadingRef
+            stickyHeader: stickyHeader2
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           ListDragWrapper,
           {
             draggable,
             list: list2,
             onListReorder,
-            children: infiniteScroll ? /* @__PURE__ */ jsx(
-              InfiniteScroll,
+            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: cx$2(
+                  listStyles.listContent,
+                  hideScrollbar2 ? listStyles.hideScrollbar : ""
+                ),
+                ref: listContainerRef,
+                children: /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    index: index2,
-                    draggable,
-                    item: item2,
-                    expanding,
-                    invokeEditOnRowClick,
-                    ref: listRowRefs
-                  },
-                  index2
-                ))
+                    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
+                    ))
+                  }
+                )
               }
-            ) : list2.items.map((item2, index2) => /* @__PURE__ */ jsx(
-              ListRow,
-              {
-                index: index2,
-                draggable,
-                item: item2,
-                expanding,
-                invokeEditOnRowClick,
-                ref: listRowRefs
-              },
-              index2
-            ))
+            )
           }
-        ) })
-      ] })
+        )
+      ]
+    }
+  );
+};
+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
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
 };
@@ -15239,7 +15628,7 @@ const useFontsReady = () => {
 const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 const useWindowWidth = () => {
   const [width2, setWidth] = useState(getWidth());
-  const resizeListener = debounce$2(() => setWidth(getWidth()), 150);
+  const resizeListener = debounce$3(() => setWidth(getWidth()), 150);
   useEffect(() => {
     window.addEventListener("resize", resizeListener);
     return () => {
@@ -48001,7 +48390,7 @@ const styles$d = {
   active: active$2,
   icon: icon$1
 };
-const TooltipIcon = memo(
+const TooltipIcon = memo$1(
   ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
@@ -48076,7 +48465,7 @@ const Sections = ({
     )
   ] }, i)) });
 };
-const SideBar = memo(
+const SideBar = memo$1(
   ({
     options,
     startOpen = false,
@@ -50702,19 +51091,19 @@ const Spacer = ({
     }
   }
 );
-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 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 styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
@@ -50820,36 +51209,6 @@ 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";
@@ -51619,7 +51978,7 @@ const Row = ({
     animateLayoutChanges: () => false
   });
   const style = {
-    transform: CSS.Translate.toString(transform),
+    transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0 : void 0
   };
@@ -51677,6 +52036,8 @@ const Row = ({
         ),
         "data-error": error2 || null,
         "data-warning": warning2 || null,
+        "data-index": rowIndex,
+        "data-even": rowIndex % 2 === 0,
         style,
         children: [
           draggableTable ? getDragItem() : null,
@@ -51768,6 +52129,35 @@ 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 = () => {
@@ -51790,6 +52180,7 @@ 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);
@@ -51851,7 +52242,7 @@ const Table = (props) => {
         testId: testId && `${testId}-title`
       }
     ),
-    /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       TableDragWrapper,
       {
         colSpan,
@@ -51862,49 +52253,65 @@ const Table = (props) => {
         rowActions,
         rows,
         tbodyRef,
-        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(
+        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(
                   Row,
                   {
-                    rowIndex,
-                    isHeader: true,
+                    rowIndex: index2,
                     row: row2,
                     columnCount,
                     columnWidths,
                     colSpan,
                     hasRowActions: rowActions,
                     columnAlignment,
-                    columnHeaderAlignments,
                     draggableTable: draggable
                   },
-                  `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}`
-              )) })
-            ]
-          }
-        )
+                  `1_${index2}`
+                )) })
+              ]
+            }
+          );
+        } })
       }
-    ) }),
+    ),
     footer2 && /* @__PURE__ */ jsx(
       Footer,
       {
@@ -55017,7 +55424,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 let refCount = 0;
 const INSTANCE_SYM = Symbol.for("__REACT_DND_CONTEXT_INSTANCE__");
-var DndProvider = /* @__PURE__ */ memo(function DndProvider2(_param) {
+var DndProvider = /* @__PURE__ */ memo$1(function DndProvider2(_param) {
   var { children } = _param, props = _objectWithoutProperties(_param, [
     "children"
   ]);
@@ -57378,7 +57785,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$4({ key: name_1 }, props, { visualElement: visualElement2 })));
+      features.push(React$4.createElement(Component2, __assign$3({ key: name_1 }, props, { visualElement: visualElement2 })));
     }
   }
   return features;
@@ -57619,7 +58026,7 @@ function useProjection(projectionId, _a2, visualElement2, ProjectionNodeConstruc
 var VisualElementHandler = (
   /** @class */
   function(_super) {
-    __extends$1(VisualElementHandler2, _super);
+    __extends(VisualElementHandler2, _super);
     function VisualElementHandler2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -57645,20 +58052,20 @@ function createMotionComponent(_a2) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props, externalRef) {
     var layoutId = useLayoutId(props);
-    props = __assign$4(__assign$4({}, props), { layoutId });
+    props = __assign$3(__assign$3({}, 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$4(__assign$4({}, config), props), createVisualElement);
+      context2.visualElement = useVisualElement(Component2, visualState, __assign$3(__assign$3({}, 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$4(__assign$4({}, config), props) },
+      { visualElement: context2.visualElement, props: __assign$3(__assign$3({}, config), props) },
       features,
       React$4.createElement(MotionContext.Provider, { value: context2 }, useRender(Component2, props, projectionId, useMotionRef(visualState, context2.visualElement, externalRef), visualState, config.isStatic, context2.visualElement))
     );
@@ -57984,7 +58391,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$4(__assign$4({}, number), { transform: Math.round });
+var int = __assign$3(__assign$3({}, number), { transform: Math.round });
 var numberValueTypes = {
   // Border props
   borderWidth: px,
@@ -58114,7 +58521,7 @@ function useInitialMotionValues(_a2, visualState, isStatic) {
     var state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
     var vars = state.vars, style = state.style;
-    return __assign$4(__assign$4({}, vars), style);
+    return __assign$3(__assign$3({}, vars), style);
   }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
@@ -58272,18 +58679,18 @@ function buildSVGAttrs(state, _a2, options, transformTemplate) {
   }
 }
 var createSvgRenderState = function() {
-  return __assign$4(__assign$4({}, createHtmlRenderState()), { attrs: {} });
+  return __assign$3(__assign$3({}, createHtmlRenderState()), { attrs: {} });
 };
 function useSVGProps(props, visualState) {
   var visualProps = useMemo(function() {
     var state = createSvgRenderState();
     buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
-    return __assign$4(__assign$4({}, state.attrs), { style: __assign$4({}, state.style) });
+    return __assign$3(__assign$3({}, state.attrs), { style: __assign$3({}, state.style) });
   }, [visualState]);
   if (props.style) {
     var rawStyles = {};
     copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = __assign$4(__assign$4({}, rawStyles), visualProps.style);
+    visualProps.style = __assign$3(__assign$3({}, rawStyles), visualProps.style);
   }
   return visualProps;
 }
@@ -58296,7 +58703,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$4(__assign$4(__assign$4({}, filteredProps), visualProps), { ref });
+    var elementProps = __assign$3(__assign$3(__assign$3({}, filteredProps), visualProps), { ref });
     if (projectionId) {
       elementProps["data-projection-id"] = projectionId;
     }
@@ -58473,7 +58880,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$4(__assign$4({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
+  return __assign$3(__assign$3({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
 }
 var AnimationType;
 (function(AnimationType2) {
@@ -59560,7 +59967,7 @@ function initIntersectionObserver(_a2) {
   var rootObservers = observers.get(lookupRoot);
   var key2 = JSON.stringify(options);
   if (!rootObservers[key2]) {
-    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$4({ root: root2 }, options));
+    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$3({ root: root2 }, options));
   }
   return rootObservers[key2];
 }
@@ -59778,9 +60185,9 @@ var getDefaultTransition = function(valueKey, to2) {
   } else {
     transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
   }
-  return __assign$4({ to: to2 }, transitionFactory(to2));
+  return __assign$3({ to: to2 }, transitionFactory(to2));
 };
-var defaultValueTypes = __assign$4(__assign$4({}, numberValueTypes), {
+var defaultValueTypes = __assign$3(__assign$3({}, numberValueTypes), {
   // Color props
   color,
   backgroundColor: color,
@@ -59822,7 +60229,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$4({}, transition);
+  var options = __assign$3({}, transition);
   if (times)
     options["offset"] = times;
   if (transition.duration)
@@ -59869,9 +60276,9 @@ function getPopmotionAnimationOptions(transition, options, key2) {
   }
   hydrateKeyframes(options);
   if (!isTransitionDefined(transition)) {
-    transition = __assign$4(__assign$4({}, transition), getDefaultTransition(key2, options.to));
+    transition = __assign$3(__assign$3({}, transition), getDefaultTransition(key2, options.to));
   }
-  return __assign$4(__assign$4({}, options), convertTransitionToAnimationOptions(transition));
+  return __assign$3(__assign$3({}, options), convertTransitionToAnimationOptions(transition));
 }
 function getAnimation(key2, value, target, transition, onComplete) {
   var _a2;
@@ -59897,7 +60304,7 @@ function getAnimation(key2, value, target, transition, onComplete) {
         return value.set(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) {
+    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) {
       var _a3;
       options.onUpdate(v2);
       (_a3 = valueTransition.onUpdate) === null || _a3 === void 0 ? void 0 : _a3.call(valueTransition, v2);
@@ -60150,7 +60557,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$4(__assign$4({}, target), transitionEnd);
+  target = __assign$3(__assign$3({}, target), transitionEnd);
   for (var key2 in target) {
     var value = resolveFinalValueInKeyframes(target[key2]);
     setMotionValue(visualElement2, key2, value);
@@ -60268,9 +60675,9 @@ function animateTarget(visualElement2, definition, _a2) {
     if (!value || valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key2)) {
       continue;
     }
-    var valueTransition = __assign$4({ delay }, transition);
+    var valueTransition = __assign$3({ delay }, transition);
     if (visualElement2.shouldReduceMotion && isTransformProp(key2)) {
-      valueTransition = __assign$4(__assign$4({}, valueTransition), { type: false, delay: 0 });
+      valueTransition = __assign$3(__assign$3({}, valueTransition), { type: false, delay: 0 });
     }
     var animation = startAnimation(key2, value, valueTarget, valueTransition);
     animations2.push(animation);
@@ -60303,7 +60710,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$4(__assign$4({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
+    animations2.push(animateVariant(child, variant, __assign$3(__assign$3({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
       return child.notifyAnimationComplete(variant);
     }));
   });
@@ -60347,7 +60754,7 @@ function createAnimationState(visualElement2) {
     if (resolved) {
       resolved.transition;
       var transitionEnd = resolved.transitionEnd, target = __rest$1(resolved, ["transition", "transitionEnd"]);
-      acc = __assign$4(__assign$4(__assign$4({}, acc), target), transitionEnd);
+      acc = __assign$3(__assign$3(__assign$3({}, acc), target), transitionEnd);
     }
     return acc;
   };
@@ -60377,7 +60784,7 @@ function createAnimationState(visualElement2) {
       if (isInherited && isInitialRender && visualElement2.manuallyAnimateOnMount) {
         isInherited = false;
       }
-      typeState.protectedKeys = __assign$4({}, encounteredKeys);
+      typeState.protectedKeys = __assign$3({}, 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
@@ -60395,7 +60802,7 @@ function createAnimationState(visualElement2) {
       if (activeDelta === false)
         resolvedValues = {};
       var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
-      var allKeys = __assign$4(__assign$4({}, prevResolvedValues), resolvedValues);
+      var allKeys = __assign$3(__assign$3({}, prevResolvedValues), resolvedValues);
       var markToAnimate = function(key3) {
         shouldAnimateType = true;
         removedKeys.delete(key3);
@@ -60427,7 +60834,7 @@ function createAnimationState(visualElement2) {
       typeState.prevProp = prop;
       typeState.prevResolvedValues = resolvedValues;
       if (typeState.isActive) {
-        encounteredKeys = __assign$4(__assign$4({}, encounteredKeys), resolvedValues);
+        encounteredKeys = __assign$3(__assign$3({}, encounteredKeys), resolvedValues);
       }
       if (isInitialRender && visualElement2.blockInitialAnimation) {
         shouldAnimateType = false;
@@ -60436,7 +60843,7 @@ function createAnimationState(visualElement2) {
         animations2.push.apply(animations2, __spreadArray$2([], __read(definitionList.map(function(animation) {
           return {
             animation,
-            options: __assign$4({ type }, options)
+            options: __assign$3({ type }, options)
           };
         })), false));
       }
@@ -60444,7 +60851,7 @@ function createAnimationState(visualElement2) {
     for (var i = 0; i < numAnimationTypes; i++) {
       _loop_1(i);
     }
-    allAnimatedKeys = __assign$4({}, encounteredKeys);
+    allAnimatedKeys = __assign$3({}, encounteredKeys);
     if (removedKeys.size) {
       var fallbackAnimation_1 = {};
       removedKeys.forEach(function(key2) {
@@ -60552,7 +60959,7 @@ var PanSession = (
           return;
         var point2 = info3.point;
         var timestamp2 = getFrameData().timestamp;
-        _this.history.push(__assign$4(__assign$4({}, point2), { timestamp: timestamp2 }));
+        _this.history.push(__assign$3(__assign$3({}, point2), { timestamp: timestamp2 }));
         var _a3 = _this.handlers, onStart = _a3.onStart, onMove = _a3.onMove;
         if (!isPanStarted) {
           onStart && onStart(_this.lastMoveEvent, info3);
@@ -60586,7 +60993,7 @@ var PanSession = (
       var initialInfo = transformPoint(info2, this.transformPagePoint);
       var point = initialInfo.point;
       var timestamp = getFrameData().timestamp;
-      this.history = [__assign$4(__assign$4({}, point), { timestamp })];
+      this.history = [__assign$3(__assign$3({}, 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));
@@ -61107,7 +61514,7 @@ var VisualElementDragControls = (
           transition = { min: 0, max: 0 };
         var bounceStiffness = dragElastic ? 200 : 1e6;
         var bounceDamping = dragElastic ? 40 : 1e7;
-        var inertia2 = __assign$4(__assign$4({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+        var inertia2 = __assign$3(__assign$3({ 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);
@@ -61218,7 +61625,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$4(__assign$4({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
+      return __assign$3(__assign$3({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
     };
     return VisualElementDragControls2;
   }()
@@ -61375,7 +61782,7 @@ var visualElement = function(_a2) {
     var values2 = /* @__PURE__ */ new Map();
     var valueSubscriptions = /* @__PURE__ */ new Map();
     var prevMotionValues = {};
-    var baseTarget = __assign$4({}, latestValues);
+    var baseTarget = __assign$3({}, latestValues);
     var removeFromVariantTree;
     function render2() {
       if (!instance || !isMounted)
@@ -61409,7 +61816,7 @@ var visualElement = function(_a2) {
     }
     var isControllingVariants = checkIfControllingVariants(props);
     var isVariantNode = checkIfVariantNode(props);
-    var element = __assign$4(__assign$4({
+    var element = __assign$3(__assign$3({
       treeType,
       /**
        * This is a mirror of the internal instance prop, which keeps
@@ -61774,7 +62181,7 @@ function resolveCSSVariables(visualElement2, _a2, transitionEnd) {
   if (!(element instanceof Element))
     return { target, transitionEnd };
   if (transitionEnd) {
-    transitionEnd = __assign$4({}, transitionEnd);
+    transitionEnd = __assign$3({}, transitionEnd);
   }
   visualElement2.forEachValue(function(value) {
     var current2 = value.get();
@@ -61929,8 +62336,8 @@ var checkAndConvertChangedValueTypes = function(visualElement2, target, origin,
   if (transitionEnd === void 0) {
     transitionEnd = {};
   }
-  target = __assign$4({}, target);
-  transitionEnd = __assign$4({}, transitionEnd);
+  target = __assign$3({}, target);
+  transitionEnd = __assign$3({}, transitionEnd);
   var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
   var removedTransformValues = [];
   var hasAttemptedToRemoveTransformValues = false;
@@ -62083,7 +62490,7 @@ var htmlConfig = {
       transitionEnd = parsed.transitionEnd;
       target = parsed.target;
     }
-    return __assign$4({ transition, transitionEnd }, target);
+    return __assign$3({ transition, transitionEnd }, target);
   },
   scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
   build: function(element, renderState, latestValues, options, props) {
@@ -62095,7 +62502,7 @@ var htmlConfig = {
   render: renderHTML
 };
 var htmlVisualElement = visualElement(htmlConfig);
-var svgVisualElement = visualElement(__assign$4(__assign$4({}, htmlConfig), { getBaseTarget: function(props, key2) {
+var svgVisualElement = visualElement(__assign$3(__assign$3({}, htmlConfig), { getBaseTarget: function(props, key2) {
   return props[key2];
 }, readValueFromInstance: function(domElement, key2) {
   var _a2;
@@ -62173,7 +62580,7 @@ var correctBoxShadow = {
 var MeasureLayoutWithContext = (
   /** @class */
   function(_super) {
-    __extends$1(MeasureLayoutWithContext2, _super);
+    __extends(MeasureLayoutWithContext2, _super);
     function MeasureLayoutWithContext2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -62192,7 +62599,7 @@ var MeasureLayoutWithContext = (
         projection.addEventListener("animationComplete", function() {
           _this.safeToRemove();
         });
-        projection.setOptions(__assign$4(__assign$4({}, projection.options), { onExitComplete: function() {
+        projection.setOptions(__assign$3(__assign$3({}, projection.options), { onExitComplete: function() {
           return _this.safeToRemove();
         } }));
       }
@@ -62257,10 +62664,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$4({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
+  return React__default.createElement(MeasureLayoutWithContext, __assign$3({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
 }
 var defaultScaleCorrectors = {
-  borderRadius: __assign$4(__assign$4({}, correctBorderRadius), { applyTo: [
+  borderRadius: __assign$3(__assign$3({}, correctBorderRadius), { applyTo: [
     "borderTopLeftRadius",
     "borderTopRightRadius",
     "borderBottomLeftRadius",
@@ -62683,7 +63090,7 @@ function createProjectionNode(_a2) {
                 _this.resumingFrom.resumingFrom = void 0;
               }
               _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-              var animationOptions = __assign$4(__assign$4({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+              var animationOptions = __assign$3(__assign$3({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
               if (visualElement2.shouldReduceMotion) {
                 animationOptions.delay = 0;
                 animationOptions.type = false;
@@ -62937,7 +63344,7 @@ function createProjectionNode(_a2) {
       };
       ProjectionNode.prototype.setOptions = function(options) {
         var _a3;
-        this.options = __assign$4(__assign$4(__assign$4({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
+        this.options = __assign$3(__assign$3(__assign$3({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
       };
       ProjectionNode.prototype.clearMeasurements = function() {
         this.scroll = void 0;
@@ -63055,7 +63462,7 @@ function createProjectionNode(_a2) {
         }
         var snapshot = this.snapshot;
         var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-        var mixedValues = __assign$4({}, this.latestValues);
+        var mixedValues = __assign$3({}, this.latestValues);
         var targetDelta = createDelta();
         this.relativeTarget = this.relativeTargetOrigin = void 0;
         this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
@@ -63098,7 +63505,7 @@ function createProjectionNode(_a2) {
         }
         this.pendingAnimation = sync.update(function() {
           globalProjectionState.hasAnimatedSinceResize = true;
-          _this.currentAnimation = animate(0, animationTarget, __assign$4(__assign$4({}, options), { onUpdate: function(latest) {
+          _this.currentAnimation = animate(0, animationTarget, __assign$3(__assign$3({}, options), { onUpdate: function(latest) {
             var _a4;
             _this.mixTargetDelta(latest);
             (_a4 = options.onUpdate) === null || _a4 === void 0 ? void 0 : _a4.call(options, latest);
@@ -63466,7 +63873,7 @@ var HTMLProjectionNode = createProjectionNode({
     return Boolean(window.getComputedStyle(instance).position === "fixed");
   }
 });
-var featureBundle = __assign$4(__assign$4(__assign$4(__assign$4({}, animations), gestureAnimations), drag), layoutFeatures);
+var featureBundle = __assign$3(__assign$3(__assign$3(__assign$3({}, animations), gestureAnimations), drag), layoutFeatures);
 var motion = /* @__PURE__ */ createMotionProxy(function(Component2, config) {
   return createDomMotionConfig(Component2, config, featureBundle, createDomVisualElement, HTMLProjectionNode);
 });
@@ -65772,10 +66179,6 @@ const checkConversion = ({
   if (!availableUnits.includes(toUnit)) {
     return false;
   }
-  const valueUnit = getUnit(String(value));
-  if (valueUnit && !availableUnits.includes(valueUnit)) {
-    return false;
-  }
   return true;
 };
 const convertUnit = ({
@@ -65828,14 +66231,6 @@ 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 };
   }
@@ -66057,22 +66452,6 @@ 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,
@@ -66094,7 +66473,7 @@ const UnitInput = ({
         /* @__PURE__ */ jsx(Text, { children: el2.label }),
         /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
       ] }),
-      description: description2,
+      description: isValueWithUnit(elementValue) ? `${value2} ${unit2}` : elementValue,
       selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
     };
   };