@oliasoft-open-source/react-ui-library 4.14.0-beta-1 → 4.14.1-beta-1

package/dist/index.js

@@ -11,11 +11,11 @@ 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 as useCallback$1, createElement, forwardRef, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, PureComponent, useImperativeHandle, memo, cloneElement as cloneElement$1 } from "react";
+import React__default, { useContext, isValidElement, useState, useRef, useEffect, useCallback as useCallback$1, createElement, forwardRef, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, PureComponent, useImperativeHandle, memo as memo$1, cloneElement as cloneElement$1 } 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$3, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isNil, isEqual as isEqual$4 } from "lodash";
+import ReactDOM, { createPortal, unstable_batchedUpdates, flushSync as flushSync$1, render } from "react-dom";
+import { noop as noop$3, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$3, isObject as isObject$5, isEqual as isEqual$4 } from "lodash";
 import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue as getValue$1, 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) {
@@ -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$6 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$7 = 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);
   }, [get4, set2, resetWhenReferenceChangedWhileTracking, getScrollContainers]));
   var triggerOptionParent = triggerOption == null ? void 0 : triggerOption.getParent == null ? void 0 : triggerOption.getParent();
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$7(function() {
     if (!triggerOptionParent) {
       return;
     }
@@ -2612,7 +2612,7 @@ function useTrackElements(_ref) {
       });
     });
   }, [triggerOptionParent, set2, getScrollContainers]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$7(function() {
     if (enabled) {
       if (!hasEventSubscriptions()) {
         addEventListeners();
@@ -2624,7 +2624,7 @@ function useTrackElements(_ref) {
       }
     };
   }, [enabled, hasEventSubscriptions, addEventListeners, removeAllEventSubscriptions]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$7(function() {
     if (enabled) {
       handleChange();
     }
@@ -3888,9 +3888,14 @@ const CheckBox = ({
         if (!isDisabled) {
           const target = evt.target;
           target.name = name2;
-          target.value = !checked;
           target.checked = !checked;
-          onChange(evt);
+          onChange({
+            ...evt,
+            target: {
+              ...target,
+              value: target.checked
+            }
+          });
         }
       },
       "data-testid": testId,
@@ -5301,15 +5306,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++) {
@@ -6142,7 +6147,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) {
@@ -6165,7 +6170,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() {
@@ -6338,9 +6343,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 = {};
@@ -6396,9 +6401,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) {
@@ -9924,7 +9929,7 @@ function createSubscription(store, parentSub) {
   };
   return subscription;
 }
-var useIsomorphicLayoutEffect$5 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$6 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect$1 : useEffect;
 function Provider(_ref) {
   var store = _ref.store, context2 = _ref.context, children = _ref.children;
   var contextValue = useMemo$1(function() {
@@ -9937,7 +9942,7 @@ function Provider(_ref) {
   var previousState = useMemo$1(function() {
     return store.getState();
   }, [store]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$6(function() {
     var subscription = contextValue.subscription;
     subscription.onStateChange = subscription.notifyNestedSubs;
     subscription.trySubscribe();
@@ -10657,7 +10662,7 @@ function storeStateUpdatesReducer(state, action2) {
   return [action2.payload, updateCount2 + 1];
 }
 function useIsomorphicLayoutEffectWithArgs(effectFunc, effectArgs, dependencies) {
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$6(function() {
     return effectFunc.apply(void 0, effectArgs);
   }, dependencies);
 }
@@ -15362,7 +15367,7 @@ var getStyles$1 = function(contextId) {
     userCancel: getStyles(rules2, "userCancel")
   };
 };
-var useIsomorphicLayoutEffect$4 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$5 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect$1 : useEffect;
 var getHead = function getHead2() {
   var head = document.querySelector("head");
   !head ? process.env.NODE_ENV !== "production" ? invariant$3(false, "Cannot find the head to append a style to") : invariant$3() : void 0;
@@ -15392,7 +15397,7 @@ function useStyleMarshal(contextId, nonce) {
     !el2 ? process.env.NODE_ENV !== "production" ? invariant$3(false, "Cannot set dynamic style element if it is not set") : invariant$3() : void 0;
     el2.textContent = proposed;
   }, []);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     !(!alwaysRef.current && !dynamicRef.current) ? process.env.NODE_ENV !== "production" ? invariant$3(false, "style elements already mounted") : invariant$3() : void 0;
     var always = createStyleEl(nonce);
     var dynamic = createStyleEl(nonce);
@@ -15522,7 +15527,7 @@ function useFocusMarshal(contextId) {
     }
     recordRef.current = id2;
   }, []);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     isMountedRef.current = true;
     return function clearFrameOnUnmount() {
       isMountedRef.current = false;
@@ -16139,7 +16144,7 @@ function useMouseSensor(api) {
     };
     bindCapturingEvents();
   }, [bindCapturingEvents]);
-  useIsomorphicLayoutEffect$4(function mount() {
+  useIsomorphicLayoutEffect$5(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -16270,7 +16275,7 @@ function useKeyboardSensor(api) {
     };
     unbindEventsRef.current = bindEvents(window, [startCaptureBinding], options);
   }, [startCaptureBinding]);
-  useIsomorphicLayoutEffect$4(function mount() {
+  useIsomorphicLayoutEffect$5(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -16499,7 +16504,7 @@ function useTouchSensor(api) {
     });
     bindCapturingEvents();
   }, [bindCapturingEvents, getPhase, setPhase, startDragging]);
-  useIsomorphicLayoutEffect$4(function mount() {
+  useIsomorphicLayoutEffect$5(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -16510,7 +16515,7 @@ function useTouchSensor(api) {
       }
     };
   }, [getPhase, listenForCapture, setPhase]);
-  useIsomorphicLayoutEffect$4(function webkitHack() {
+  useIsomorphicLayoutEffect$5(function webkitHack() {
     var unbind = bindEvents(window, [{
       eventName: "touchmove",
       fn: function fn() {
@@ -16857,7 +16862,7 @@ function useSensorMarshal(_ref4) {
       lockAPI.tryAbandon();
     }
   }, [lockAPI]);
-  useIsomorphicLayoutEffect$4(function listenToStore() {
+  useIsomorphicLayoutEffect$5(function listenToStore() {
     var previous = store.getState();
     var unsubscribe = store.subscribe(function() {
       var current = store.getState();
@@ -16866,7 +16871,7 @@ function useSensorMarshal(_ref4) {
     });
     return unsubscribe;
   }, [lockAPI, store, tryAbandonLock]);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     return lockAPI.tryAbandon;
   }, [lockAPI.tryAbandon]);
   var canGetLock = useCallback(function(draggableId) {
@@ -17407,7 +17412,7 @@ function useDroppablePublisher(args) {
       callbacks: callbacks2
     };
   }, [callbacks2, descriptor, uniqueId3]);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     publishedDescriptorRef.current = entry.descriptor;
     registry.droppable.register(entry);
     return function() {
@@ -17418,13 +17423,13 @@ function useDroppablePublisher(args) {
       registry.droppable.unregister(entry);
     };
   }, [callbacks2, descriptor, dragStopped, entry, marshal, registry.droppable]);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (!whileDraggingRef.current) {
       return;
     }
     marshal.updateDroppableIsEnabled(publishedDescriptorRef.current.id, !args.isDropDisabled);
   }, [args.isDropDisabled, marshal]);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (!whileDraggingRef.current) {
       return;
     }
@@ -17752,13 +17757,13 @@ function useDraggablePublisher(args) {
   }, [descriptor, getDimension2, options, uniqueId3]);
   var publishedRef = useRef(entry);
   var isFirstPublishRef = useRef(true);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     registry.draggable.register(publishedRef.current);
     return function() {
       return registry.draggable.unregister(publishedRef.current);
     };
   }, [registry.draggable]);
-  useIsomorphicLayoutEffect$4(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (isFirstPublishRef.current) {
       isFirstPublishRef.current = false;
       return;
@@ -18335,343 +18340,755 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
   areStatePropsEqual: isStrictEqual
 })(Droppable);
 ConnectedDroppable.defaultProps = defaultProps;
-/*! *****************************************************************************
-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 start3 = Math.max(range2.startIndex - range2.overscan, 0);
+  const end2 = Math.min(range2.endIndex + range2.overscan, range2.count - 1);
+  const arr = [];
+  for (let i = start3; i <= end2; 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 offset3 = 0;
+  const fallback = supportsScrollend ? () => void 0 : debounce$2(
+    targetWindow,
+    () => {
+      cb2(offset3, false);
+    },
+    instance.options.isScrollingResetDelay
+  );
+  const createHandler = (isScrolling) => () => {
+    const { horizontal: horizontal2, isRtl } = instance.options;
+    offset3 = horizontal2 ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+    fallback();
+    cb2(offset3, 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 = {
-  unit: ThresholdUnits.Percent,
-  value: 0.8
+const elementScroll = (offset3, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a2, _b;
+  const toOffset = offset3 + 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 get4 = () => {
+        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;
-  }
-  console.warn("scrollThreshold should be string or number");
-  return defaultThreshold;
-}
-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;
+          return (_a2 = get4()) == null ? void 0 : _a2.disconnect();
+        },
+        observe: (target) => {
+          var _a2;
+          return (_a2 = get4()) == null ? void 0 : _a2.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a2;
+          return (_a2 = get4()) == 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,
+        ...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.scrollElement = null;
+      this.targetWindow = null;
+      this.observer.disconnect();
+      this.elementsCache.clear();
+    };
+    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._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, (offset3, isScrolling) => {
+            this.scrollAdjustments = 0;
+            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset3 ? "forward" : "backward" : null;
+            this.scrollOffset = offset3;
+            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;
+        }
+        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
+      ],
+      (count2, paddingStart, scrollMargin, getItemKey, enabled) => {
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count: count2,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getMeasurements = memo(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count: count2, 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);
           });
         }
-        requestAnimationFrame(function() {
-          if (_this._infScroll) {
-            _this._infScroll.style.overflow = "auto";
-            _this._infScroll.style.transform = "none";
-            _this._infScroll.style.willChange = "unset";
-          }
+        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 < count2; i++) {
+          const key2 = getItemKey(i);
+          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+          const start3 = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+          const measuredSize = itemSizeCache.get(key2);
+          const size2 = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end2 = start3 + size2;
+          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+          measurements[i] = {
+            index: i,
+            start: start3,
+            size: size2,
+            end: end2,
+            key: key2,
+            lane
+          };
+        }
+        this.measurementsCache = measurements;
+        return measurements;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
+      (measurements, outerSize, scrollOffset) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset
+        }) : null;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    );
+    this.getIndexes = memo(
+      () => [
+        this.options.rangeExtractor,
+        this.calculateRange(),
+        this.options.overscan,
+        this.options.count
+      ],
+      (rangeExtractor, range2, overscan, count2) => {
+        return range2 === null ? [] : rangeExtractor({
+          startIndex: range2.startIndex,
+          endIndex: range2.endIndex,
+          overscan,
+          count: count2
         });
-      };
-      _this.onScrollListener = function(event) {
-        if (typeof _this.props.onScroll === "function") {
-          setTimeout(function() {
-            return _this.props.onScroll && _this.props.onScroll(event);
-          }, 0);
+      },
+      {
+        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);
         }
-        var target = _this.props.height || _this._scrollableNode ? event.target : document.documentElement.scrollTop ? document.documentElement : document.body;
-        if (_this.actionTriggered)
-          return;
-        var atBottom = _this.props.inverse ? _this.isElementAtTop(target, _this.props.scrollThreshold) : _this.isElementAtBottom(target, _this.props.scrollThreshold);
-        if (atBottom && _this.props.hasMore) {
-          _this.actionTriggered = true;
-          _this.setState({ showLoader: true });
-          _this.props.next && _this.props.next();
+        this.observer.observe(node2);
+        this.elementsCache.set(key2, node2);
+      }
+      if (node2.isConnected) {
+        this.resizeItem(index2, this.options.measureElement(node2, entry, this));
+      }
+    };
+    this.resizeItem = (index2, size2) => {
+      const item2 = this.measurementsCache[index2];
+      if (!item2) {
+        return;
+      }
+      const itemSize = this.itemSizeCache.get(item2.key) ?? item2.size;
+      const delta = size2 - itemSize;
+      if (delta !== 0) {
+        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item2, delta, this) : item2.start < this.getScrollOffset() + this.scrollAdjustments) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("correction", delta);
+          }
+          this._scrollToOffset(this.getScrollOffset(), {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: void 0
+          });
         }
-        _this.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.pendingMeasuredCacheIndexes.push(item2.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item2.key, size2));
+        this.notify(false);
+      }
+    };
+    this.measureElement = (node2) => {
+      if (!node2) {
+        this.elementsCache.forEach((cached, key2) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key2);
+          }
+        });
+        return;
+      }
+      this._measureElement(node2, void 0);
+    };
+    this.getVirtualItems = memo(
+      () => [this.getIndexes(), this.getMeasurements()],
+      (indexes, measurements) => {
+        const virtualItems = [];
+        for (let k2 = 0, len = indexes.length; k2 < len; k2++) {
+          const i = indexes[k2];
+          const measurement = measurements[i];
+          virtualItems.push(measurement);
+        }
+        return virtualItems;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualItemForOffset = (offset3) => {
+      const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return void 0;
+      }
+      return notUndefined(
+        measurements[findNearestBinarySearch(
+          0,
+          measurements.length - 1,
+          (index2) => notUndefined(measurements[index2]).start,
+          offset3
+        )]
+      );
+    };
+    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";
         }
       }
+      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.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.getOffsetForIndex = (index2, align = "auto") => {
+      index2 = Math.max(0, Math.min(index2, this.options.count - 1));
+      const item2 = this.measurementsCache[index2];
+      if (!item2) {
+        return void 0;
+      }
+      const size2 = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        if (item2.end >= scrollOffset + size2 - this.options.scrollPaddingEnd) {
+          align = "end";
+        } else if (item2.start <= scrollOffset + this.options.scrollPaddingStart) {
+          align = "start";
+        } else {
+          return [scrollOffset, align];
         }
       }
+      const toOffset = align === "end" ? item2.end + this.options.scrollPaddingEnd : item2.start - this.options.scrollPaddingStart;
+      return [this.getOffsetForAlignment(toOffset, align), align];
     };
-    InfiniteScroll2.prototype.componentDidUpdate = function(prevProps) {
-      if (this.props.dataLength === prevProps.dataLength)
-        return;
-      this.actionTriggered = false;
-      this.setState({
-        showLoader: false
-      });
+    this.isDynamicMode = () => this.elementsCache.size > 0;
+    this.cancelScrollToIndex = () => {
+      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
+        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
+        this.scrollToIndexTimeoutId = null;
+      }
     };
-    InfiniteScroll2.getDerivedStateFromProps = function(nextProps, prevState) {
-      var dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
-      if (dataLengthChanged) {
-        return __assign$1(__assign$1({}, prevState), { prevDataLength: nextProps.dataLength });
+    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 null;
+      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
+        adjustments: void 0,
+        behavior
+      });
     };
-    InfiniteScroll2.prototype.isElementAtTop = function(target, scrollThreshold) {
-      if (scrollThreshold === void 0) {
-        scrollThreshold = 0.8;
+    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."
+        );
       }
-      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 offsetAndAlign = this.getOffsetForIndex(index2, initialAlign);
+      if (!offsetAndAlign) return;
+      const [offset3, align] = offsetAndAlign;
+      this._scrollToOffset(offset3, { 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 });
+          }
+        });
       }
-      return target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1;
     };
-    InfiniteScroll2.prototype.isElementAtBottom = function(target, scrollThreshold) {
-      if (scrollThreshold === void 0) {
-        scrollThreshold = 0.8;
+    this.scrollBy = (delta, { behavior } = {}) => {
+      this.cancelScrollToIndex();
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
       }
-      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(this.getScrollOffset() + delta, {
+        adjustments: void 0,
+        behavior
+      });
+    };
+    this.getTotalSize = () => {
+      var _a2;
+      const measurements = this.getMeasurements();
+      let end2;
+      if (measurements.length === 0) {
+        end2 = this.options.paddingStart;
+      } else {
+        end2 = 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 target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight;
+      return end2 - this.options.scrollMargin + this.options.paddingEnd;
     };
-    InfiniteScroll2.prototype.render = function() {
-      var _this = this;
-      var style2 = __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: style2 },
-          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._scrollToOffset = (offset3, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset3, { behavior, adjustments }, this);
     };
-    return InfiniteScroll2;
-  }(Component$1)
-);
+    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 count2 = measurements.length - 1;
+  const getOffset2 = (index2) => measurements[index2].start;
+  const startIndex = findNearestBinarySearch(0, count2, getOffset2, scrollOffset);
+  let endIndex = startIndex;
+  while (endIndex < count2 && measurements[endIndex].end < scrollOffset + outerSize) {
+    endIndex++;
+  }
+  return { startIndex, endIndex };
+}
+const useIsomorphicLayoutEffect$4 = 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$4(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
+}
 const inputInTable$8 = "_inputInTable_1llou_1";
 const inputHover$8 = "_inputHover_1llou_13";
 const inputFocus$8 = "_inputFocus_1llou_18";
@@ -18876,95 +19293,264 @@ const getItemStyle = (draggableProps, item2) => {
   };
 };
 const ListRow = forwardRef(
-  ({ items, expanding, invokeEditOnRowClick, provided, draggable: draggable2 }, listRowRefs) => {
+  ({ item: item2, index: index2, expanding, invokeEditOnRowClick, provided, draggable: draggable2 }, listRowRefs) => {
     const disabledContext = useContext(DisabledContext);
-    const listElement = (index2, provided2, item2, indent, hasOnClick, edit2) => {
-      const Component2 = item2.component || "a";
-      return /* @__PURE__ */ createElement(
+    const listElement = (index22, provided2, item22, indent2, hasOnClick2, edit22) => {
+      const Component2 = item22.component || "a";
+      return /* @__PURE__ */ jsx(
         Component2,
         {
-          href: item2.url,
-          to: item2.url,
-          ref: provided2 == null ? void 0 : provided2.innerRef,
-          ...provided2.draggableProps,
-          style: getItemStyle(provided2.draggableProps, item2),
+          href: item22.url,
+          to: item22.url,
+          style: getItemStyle(provided2 == null ? void 0 : provided2.draggableProps, item22),
           className: cx$2(
             listStyles.item,
-            item2.active ? listStyles.active : "",
-            item2.disabled || disabledContext ? listStyles.disabled : "",
-            hasOnClick ? listStyles.action : ""
+            item22.active ? listStyles.active : "",
+            item22.disabled || disabledContext ? listStyles.disabled : "",
+            hasOnClick2 ? listStyles.action : ""
           ),
           onClick: (evt) => {
-            if (invokeEditOnRowClick && edit2) {
-              if (edit2.onClick) edit2.onClick(evt, item2.id);
+            if (invokeEditOnRowClick && edit22) {
+              if (edit22.onClick) edit22.onClick(evt, item22.id);
             }
-            if (item2.onClick) {
-              return item2.onClick(evt);
+            if (item22.onClick) {
+              return item22.onClick(evt);
             }
           },
-          key: index2,
-          "data-id": index2,
-          title: item2.title,
-          "data-testid": item2.testId
+          "data-id": index22,
+          title: item22.title,
+          "data-testid": item22.testId,
+          children: /* @__PURE__ */ jsxs("div", { style: { paddingLeft: indent2 }, children: [
+            /* @__PURE__ */ jsxs("div", { className: listStyles.itemHeader, children: [
+              draggable2 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: listStyles.drag,
+                  ...provided2.dragHandleProps,
+                  children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
+                }
+              ),
+              item22.level && item22.level > 0 ? /* @__PURE__ */ jsx("div", { className: listStyles.indentIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.INDENT }) }) : null,
+              /* @__PURE__ */ jsx(Label$1, { label: item22.label }),
+              /* @__PURE__ */ jsx(MetaContent, { item: item22 }),
+              /* @__PURE__ */ jsxs("div", { className: listStyles.right, children: [
+                /* @__PURE__ */ jsx(MetaCount, { item: item22 }),
+                !(item22.disabled || disabledContext) && item22.actions && /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: item22.actions }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ItemContent, { item: item22, expanding })
+          ] })
         },
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: (el2) => {
-              if (listRowRefs && "current" in listRowRefs && Array.isArray(listRowRefs.current) && index2 !== void 0) {
-                listRowRefs.current[index2] = el2;
-              }
-            },
-            style: { paddingLeft: indent },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: listStyles.itemHeader, children: [
-                draggable2 && /* @__PURE__ */ jsx(
-                  "div",
+        index22
+      );
+    };
+    const isSubheading = item2.type === "Heading";
+    const edit2 = item2.actions && item2.actions.find(
+      (a2) => {
+        var _a2;
+        return a2.label && ((_a2 = String(a2.label)) == null ? void 0 : _a2.toLowerCase()) === "edit";
+      }
+    );
+    const hasOnClick = !!(edit2 || item2.url || item2.onClick);
+    const indent = item2.level && item2.level > 1 ? (item2.level - 1) * 20 : 0;
+    return isSubheading ? /* @__PURE__ */ jsx(ListSubheading, { item: item2, index: index2 }) : listElement(index2, provided, item2, indent, hasOnClick, edit2);
+  }
+);
+const ListDroppableWrapper = ({
+  onListReorder,
+  children,
+  list: list2,
+  draggable: draggable2,
+  expanding
+}) => {
+  if (!draggable2) {
+    return children();
+  }
+  return /* @__PURE__ */ jsx(
+    DragDropContext,
+    {
+      onDragEnd: (result) => {
+        var _a2, _b;
+        const from3 = (_a2 = result == null ? void 0 : result.source) == null ? void 0 : _a2.index;
+        const to2 = (_b = result == null ? void 0 : result.destination) == null ? void 0 : _b.index;
+        onListReorder({ from: from3, to: to2 });
+      },
+      children: /* @__PURE__ */ jsx(
+        ConnectedDroppable,
+        {
+          droppableId: "droppable",
+          mode: "virtual",
+          renderClone: (provided, snapshot, rubric) => {
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...provided.draggableProps,
+                ref: provided.innerRef,
+                style: {
+                  height: 36,
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsx(
+                  ListRow,
                   {
-                    className: listStyles.drag,
-                    ...provided2.dragHandleProps,
-                    children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
+                    draggable: draggable2,
+                    item: list2.items[rubric.source.index],
+                    expanding,
+                    onListReorder,
+                    index: rubric.source.index,
+                    provided
                   }
-                ),
-                item2.level && item2.level > 0 ? /* @__PURE__ */ jsx("div", { className: listStyles.indentIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.INDENT }) }) : null,
-                /* @__PURE__ */ jsx(Label$1, { label: item2.label }),
-                /* @__PURE__ */ jsx(MetaContent, { item: item2 }),
-                /* @__PURE__ */ jsxs("div", { className: listStyles.right, children: [
-                  /* @__PURE__ */ jsx(MetaCount, { item: item2 }),
-                  !(item2.disabled || disabledContext) && item2.actions && /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: item2.actions }) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(ItemContent, { item: item2, expanding })
-            ]
-          }
-        )
+                )
+              }
+            );
+          },
+          children: (provided) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            children(provided),
+            provided.placeholder
+          ] })
+        }
+      )
+    }
+  );
+};
+const List = ({
+  list: list2,
+  bordered: bordered2 = false,
+  expanding = false,
+  narrow: narrow2 = false,
+  toggleNarrow: toggleNarrow2 = false,
+  onToggleNarrow = () => {
+  },
+  invokeEditOnRowClick = true,
+  noHeader = false,
+  stickyHeader: stickyHeader2,
+  draggable: draggable2 = false,
+  onListReorder = () => {
+  },
+  marginBottom = 0,
+  height: height2,
+  testId,
+  scrollDetails = {
+    scrollable: false,
+    hideScrollbar: false,
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false,
+    limit: 10,
+    infiniteScrollTarget: void 0
+  }
+}) => {
+  const { scrollable, hideScrollbar: hideScrollbar2, triggerScrollToActiveItem } = scrollDetails;
+  const listContainerRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: list2.items.length,
+    getScrollElement: () => listContainerRef.current,
+    estimateSize: () => 36,
+    overscan: 5
+  });
+  useEffect(() => {
+    if (triggerScrollToActiveItem) {
+      const activeItemIndex = list2.items.findIndex(
+        (item2) => item2.active === true
       );
-    };
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      items.map((item2, index2) => {
-        const isSubheading = item2.type === "Heading";
-        const edit2 = item2.actions && item2.actions.find(
-          (a2) => {
-            var _a2;
-            return a2.label && ((_a2 = String(a2.label)) == null ? void 0 : _a2.toLowerCase()) === "edit";
+      if (activeItemIndex !== -1) {
+        virtualizer.scrollToIndex(activeItemIndex, { align: "center" });
+      }
+    }
+  }, [list2.items, triggerScrollToActiveItem]);
+  const renderItem = (virtualRow, dragProvided) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dragProvided == null ? void 0 : dragProvided.innerRef,
+        ...dragProvided == null ? void 0 : dragProvided.draggableProps,
+        "data-index": virtualRow.index,
+        style: {
+          ...dragProvided == null ? void 0 : dragProvided.draggableProps.style,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: `${virtualRow.size}px`,
+          transform: `translateY(${virtualRow.start}px)`
+        },
+        children: /* @__PURE__ */ jsx("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, children: /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            index: virtualRow.index,
+            draggable: draggable2,
+            item: list2.items[virtualRow.index],
+            expanding,
+            invokeEditOnRowClick,
+            onListReorder,
+            provided: dragProvided
           }
-        );
-        const hasOnClick = !!(edit2 || item2.url || item2.onClick);
-        const indent = item2.level && item2.level > 1 ? (item2.level - 1) * 20 : 0;
-        return isSubheading ? /* @__PURE__ */ jsx(
-          ListSubheading,
+        ) })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(Card, { bordered: bordered2, padding: false, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx$2(
+        listStyles.scrollableList,
+        narrow2 ? listStyles.narrow : "",
+        hideScrollbar2 ? listStyles.hideScrollbar : ""
+      ),
+      "data-testid": testId,
+      style: { height: height2, marginBottom },
+      ref: listContainerRef,
+      children: [
+        !noHeader && /* @__PURE__ */ jsx(
+          ListHeading,
           {
-            ref: listRowRefs,
-            item: item2,
-            index: index2
-          },
-          index2
-        ) : draggable2 ? /* @__PURE__ */ jsx(PublicDraggable, { draggableId: item2.id + "", index: index2, children: (provided2) => listElement(index2, provided2, item2, indent, hasOnClick, edit2) }, item2.id) : listElement(index2, provided, item2, indent, hasOnClick, edit2);
-      }),
-      provided.placeholder
-    ] });
-  }
-);
+            name: list2.name,
+            actions: list2.actions,
+            toggleNarrow: toggleNarrow2,
+            onToggleNarrow,
+            stickyHeader: stickyHeader2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListDroppableWrapper,
+          {
+            onListReorder,
+            list: list2,
+            draggable: draggable2,
+            expanding,
+            children: (provided, snapshot) => {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""),
+                  style: {
+                    height: `${virtualizer.getTotalSize()}px`,
+                    width: "100%",
+                    position: "relative"
+                  },
+                  ref: provided == null ? void 0 : provided.innerRef,
+                  ...provided == null ? void 0 : provided.droppableProps,
+                  children: virtualizer.getVirtualItems().map(
+                    (virtualRow) => draggable2 ? /* @__PURE__ */ jsx(
+                      PublicDraggable,
+                      {
+                        draggableId: virtualRow.index.toString(),
+                        index: virtualRow.index,
+                        children: (dragProvided, dragSnapshot) => renderItem(virtualRow, dragProvided)
+                      },
+                      virtualRow.index
+                    ) : /* @__PURE__ */ jsx(Fragment$2, { children: renderItem(virtualRow) }, virtualRow.index)
+                  )
+                }
+              );
+            }
+          }
+        )
+      ]
+    }
+  ) });
+};
 const loader = "_loader_477i5_1";
 const fullViewPortSize = "_fullViewPortSize_477i5_7";
 const cover = "_cover_477i5_14";
@@ -19031,178 +19617,6 @@ const Loader = ({
     }
   );
 };
-const List = ({
-  list: list2,
-  bordered: bordered2 = false,
-  expanding = false,
-  narrow: narrow2 = false,
-  toggleNarrow: toggleNarrow2 = false,
-  onToggleNarrow = () => {
-  },
-  invokeEditOnRowClick = true,
-  noHeader = false,
-  stickyHeader: stickyHeader2,
-  draggable: draggable2 = false,
-  onListReorder = () => {
-  },
-  marginBottom = 0,
-  height: height2,
-  testId,
-  scrollDetails = {
-    scrollable: false,
-    hideScrollbar: false,
-    triggerScrollToActiveItem: false,
-    infiniteScroll: false,
-    limit: 10,
-    infiniteScrollTarget: void 0
-  }
-}) => {
-  const {
-    scrollable,
-    hideScrollbar: hideScrollbar2,
-    triggerScrollToActiveItem,
-    infiniteScroll,
-    infiniteScrollTarget
-  } = scrollDetails;
-  const listHeadingRef = useRef(null);
-  const listRowRefs = useRef([]);
-  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 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;
-    }
-  };
-  useEffect(() => {
-    if (triggerScrollToActiveItem) {
-      const activeItemIndex = findFirstActiveItemIndex(list2 == null ? void 0 : list2.items);
-      setScrollToActiveItem(activeItemIndex);
-    }
-  }, [
-    listContainerRef.current,
-    listHeadingRef.current,
-    triggerScrollToActiveItem
-  ]);
-  return /* @__PURE__ */ jsx(
-    DragDropContext,
-    {
-      onDragEnd: (result) => {
-        var _a2, _b;
-        const from3 = (_a2 = result == null ? void 0 : result.source) == null ? void 0 : _a2.index;
-        const to2 = (_b = result == null ? void 0 : result.destination) == null ? void 0 : _b.index;
-        onListReorder({ from: from3, to: to2 });
-      },
-      children: /* @__PURE__ */ jsx(ConnectedDroppable, { droppableId: "droppable", children: (provided, snapshot) => {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cx$2(
-              narrow2 ? listStyles.narrow : "",
-              scrollable ? listStyles.scrollableList : "",
-              hideScrollbar2 ? listStyles.hideScrollbar : ""
-            ),
-            "data-testid": testId,
-            id: "scrollableDiv",
-            style: { height: height2, marginBottom },
-            ref: listContainerRef,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: provided.innerRef,
-                ...provided.droppableProps,
-                children: /* @__PURE__ */ jsxs(Card, { bordered: bordered2, padding: false, children: [
-                  !noHeader && /* @__PURE__ */ jsx(
-                    ListHeading,
-                    {
-                      name: list2.name,
-                      actions: list2.actions,
-                      toggleNarrow: toggleNarrow2,
-                      onToggleNarrow,
-                      stickyHeader: stickyHeader2,
-                      ref: listHeadingRef
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""),
-                      children: infiniteScroll ? /* @__PURE__ */ jsx(
-                        InfiniteScroll,
-                        {
-                          dataLength: numVisibleRows,
-                          next: loadMoreItems,
-                          hasMore,
-                          scrollableTarget: infiniteScrollTarget || "scrollableDiv",
-                          loader: /* @__PURE__ */ jsx(Loader, {}),
-                          className: listStyles.infiniteScrollContainer,
-                          children: /* @__PURE__ */ jsx(
-                            ListRow,
-                            {
-                              draggable: draggable2,
-                              items: list2.items.slice(0, numVisibleRows),
-                              expanding,
-                              invokeEditOnRowClick,
-                              onListReorder,
-                              provided,
-                              snapshot,
-                              ref: listRowRefs
-                            }
-                          )
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        ListRow,
-                        {
-                          draggable: draggable2,
-                          items: list2.items,
-                          expanding,
-                          invokeEditOnRowClick,
-                          onListReorder,
-                          provided,
-                          snapshot,
-                          ref: listRowRefs
-                        }
-                      )
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        );
-      } })
-    }
-  );
-};
 const inputInTable$7 = "_inputInTable_1okhq_1";
 const inputHover$7 = "_inputHover_1okhq_13";
 const inputFocus$7 = "_inputFocus_1okhq_18";
@@ -19962,7 +20376,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 () => {
@@ -52650,7 +53064,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(
@@ -52725,7 +53139,7 @@ const Sections = ({
     )
   ] }, i)) });
 };
-const SideBar = memo(
+const SideBar = memo$1(
   ({
     options,
     startOpen = false,
@@ -55322,18 +55736,18 @@ const Spacer = ({
     }
   }
 );
-const inputInTable$2 = "_inputInTable_1dg3w_1";
-const inputHover$2 = "_inputHover_1dg3w_13";
-const inputFocus$2 = "_inputFocus_1dg3w_18";
-const inputError$2 = "_inputError_1dg3w_25";
-const inputWarning$2 = "_inputWarning_1dg3w_26";
-const inputDisabled$2 = "_inputDisabled_1dg3w_61";
-const hideScrollbars$2 = "_hideScrollbars_1dg3w_67";
-const wrapper = "_wrapper_1dg3w_85";
-const bordered = "_bordered_1dg3w_93";
-const scroll2 = "_scroll_1dg3w_98";
-const table = "_table_1dg3w_108";
-const striped = "_striped_1dg3w_188";
+const inputInTable$2 = "_inputInTable_sqhcz_1";
+const inputHover$2 = "_inputHover_sqhcz_13";
+const inputFocus$2 = "_inputFocus_sqhcz_18";
+const inputError$2 = "_inputError_sqhcz_25";
+const inputWarning$2 = "_inputWarning_sqhcz_26";
+const inputDisabled$2 = "_inputDisabled_sqhcz_61";
+const hideScrollbars$2 = "_hideScrollbars_sqhcz_67";
+const wrapper = "_wrapper_sqhcz_85";
+const bordered = "_bordered_sqhcz_93";
+const scroll2 = "_scroll_sqhcz_98";
+const table = "_table_sqhcz_108";
+const striped = "_striped_sqhcz_186";
 const styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
@@ -55432,33 +55846,24 @@ const hasRowActions = (rows, headers) => {
 };
 const TableScrollWrapper = ({
   table: table2,
-  children
+  children,
+  headerRef
 }) => {
+  var _a2;
   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 scrollRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 31,
+    overscan: 10
+  });
+  const totalHeight = virtualizer.getTotalSize() + (((_a2 = headerRef == null ? void 0 : headerRef.current) == null ? void 0 : _a2.clientHeight) || 0);
+  return /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles$b.scroll, children: /* @__PURE__ */ jsx("div", { style: { minHeight: totalHeight }, children: children({
+    virtualItems: virtualizer.getVirtualItems(),
+    isScrolling: virtualizer.isScrolling,
+    scrollOffset: virtualizer.scrollOffset
+  }) }) });
 };
 const clickableRow = "_clickableRow_m64j5_1";
 const hoverableRow = "_hoverableRow_m64j5_4";
@@ -56169,9 +56574,11 @@ const Row = ({
   provided = null,
   width: width2,
   columnWidths,
+  style: style2,
   testId
   //TODO: add testId
 }) => {
+  var _a2;
   const targetRef = useRef(null);
   const columnHeaderAlignment = getHeaderAlignment(
     columnHeaderAlignments,
@@ -56215,7 +56622,8 @@ const Row = ({
     },
     columnCount
   );
-  const getItemStyle2 = (isDragging, draggableStyle) => {
+  const getDraggingStyle2 = (isDragging, draggableStyle) => {
+    if (!snapshot || !provided) return null;
     return {
       minWidth: isDragging && `${width2}px`,
       width: isDragging && "100%",
@@ -56231,7 +56639,7 @@ const Row = ({
     if (row2.noDrag) {
       return /* @__PURE__ */ jsx("td", { "aria-labelledby": "unique-label-id" });
     }
-    return /* @__PURE__ */ jsx("td", { className: styles$8.dragIconCell, children: /* @__PURE__ */ jsx("div", { ...provided.dragHandleProps, className: styles$8.dragIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
+    return /* @__PURE__ */ jsx("td", { className: styles$8.dragIconCell, children: /* @__PURE__ */ jsx("div", { ...provided == null ? void 0 : provided.dragHandleProps, className: styles$8.dragIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
   };
   return isHeader ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
@@ -56283,7 +56691,13 @@ const Row = ({
         "data-warning": warning2 || null,
         ref: (provided == null ? void 0 : provided.innerRef) || null,
         ...(provided == null ? void 0 : provided.draggableProps) || null,
-        style: snapshot && provided ? getItemStyle2(snapshot.isDragging, provided.draggableProps.style) : null,
+        style: {
+          ...style2,
+          ...getDraggingStyle2(
+            snapshot == null ? void 0 : snapshot.isDragging,
+            (_a2 = provided == null ? void 0 : provided.draggableProps) == null ? void 0 : _a2.style
+          )
+        },
         children: [
           draggableTable ? getDragItem() : null,
           cells,
@@ -56325,16 +56739,8 @@ const Table = (props) => {
     maxHeight,
     fixedWidth: width2
   } = propTable;
-  const targetRef = useRef(null);
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-  useEffect(() => {
-    if (targetRef.current) {
-      setDimensions({
-        width: targetRef.current.offsetWidth,
-        height: targetRef.current.offsetHeight
-      });
-    }
-  }, []);
+  useRef(null);
+  const headerRef = useRef(null);
   const headers = get$2(props, "table.headers", []);
   const columnCount = getColumnCount(propRows, headers);
   const rowActions = hasRowActions(propRows, headers);
@@ -56385,7 +56791,7 @@ const Table = (props) => {
     // Collapse width if width = auto
     display: width2 === "auto" ? "inline-flex" : "flex"
   };
-  return draggable2 ? /* @__PURE__ */ jsxs("div", { ref: targetRef, className: wrapperClass, style: wrapperStyles, children: [
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [
     /* @__PURE__ */ jsx(
       Title$1,
       {
@@ -56406,40 +56812,96 @@ const Table = (props) => {
             onListReorder({ from: from3, to: to2 });
           }
         },
-        children: /* @__PURE__ */ jsx(ConnectedDroppable, { droppableId: "droppable", children: (provided) => {
-          return /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsxs(
-            "table",
-            {
-              className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
-              "data-testid": testId,
-              ref: provided.innerRef,
-              children: [
-                /* @__PURE__ */ jsx("thead", { children: headers.map((row2, rowIndex) => {
-                  return /* @__PURE__ */ jsx(
-                    Row,
-                    {
-                      rowIndex,
-                      isHeader: true,
-                      row: row2,
-                      columnCount,
-                      columnWidths,
-                      colSpan,
-                      hasRowActions: rowActions,
-                      columnAlignment,
-                      columnHeaderAlignments,
-                      draggableTable: draggable2
-                    },
-                    `0_${rowIndex}`
-                  );
-                }) }),
-                /* @__PURE__ */ jsxs("tbody", { children: [
-                  rows.slice(0, visibleRows).map((row2, rowIndex) => /* @__PURE__ */ jsx(
-                    PublicDraggable,
-                    {
-                      draggableId: rowIndex + "",
-                      index: rowIndex,
-                      isDragDisabled: row2.noDrag,
-                      children: (provided2, snapshot) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
+          ConnectedDroppable,
+          {
+            droppableId: "droppable",
+            mode: "virtual",
+            renderClone: (provided, snapshot, rubric) => {
+              return /* @__PURE__ */ jsx(
+                Row,
+                {
+                  rowIndex: rubric.source.index,
+                  row: rows[rubric.source.index],
+                  columnCount,
+                  columnWidths,
+                  colSpan,
+                  hasRowActions: rowActions,
+                  columnAlignment,
+                  columnHeaderAlignments,
+                  draggableTable: draggable2,
+                  ...provided.draggableProps
+                }
+              );
+            },
+            children: (provided) => {
+              return /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, headerRef, children: ({ virtualItems, isScrolling, scrollOffset }) => /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
+                  "data-testid": testId,
+                  ref: provided.innerRef,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "thead",
+                      {
+                        ref: headerRef,
+                        style: {
+                          position: "relative",
+                          transition: "transform 0.2s",
+                          transform: !isScrolling ? `translateY(${scrollOffset}px)` : "translateY(0px)"
+                        },
+                        children: headers.map((row2, rowIndex) => {
+                          return /* @__PURE__ */ jsx(
+                            Row,
+                            {
+                              rowIndex,
+                              isHeader: true,
+                              row: row2,
+                              columnCount,
+                              columnWidths,
+                              colSpan,
+                              hasRowActions: rowActions,
+                              columnAlignment,
+                              columnHeaderAlignments,
+                              draggableTable: draggable2
+                            },
+                            `0_${rowIndex}`
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("tbody", { children: virtualItems.map((virtualRow, rowIndex) => {
+                      const row2 = rows[virtualRow.index];
+                      return draggable2 ? /* @__PURE__ */ jsx(
+                        PublicDraggable,
+                        {
+                          draggableId: rowIndex + "",
+                          index: rowIndex,
+                          isDragDisabled: row2.noDrag,
+                          children: (provided2, snapshot) => /* @__PURE__ */ jsx(
+                            Row,
+                            {
+                              rowIndex,
+                              row: row2,
+                              columnCount,
+                              columnWidths,
+                              colSpan,
+                              hasRowActions: rowActions,
+                              columnAlignment,
+                              style: {
+                                height: `${virtualRow.size}px`,
+                                transform: `translateY(${virtualRow.start - rowIndex * virtualRow.size}px)`
+                              },
+                              provided: provided2,
+                              snapshot,
+                              draggableTable: draggable2
+                            },
+                            `1_${rowIndex}`
+                          )
+                        },
+                        `index_${rowIndex}`
+                      ) : /* @__PURE__ */ jsx(
                         Row,
                         {
                           rowIndex,
@@ -56449,81 +56911,22 @@ const Table = (props) => {
                           colSpan,
                           hasRowActions: rowActions,
                           columnAlignment,
-                          provided: provided2,
-                          snapshot,
-                          draggableTable: draggable2,
-                          width: dimensions.width
+                          style: {
+                            height: `${virtualRow.size}px`,
+                            transform: `translateY(${virtualRow.start - rowIndex * virtualRow.size}px)`
+                          }
                         },
                         `1_${rowIndex}`
-                      )
-                    },
-                    `index_${rowIndex}`
-                  )),
-                  provided.placeholder
-                ] })
-              ]
+                      );
+                    }) })
+                  ]
+                }
+              ) });
             }
-          ) });
-        } })
+          }
+        )
       }
     ),
-    footer2 && /* @__PURE__ */ jsx(
-      Footer,
-      {
-        pagination: footer2.pagination,
-        actions: footer2.actions,
-        content: footer2.content
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [
-    /* @__PURE__ */ jsx(
-      Title$1,
-      {
-        actions: actions2,
-        actionsRight,
-        name: name2,
-        testId: testId && `${testId}-title`
-      }
-    ),
-    /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsxs(
-      "table",
-      {
-        className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
-        "data-testid": testId,
-        children: [
-          /* @__PURE__ */ jsx("thead", { children: headers.map((row2, rowIndex) => {
-            return /* @__PURE__ */ jsx(
-              Row,
-              {
-                rowIndex,
-                isHeader: true,
-                row: row2,
-                columnCount,
-                columnWidths,
-                colSpan,
-                hasRowActions: rowActions,
-                columnAlignment,
-                columnHeaderAlignments
-              },
-              `0_${rowIndex}`
-            );
-          }) }),
-          /* @__PURE__ */ jsx("tbody", { children: rows.slice(0, visibleRows).map((row2, rowIndex) => /* @__PURE__ */ jsx(
-            Row,
-            {
-              rowIndex,
-              row: row2,
-              columnCount,
-              columnWidths,
-              colSpan,
-              hasRowActions: rowActions,
-              columnAlignment
-            },
-            `1_${rowIndex}`
-          )) })
-        ]
-      }
-    ) }),
     footer2 && /* @__PURE__ */ jsx(
       Footer,
       {
@@ -59437,7 +59840,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"
   ]);
@@ -61798,7 +62201,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;
@@ -62039,7 +62442,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;
     }
@@ -62065,20 +62468,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 config2 = useContext(MotionConfigContext);
     var features = null;
     var context2 = useCreateMotionContext(props);
     var projectionId = config2.isStatic ? void 0 : useProjectionId();
     var visualState = useVisualState(props, config2.isStatic);
     if (!config2.isStatic && isBrowser) {
-      context2.visualElement = useVisualElement(Component2, visualState, __assign$4(__assign$4({}, config2), props), createVisualElement);
+      context2.visualElement = useVisualElement(Component2, visualState, __assign$3(__assign$3({}, config2), 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({}, config2), props) },
+      { visualElement: context2.visualElement, props: __assign$3(__assign$3({}, config2), props) },
       features,
       React$4.createElement(MotionContext.Provider, { value: context2 }, useRender(Component2, props, projectionId, useMotionRef(visualState, context2.visualElement, externalRef), visualState, config2.isStatic, context2.visualElement))
     );
@@ -62404,7 +62807,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,
@@ -62534,7 +62937,7 @@ function useInitialMotionValues(_a2, visualState, isStatic) {
     var state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
     var vars = state.vars, style2 = state.style;
-    return __assign$4(__assign$4({}, vars), style2);
+    return __assign$3(__assign$3({}, vars), style2);
   }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
@@ -62692,18 +63095,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$1(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;
 }
@@ -62716,7 +63119,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: ref2 });
+    var elementProps = __assign$3(__assign$3(__assign$3({}, filteredProps), visualProps), { ref: ref2 });
     if (projectionId) {
       elementProps["data-projection-id"] = projectionId;
     }
@@ -62893,7 +63296,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) {
@@ -63980,7 +64383,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];
 }
@@ -64198,9 +64601,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,
@@ -64242,7 +64645,7 @@ function isTransitionDefined(_a2) {
 var legacyRepeatWarning = false;
 function convertTransitionToAnimationOptions(_a2) {
   var ease2 = _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)
@@ -64289,9 +64692,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;
@@ -64317,7 +64720,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);
@@ -64570,7 +64973,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);
@@ -64688,9 +65091,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);
@@ -64723,7 +65126,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);
     }));
   });
@@ -64767,7 +65170,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;
   };
@@ -64797,7 +65200,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
@@ -64815,7 +65218,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);
@@ -64847,7 +65250,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;
@@ -64856,7 +65259,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));
       }
@@ -64864,7 +65267,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) {
@@ -64972,7 +65375,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);
@@ -65006,7 +65409,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));
@@ -65527,7 +65930,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);
@@ -65638,7 +66041,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;
   }()
@@ -65795,7 +66198,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)
@@ -65829,7 +66232,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
@@ -66194,7 +66597,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();
@@ -66349,8 +66752,8 @@ var checkAndConvertChangedValueTypes = function(visualElement2, target, origin2,
   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;
@@ -66503,7 +66906,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) {
@@ -66515,7 +66918,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;
@@ -66593,7 +66996,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;
     }
@@ -66612,7 +67015,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();
         } }));
       }
@@ -66677,10 +67080,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",
@@ -67103,7 +67506,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;
@@ -67357,7 +67760,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;
@@ -67475,7 +67878,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;
@@ -67518,7 +67921,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);
@@ -67886,7 +68289,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, config2) {
   return createDomMotionConfig(Component2, config2, featureBundle, createDomVisualElement, HTMLProjectionNode);
 });
@@ -70244,7 +70647,6 @@ const safeConvertValue = ({
 }) => {
   const rawValue = getValue$1(value);
   const isInvalidInput = isWrongValue(rawValue);
-  const availableUnits = ALT_UNITS[unitkey];
   if (isValueWithUnknownUnit(value)) {
     return { value: rawValue };
   }
@@ -70254,9 +70656,6 @@ const safeConvertValue = ({
   if (!isValueWithUnit(value)) {
     return { value };
   }
-  if (!(availableUnits == null ? void 0 : availableUnits.includes(getUnit(value)))) {
-    return { value: rawValue };
-  }
   return convertUnit({
     value,
     unitkey,
@@ -70291,144 +70690,6 @@ const initializeContext = (context2) => {
     UnitContext = context2;
   }
 };
-const extractValue = (value) => {
-  if (isNil(value)) return value;
-  return isValueWithUnit(value) ? getValue$1(value) : value;
-};
-const PredefinedOptionsMenu = ({
-  predefinedOptions,
-  displayLayer,
-  unitkey: rootUnitKey,
-  unitTemplate,
-  onPredefinedOptionSelect,
-  disabled: disabled2,
-  initialPredefinedOption,
-  predefinedOptionLinked,
-  predefinedOptionsMenuState,
-  setPredefinedOptionsMenuState,
-  testId
-}) => {
-  const extractedValue = extractValue(displayLayer == null ? void 0 : displayLayer.value);
-  const [foundPredefinedMenuOption, setFoundPredefinedMenuOption] = useState(void 0);
-  const convertPredefinedOptions = ({
-    value,
-    unit: optionUnitKey
-  }) => {
-    if (!value || !rootUnitKey) return value;
-    if (!isValueWithUnit(value)) return value;
-    const selectedUnitKey = optionUnitKey || rootUnitKey;
-    const preferredOptionUnit = getPreferredUnit(selectedUnitKey, unitTemplate);
-    const { value: resultValue } = safeConvertValue({
-      value,
-      toUnit: preferredOptionUnit,
-      unitkey: selectedUnitKey,
-      defaultFromUnit: "",
-      doNotConvertValue: false
-    });
-    return withUnit(resultValue, preferredOptionUnit);
-  };
-  const createPredefinedOption = (el2) => {
-    const convertedValue = convertPredefinedOptions(el2);
-    const [inputValue = "", unit2 = ""] = split$1(convertedValue);
-    return {
-      type: MenuType.OPTION,
-      inline: true,
-      onClick: () => {
-        const validation = validateNumber(inputValue);
-        const optionState = {
-          predefinedSelected: true,
-          predefinedOption: el2
-        };
-        if (validation.valid && !disabled2) {
-          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-          onPredefinedOptionSelect(convertedValue, optionState);
-          setFoundPredefinedMenuOption(el2);
-        }
-      },
-      label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx(Text, { children: el2.label }),
-        /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
-      ] }),
-      description: `${inputValue} ${unit2}`,
-      selected: isEqual$4(foundPredefinedMenuOption, el2) && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
-    };
-  };
-  const initialPredefinedOptionObject = useMemo$1(() => {
-    return predefinedOptions.find(
-      (option2) => [option2.value, option2.label, option2.valueKey].includes(
-        initialPredefinedOption
-      )
-    );
-  }, [initialPredefinedOption, predefinedOptionLinked]);
-  useEffect(() => {
-    if (initialPredefinedOptionObject) {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-      setFoundPredefinedMenuOption(initialPredefinedOptionObject);
-      if (predefinedOptionLinked) {
-        onPredefinedOptionSelect(initialPredefinedOptionObject.value, {
-          predefinedSelected: true,
-          predefinedOption: initialPredefinedOptionObject
-        });
-      }
-    }
-  }, [
-    initialPredefinedOptionObject == null ? void 0 : initialPredefinedOptionObject.value,
-    initialPredefinedOptionObject == null ? void 0 : initialPredefinedOptionObject.label
-  ]);
-  useEffect(() => {
-    const foundOption = predefinedOptionLinked && predefinedOptions.find((option2) => {
-      const convertedValue = convertPredefinedOptions(option2);
-      return convertedValue === withUnit(displayLayer == null ? void 0 : displayLayer.value, (displayLayer == null ? void 0 : displayLayer.unit) ?? "");
-    });
-    if (foundOption || initialPredefinedOptionObject) {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-      setFoundPredefinedMenuOption(
-        foundOption || initialPredefinedOptionObject
-      );
-    } else {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
-      setFoundPredefinedMenuOption(void 0);
-    }
-  }, [extractedValue, predefinedOptionLinked]);
-  const sectionsPredefinedMenu = [
-    {
-      type: MenuType.OPTION,
-      inline: true,
-      onClick: () => {
-        if (!disabled2) {
-          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
-        }
-      },
-      label: "Custom",
-      selected: predefinedOptionsMenuState === PredefinedOptionsMenuState.CUSTOM
-    },
-    ...predefinedOptions.map(createPredefinedOption)
-  ];
-  return /* @__PURE__ */ jsx(
-    Menu,
-    {
-      testId: testId && `${testId}-predefined-menu`,
-      maxHeight: 380,
-      groupOrder: "first",
-      disabled: disabled2,
-      menu: {
-        colored: true,
-        trigger: "Component",
-        component: /* @__PURE__ */ jsx(
-          Button$1,
-          {
-            groupOrder: "first",
-            active: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED,
-            icon: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? "link" : "unlink"
-          }
-        ),
-        small: true,
-        sections: sectionsPredefinedMenu
-      },
-      tooltip: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : ""
-    }
-  );
-};
 const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
 const inputWrapper = "_inputWrapper_ye9w9_4";
 const styles = {
@@ -70453,14 +70714,17 @@ const UnitInput = ({
   onFocus = noop$3,
   onSwitchUnit = noop$3,
   unitTemplate,
+  doNotConvertValue = false,
   testId,
   warning: warning2 = null,
   predefinedOptions,
-  initialPredefinedOption = "",
-  predefinedOptionLinked = true,
+  initialPredefinedOption = false,
+  shouldLinkAutomaticly = true,
+  selectedPredefinedOptionKey,
   validationCallback = () => ({ name: "", error: null }),
   disabledValidation = false,
   allowEmpty = false,
+  autoValue,
   convertBackToStorageUnit = false,
   enableCosmeticRounding = true,
   enableDisplayRounding = false,
@@ -70468,11 +70732,11 @@ const UnitInput = ({
 }) => {
   const context2 = useUnitContext();
   const runAfterUpdate = useRunAfterUpdate();
-  const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(PredefinedOptionsMenuState.CUSTOM);
   if (typeof value === "number") {
     value = `${value}`;
   }
   const [propValue = "", propUnit = ""] = value !== void 0 ? split$1(value) : [];
+  const propAutoUnit = autoValue ? getUnit(autoValue) : "";
   const preferredUnit = useMemo$1(
     () => getPreferredUnit(unitkey, unitTemplate || (context2 == null ? void 0 : context2.unitTemplate)),
     [unitkey, unitTemplate, context2 == null ? void 0 : context2.unitTemplate]
@@ -70485,15 +70749,39 @@ const UnitInput = ({
     toUnit: initDisplayUnit,
     unitkey,
     defaultFromUnit: propUnit,
-    doNotConvertValue: noConversion
+    doNotConvertValue
   });
-  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
+  const { value: convertedAutoValue } = safeConvertValue({
+    value: autoValue,
+    toUnit: initDisplayUnit,
+    unitkey,
+    defaultFromUnit: propAutoUnit,
+    doNotConvertValue
+  });
+  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : convertedAutoValue !== "" ? { value: convertedAutoValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
   const [displayLayer, setDisplayLayer] = useState(initDisplayLayer);
   const derivedAllowEmpty = allowEmpty || (displayLayer == null ? void 0 : displayLayer.value) === void 0;
-  const disableInternalErrorValidationMessages = !!disabledValidation || disabled2;
+  const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(
+    initialPredefinedOption ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM
+  );
+  const isAutoValue = propValue === "" && autoValue;
+  const disableInternalErrorValidationMessages = !!(disabledValidation || autoValue || disabled2);
+  const foundPredefinedMenuOption = predefinedOptions && predefinedOptions.find((el2) => {
+    if (!(el2 == null ? void 0 : el2.value)) return;
+    if (selectedPredefinedOptionKey) {
+      return selectedPredefinedOptionKey === el2.valueKey;
+    }
+    const predefinedMenuItemUnit = isValueWithUnit(el2.value) ? getUnit(el2.value) : "";
+    const { value: resultValue = value } = convertUnit({
+      value: String(value),
+      unitkey,
+      toUnit: predefinedMenuItemUnit
+    });
+    return withUnit(resultValue, predefinedMenuItemUnit) === el2.value;
+  });
   const getAlternativeUnits = () => {
-    const valueToList = value ?? "";
-    const initToUnit = displayLayer == null ? void 0 : displayLayer.unit;
+    const valueToList = isAutoValue ? autoValue : value ?? "";
+    const initToUnit = displayLayer.unit;
     const shouldConvert = checkConversion({
       value: valueToList,
       unitkey,
@@ -70551,7 +70839,7 @@ const UnitInput = ({
           toUnit: initDisplayUnit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue: noConversion
+          doNotConvertValue
         });
         newValue = resultValue;
         newUnit = initDisplayUnit;
@@ -70561,29 +70849,96 @@ const UnitInput = ({
           toUnit: displayLayer.unit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue: noConversion
+          doNotConvertValue
         });
         newValue = resultValue;
         newUnit = displayLayer.unit;
       }
-      if (newValue !== void 0 && !initialPredefinedOption) {
+      if (newValue !== void 0) {
         setDisplayLayer({ value: newValue, unit: newUnit });
       }
+      if (predefinedOptions) {
+        if (foundPredefinedMenuOption && shouldLinkAutomaticly) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+        } else {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
+        }
+      }
     }
-  }, [initDisplayUnit, value, error2]);
+  }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
   const alternativeUnits = getAlternativeUnits();
   const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
   const noConvert = noConversion || !alternativeUnits || alternativeUnits && alternativeUnits.length === 1;
   const stringName = getStringName(name2);
+  let sectionsPredefinedMenu;
+  const createPredefinedOption = (el2) => {
+    const elementValue = (el2 == null ? void 0 : el2.value) ? el2.value : "";
+    const [value2 = "", unit2 = ""] = isValueWithUnit(elementValue) ? split$1(elementValue) : [elementValue];
+    return {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        const validation = validateNumber(value2);
+        if (validation.valid && !disabled2) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+          onChange({
+            target: {
+              value: elementValue,
+              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || "",
+              predefinedSelected: true,
+              predefinedOption: el2
+            }
+          });
+        }
+      },
+      label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Text, { children: el2.label }),
+        /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
+      ] }),
+      description: isValueWithUnit(elementValue) ? `${value2} ${unit2}` : elementValue,
+      selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
+    };
+  };
+  sectionsPredefinedMenu = [
+    {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        if (predefinedOptionsMenuState !== PredefinedOptionsMenuState.CUSTOM && !disabled2) {
+          onChange({
+            target: {
+              value: withUnit(displayLayer.value, displayLayer.unit),
+              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || ""
+            }
+          });
+        }
+      },
+      label: "Custom",
+      selected: predefinedOptionsMenuState === PredefinedOptionsMenuState.CUSTOM
+    }
+  ];
+  if (predefinedOptions == null ? void 0 : predefinedOptions.length) {
+    const dynamicOptions = predefinedOptions.map(createPredefinedOption);
+    sectionsPredefinedMenu = [...sectionsPredefinedMenu, ...dynamicOptions];
+  }
   const getPlaceholder = (placeholder22) => {
-    if (isValueWithUnit(placeholder22)) {
+    if (isAutoValue) {
+      const { value: resultValue } = safeConvertValue({
+        value: autoValue,
+        toUnit: displayLayer.unit,
+        unitkey,
+        defaultFromUnit: propAutoUnit,
+        doNotConvertValue
+      });
+      return resultValue;
+    } else if (isValueWithUnit(placeholder22)) {
       const placeholderUnit = getUnit(placeholder22);
       const { value: resultValue } = safeConvertValue({
         value: placeholder22,
         toUnit: displayLayer.unit,
         unitkey,
         defaultFromUnit: placeholderUnit,
-        doNotConvertValue: noConversion
+        doNotConvertValue
       });
       return resultValue;
     }
@@ -70595,44 +70950,32 @@ const UnitInput = ({
       className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles.predefinedMenuActive) : "",
       children: /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: width2, children: [
         predefinedOptions && /* @__PURE__ */ jsx(
-          PredefinedOptionsMenu,
+          Tooltip,
           {
-            testId,
-            unitTemplate: unitTemplate || (context2 == null ? void 0 : context2.unitTemplate),
-            unitkey,
-            predefinedOptions,
-            displayLayer,
-            onPredefinedOptionSelect: (newValue, optionState) => {
-              var _a2;
-              if (predefinedOptionLinked && ((_a2 = optionState == null ? void 0 : optionState.predefinedOption) == null ? void 0 : _a2.unit)) {
-                onChange({
-                  target: {
-                    value: withUnit(displayLayer == null ? void 0 : displayLayer.value, displayLayer == null ? void 0 : displayLayer.unit),
-                    name: stringName,
-                    predefinedSelected: optionState == null ? void 0 : optionState.predefinedSelected,
-                    predefinedOption: optionState == null ? void 0 : optionState.predefinedOption
-                  }
-                });
-              } else {
-                onChange({
-                  target: {
-                    value: newValue,
-                    name: stringName,
-                    predefinedSelected: optionState == null ? void 0 : optionState.predefinedSelected,
-                    predefinedOption: optionState == null ? void 0 : optionState.predefinedOption
-                  }
-                });
-                setDisplayLayer({
-                  value: newValue,
-                  unit: getUnit(newValue) || displayLayer.unit
-                });
+            text: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : "",
+            children: /* @__PURE__ */ jsx(
+              Menu,
+              {
+                maxHeight: 380,
+                groupOrder: "first",
+                testId: testId && `${testId}-predefined-menu`,
+                disabled: disabled2,
+                menu: {
+                  colored: true,
+                  trigger: "Component",
+                  component: /* @__PURE__ */ jsx(
+                    Button$1,
+                    {
+                      groupOrder: "first",
+                      active: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED,
+                      icon: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? "link" : "unlink"
+                    }
+                  ),
+                  small: small2,
+                  sections: sectionsPredefinedMenu
+                }
               }
-            },
-            disabled: disabled2,
-            initialPredefinedOption,
-            predefinedOptionLinked,
-            predefinedOptionsMenuState,
-            setPredefinedOptionsMenuState
+            )
           }
         ),
         /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
@@ -70680,7 +71023,7 @@ const UnitInput = ({
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
-                    onClickUnit(value2, altUnit);
+                    onClickUnit(isAutoValue ? "" : value2, altUnit);
                   },
                   description: displayUnit,
                   selected: displayUnit === displayUnitLabel,