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

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, PureComponent, useImperativeHandle, memo as memo$1, 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, Component as Component$1, PureComponent, useImperativeHandle, memo, cloneElement as cloneElement$1 } from "react";
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
-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 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, 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 = function(d2, b2) {
-  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+var extendStatics$1 = function(d2, b2) {
+  extendStatics$1 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
     d3.__proto__ = b3;
   } || function(d3, b3) {
     for (var p in b3) if (Object.prototype.hasOwnProperty.call(b3, p)) d3[p] = b3[p];
   };
-  return extendStatics(d2, b2);
+  return extendStatics$1(d2, b2);
 };
-function __extends(d2, b2) {
+function __extends$1(d2, b2) {
   if (typeof b2 !== "function" && b2 !== null)
     throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-  extendStatics(d2, b2);
+  extendStatics$1(d2, b2);
   function __() {
     this.constructor = d2;
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-var __assign$3 = function() {
-  __assign$3 = Object.assign || function __assign2(t) {
+var __assign$4 = function() {
+  __assign$4 = Object.assign || function __assign2(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$3.apply(this, arguments);
+  return __assign$4.apply(this, arguments);
 };
 function __rest$1(s, e2) {
   var t = {};
@@ -883,15 +883,15 @@ var DefaultContext = {
   attr: void 0
 };
 var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-var __assign$2 = function() {
-  __assign$2 = Object.assign || function(t) {
+var __assign$3 = function() {
+  __assign$3 = Object.assign || function(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$2.apply(this, arguments);
+  return __assign$3.apply(this, arguments);
 };
 var __rest = function(s, e2) {
   var t = {};
@@ -903,15 +903,15 @@ var __rest = function(s, e2) {
 };
 function Tree2Element(tree2) {
   return tree2 && tree2.map(function(node2, i) {
-    return React__default.createElement(node2.tag, __assign$2({
+    return React__default.createElement(node2.tag, __assign$3({
       key: i
     }, node2.attr), Tree2Element(node2.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React__default.createElement(IconBase, __assign$2({
-      attr: __assign$2({}, data.attr)
+    return React__default.createElement(IconBase, __assign$3({
+      attr: __assign$3({}, data.attr)
     }, props), Tree2Element(data.child));
   };
 }
@@ -922,13 +922,13 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default.createElement("svg", __assign$2({
+    return React__default.createElement("svg", __assign$3({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className,
-      style: __assign$2(__assign$2({
+      style: __assign$3(__assign$3({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -1808,7 +1808,7 @@ var requestAnimationFrame$1 = function() {
   };
 }();
 var trailingTimeout = 2;
-function throttle$1(callback, delay) {
+function throttle$2(callback, delay) {
   var leadingCall = false, trailingCall = false, lastCallTime = 0;
   function resolvePending() {
     if (leadingCall) {
@@ -1850,7 +1850,7 @@ var ResizeObserverController$1 = (
       this.mutationsObserver_ = null;
       this.observers_ = [];
       this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
-      this.refresh = throttle$1(this.refresh.bind(this), REFRESH_DELAY);
+      this.refresh = throttle$2(this.refresh.bind(this), REFRESH_DELAY);
     }
     ResizeObserverController2.prototype.addObserver = function(observer) {
       if (!~this.observers_.indexOf(observer)) {
@@ -2354,7 +2354,7 @@ function useEventSubscriptions() {
     };
   }, []);
 }
-var useIsomorphicLayoutEffect$7 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$6 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
 function useLastState(currentState, enabled) {
   var lastState = useRef(currentState);
   if (!enabled) {
@@ -2602,7 +2602,7 @@ function useTrackElements(_ref) {
     resetWhenReferenceChangedWhileTracking(previousTrigger, trigger2);
   }, [get4, set2, resetWhenReferenceChangedWhileTracking, getScrollContainers]));
   var triggerOptionParent = triggerOption == null ? void 0 : triggerOption.getParent == null ? void 0 : triggerOption.getParent();
-  useIsomorphicLayoutEffect$7(function() {
+  useIsomorphicLayoutEffect$6(function() {
     if (!triggerOptionParent) {
       return;
     }
@@ -2612,7 +2612,7 @@ function useTrackElements(_ref) {
       });
     });
   }, [triggerOptionParent, set2, getScrollContainers]);
-  useIsomorphicLayoutEffect$7(function() {
+  useIsomorphicLayoutEffect$6(function() {
     if (enabled) {
       if (!hasEventSubscriptions()) {
         addEventListeners();
@@ -2624,7 +2624,7 @@ function useTrackElements(_ref) {
       }
     };
   }, [enabled, hasEventSubscriptions, addEventListeners, removeAllEventSubscriptions]);
-  useIsomorphicLayoutEffect$7(function() {
+  useIsomorphicLayoutEffect$6(function() {
     if (enabled) {
       handleChange();
     }
@@ -5306,15 +5306,15 @@ const Card = ({
     }
   );
 };
-var __assign$1 = function() {
-  __assign$1 = Object.assign || function __assign2(t) {
+var __assign$2 = function() {
+  __assign$2 = Object.assign || function __assign2(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign$2.apply(this, arguments);
 };
 function __spreadArray$1(to2, from3, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from3.length, ar2; i < l; i++) {
@@ -6147,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$1(__assign$1({}, Te), e3), this.gs = n2, this.names = new Map(o), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
+    this.options = __assign$2(__assign$2({}, Te), e3), this.gs = n2, this.names = new Map(o), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
       return function(e4) {
         for (var t = e4.getTag(), n3 = t.length, o2 = "", r3 = function(n4) {
           var r4 = function(e5) {
@@ -6170,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$1(__assign$1({}, this.options), n2), this.gs, o && this.names || void 0);
+    return void 0 === o && (o = true), new e2(__assign$2(__assign$2({}, this.options), n2), this.gs, o && this.names || void 0);
   }, e2.prototype.allocateGSInstance = function(e3) {
     return this.gs[e3] = (this.gs[e3] || 0) + 1;
   }, e2.prototype.getTag = function() {
@@ -6343,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$1(__assign$1({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
+        for (var r5, s3 = __assign$2(__assign$2({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
           var a4 = re(r5 = e5[i3]) ? r5(s3) : r5;
-          for (var c4 in a4) s3[c4] = "className" === c4 ? ie$2(s3[c4], a4[c4]) : "style" === c4 ? __assign$1(__assign$1({}, s3[c4]), a4[c4]) : a4[c4];
+          for (var c4 in a4) s3[c4] = "className" === c4 ? ie$2(s3[c4], a4[c4]) : "style" === c4 ? __assign$2(__assign$2({}, s3[c4]), a4[c4]) : a4[c4];
         }
         return n2.className && (s3.className = ie$2(s3.className, n2.className)), s3;
       }(i2, r4, v2), S3 = g3.as || h2, w3 = {};
@@ -6401,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$1(__assign$1({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
+    return ut(n2, o, __assign$2(__assign$2({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
   }, s.withConfig = function(e2) {
-    return ut(n2, o, __assign$1(__assign$1({}, r2), e2));
+    return ut(n2, o, __assign$2(__assign$2({}, r2), e2));
   }, s;
 }
 var pt$1 = function(e2) {
@@ -9929,7 +9929,7 @@ function createSubscription(store, parentSub) {
   };
   return subscription;
 }
-var useIsomorphicLayoutEffect$6 = 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;
 function Provider(_ref) {
   var store = _ref.store, context2 = _ref.context, children = _ref.children;
   var contextValue = useMemo$1(function() {
@@ -9942,7 +9942,7 @@ function Provider(_ref) {
   var previousState = useMemo$1(function() {
     return store.getState();
   }, [store]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     var subscription = contextValue.subscription;
     subscription.onStateChange = subscription.notifyNestedSubs;
     subscription.trySubscribe();
@@ -10662,7 +10662,7 @@ function storeStateUpdatesReducer(state, action2) {
   return [action2.payload, updateCount2 + 1];
 }
 function useIsomorphicLayoutEffectWithArgs(effectFunc, effectArgs, dependencies) {
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     return effectFunc.apply(void 0, effectArgs);
   }, dependencies);
 }
@@ -15367,7 +15367,7 @@ var getStyles$1 = function(contextId) {
     userCancel: getStyles(rules2, "userCancel")
   };
 };
-var useIsomorphicLayoutEffect$5 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$4 = 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;
@@ -15397,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$5(function() {
+  useIsomorphicLayoutEffect$4(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);
@@ -15527,7 +15527,7 @@ function useFocusMarshal(contextId) {
     }
     recordRef.current = id2;
   }, []);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     isMountedRef.current = true;
     return function clearFrameOnUnmount() {
       isMountedRef.current = false;
@@ -16144,7 +16144,7 @@ function useMouseSensor(api) {
     };
     bindCapturingEvents();
   }, [bindCapturingEvents]);
-  useIsomorphicLayoutEffect$5(function mount() {
+  useIsomorphicLayoutEffect$4(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -16275,7 +16275,7 @@ function useKeyboardSensor(api) {
     };
     unbindEventsRef.current = bindEvents(window, [startCaptureBinding], options);
   }, [startCaptureBinding]);
-  useIsomorphicLayoutEffect$5(function mount() {
+  useIsomorphicLayoutEffect$4(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -16504,7 +16504,7 @@ function useTouchSensor(api) {
     });
     bindCapturingEvents();
   }, [bindCapturingEvents, getPhase, setPhase, startDragging]);
-  useIsomorphicLayoutEffect$5(function mount() {
+  useIsomorphicLayoutEffect$4(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -16515,7 +16515,7 @@ function useTouchSensor(api) {
       }
     };
   }, [getPhase, listenForCapture, setPhase]);
-  useIsomorphicLayoutEffect$5(function webkitHack() {
+  useIsomorphicLayoutEffect$4(function webkitHack() {
     var unbind = bindEvents(window, [{
       eventName: "touchmove",
       fn: function fn() {
@@ -16862,7 +16862,7 @@ function useSensorMarshal(_ref4) {
       lockAPI.tryAbandon();
     }
   }, [lockAPI]);
-  useIsomorphicLayoutEffect$5(function listenToStore() {
+  useIsomorphicLayoutEffect$4(function listenToStore() {
     var previous = store.getState();
     var unsubscribe = store.subscribe(function() {
       var current = store.getState();
@@ -16871,7 +16871,7 @@ function useSensorMarshal(_ref4) {
     });
     return unsubscribe;
   }, [lockAPI, store, tryAbandonLock]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     return lockAPI.tryAbandon;
   }, [lockAPI.tryAbandon]);
   var canGetLock = useCallback(function(draggableId) {
@@ -17412,7 +17412,7 @@ function useDroppablePublisher(args) {
       callbacks: callbacks2
     };
   }, [callbacks2, descriptor, uniqueId3]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     publishedDescriptorRef.current = entry.descriptor;
     registry.droppable.register(entry);
     return function() {
@@ -17423,13 +17423,13 @@ function useDroppablePublisher(args) {
       registry.droppable.unregister(entry);
     };
   }, [callbacks2, descriptor, dragStopped, entry, marshal, registry.droppable]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     if (!whileDraggingRef.current) {
       return;
     }
     marshal.updateDroppableIsEnabled(publishedDescriptorRef.current.id, !args.isDropDisabled);
   }, [args.isDropDisabled, marshal]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     if (!whileDraggingRef.current) {
       return;
     }
@@ -17757,13 +17757,13 @@ function useDraggablePublisher(args) {
   }, [descriptor, getDimension2, options, uniqueId3]);
   var publishedRef = useRef(entry);
   var isFirstPublishRef = useRef(true);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     registry.draggable.register(publishedRef.current);
     return function() {
       return registry.draggable.unregister(publishedRef.current);
     };
   }, [registry.draggable]);
-  useIsomorphicLayoutEffect$5(function() {
+  useIsomorphicLayoutEffect$4(function() {
     if (isFirstPublishRef.current) {
       isFirstPublishRef.current = false;
       return;
@@ -18340,755 +18340,343 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
   areStatePropsEqual: isStrictEqual
 })(Droppable);
 ConnectedDroppable.defaultProps = defaultProps;
-function memo(getDeps, fn, opts) {
-  let deps = opts.initialDeps ?? [];
-  let result;
-  return () => {
-    var _a2, _b, _c, _d;
-    let depTime;
-    if (opts.key && ((_a2 = opts.debug) == null ? void 0 : _a2.call(opts))) depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index2) => deps[index2] !== dep);
-    if (!depsChanged) {
-      return result;
-    }
-    deps = newDeps;
-    let resultTime;
-    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
-    result = fn(...newDeps);
-    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
-      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-      const resultFpsPercentage = resultEndTime / 16;
-      const pad = (str, num) => {
-        str = String(str);
-        while (str.length < num) {
-          str = " " + str;
-        }
-        return str;
-      };
-      console.info(
-        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
-        `
-            font-size: .6rem;
-            font-weight: bold;
-            color: hsl(${Math.max(
-          0,
-          Math.min(120 - 120 * resultFpsPercentage, 120)
-        )}deg 100% 31%);`,
-        opts == null ? void 0 : opts.key
-      );
-    }
-    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
-    return result;
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+var extendStatics = function(d2, b2) {
+  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+    d3.__proto__ = b3;
+  } || function(d3, b3) {
+    for (var p in b3) if (b3.hasOwnProperty(p)) d3[p] = b3[p];
   };
-}
-function notUndefined(value, msg2) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
+  return extendStatics(d2, b2);
+};
+function __extends(d2, b2) {
+  extendStatics(d2, b2);
+  function __() {
+    this.constructor = d2;
   }
+  d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-const approxEqual = (a2, b2) => Math.abs(a2 - b2) < 1;
-const debounce$2 = (targetWindow, fn, ms2) => {
-  let timeoutId;
-  return function(...args) {
-    targetWindow.clearTimeout(timeoutId);
-    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms2);
+var __assign$1 = function() {
+  __assign$1 = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
   };
+  return __assign$1.apply(this, arguments);
 };
-const defaultKeyExtractor = (index2) => index2;
-const defaultRangeExtractor = (range2) => {
-  const 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);
-  }
-  return arr;
-};
-const observeElementRect = (instance, cb2) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
+function throttle$1(delay, noTrailing, callback, debounceMode) {
+  var timeoutID;
+  var cancelled = false;
+  var lastExec = 0;
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
   }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
+  function cancel() {
+    clearExistingTimeout();
+    cancelled = true;
   }
-  const handler = (rect) => {
-    const { width: width2, height: height2 } = rect;
-    cb2({ width: Math.round(width2), height: Math.round(height2) });
-  };
-  handler(element.getBoundingClientRect());
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
+  if (typeof noTrailing !== "boolean") {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = void 0;
   }
-  const observer = new targetWindow.ResizeObserver((entries2) => {
-    const entry = entries2[0];
-    if (entry == null ? void 0 : entry.borderBoxSize) {
-      const box = entry.borderBoxSize[0];
-      if (box) {
-        handler({ width: box.inlineSize, height: box.blockSize });
-        return;
-      }
+  function wrapper2() {
+    var self2 = this;
+    var elapsed = Date.now() - lastExec;
+    var args = arguments;
+    if (cancelled) {
+      return;
     }
-    handler(element.getBoundingClientRect());
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
-};
-const addEventListenerOptions = {
-  passive: true
-};
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb2) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  let 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;
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self2, args);
+    }
+    function clear() {
+      timeoutID = void 0;
+    }
+    if (debounceMode && !timeoutID) {
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === void 0 && elapsed > delay) {
+      exec();
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === void 0 ? delay - elapsed : delay);
     }
   }
-  return Math.round(
-    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
-  );
+  wrapper2.cancel = cancel;
+  return wrapper2;
+}
+var ThresholdUnits = {
+  Pixel: "Pixel",
+  Percent: "Percent"
 };
-const elementScroll = (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
-  });
+var defaultThreshold = {
+  unit: ThresholdUnits.Percent,
+  value: 0.8
 };
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const 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);
-          });
-        });
-      };
+function parseThreshold(scrollThreshold) {
+  if (typeof scrollThreshold === "number") {
+    return {
+      unit: ThresholdUnits.Percent,
+      value: scrollThreshold * 100
+    };
+  }
+  if (typeof scrollThreshold === "string") {
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
       return {
-        disconnect: () => {
-          var _a2;
-          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);
-        }
+        unit: ThresholdUnits.Pixel,
+        value: parseFloat(scrollThreshold)
       };
-    })();
-    this.range = null;
-    this.setOptions = (opts2) => {
-      Object.entries(opts2).forEach(([key2, value]) => {
-        if (typeof value === "undefined") delete opts2[key2];
-      });
-      this.options = {
-        debug: false,
-        initialOffset: 0,
-        overscan: 1,
-        paddingStart: 0,
-        paddingEnd: 0,
-        scrollPaddingStart: 0,
-        scrollPaddingEnd: 0,
-        horizontal: false,
-        getItemKey: defaultKeyExtractor,
-        rangeExtractor: defaultRangeExtractor,
-        onChange: () => {
-        },
-        measureElement,
-        initialRect: { width: 0, height: 0 },
-        scrollMargin: 0,
-        gap: 0,
-        indexAttribute: "data-index",
-        initialMeasurementsCache: [],
-        lanes: 1,
-        isScrollingResetDelay: 150,
-        enabled: true,
-        isRtl: false,
-        ...opts2
+    }
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
+      return {
+        unit: ThresholdUnits.Percent,
+        value: parseFloat(scrollThreshold)
       };
-    };
-    this.notify = (sync2) => {
-      var _a2, _b;
-      (_b = (_a2 = this.options).onChange) == null ? void 0 : _b.call(_a2, this, sync2);
-    };
-    this.maybeNotify = memo(
-      () => {
-        this.calculateRange();
-        return [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ];
-      },
-      (isScrolling) => {
-        this.notify(isScrolling);
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "maybeNotify",
-        debug: () => this.options.debug,
-        initialDeps: [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ]
-      }
-    );
-    this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((d2) => d2());
-      this.unsubs = [];
-      this.scrollElement = null;
-      this.targetWindow = null;
-      this.observer.disconnect();
-      this.elementsCache.clear();
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
+    }
+    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      ");
+        }
+        return null;
       };
-    };
-    this._willUpdate = () => {
-      var _a2;
-      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        if (!scrollElement) {
-          this.maybeNotify();
+      _this.onStart = function(evt) {
+        if (_this.lastScrollTop)
           return;
+        _this.dragging = true;
+        if (evt instanceof MouseEvent) {
+          _this.startY = evt.pageY;
+        } else if (evt instanceof TouchEvent) {
+          _this.startY = evt.touches[0].pageY;
         }
-        this.scrollElement = scrollElement;
-        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
-          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
-        } else {
-          this.targetWindow = ((_a2 = this.scrollElement) == null ? void 0 : _a2.window) ?? null;
+        _this.currentY = _this.startY;
+        if (_this._infScroll) {
+          _this._infScroll.style.willChange = "transform";
+          _this._infScroll.style.transition = "transform 0.2s cubic-bezier(0,0,0.31,1)";
         }
-        this._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;
-        }
-        const previousFurthestMeasurement = furthestMeasurements.get(
-          measurement.lane
-        );
-        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
-          furthestMeasurements.set(measurement.lane, measurement);
-        } else if (measurement.end < previousFurthestMeasurement.end) {
-          furthestMeasurementsFound.set(measurement.lane, true);
-        }
-        if (furthestMeasurementsFound.size === this.options.lanes) {
-          break;
-        }
-      }
-      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a2, b2) => {
-        if (a2.end === b2.end) {
-          return a2.index - b2.index;
+      };
+      _this.onMove = function(evt) {
+        if (!_this.dragging)
+          return;
+        if (evt instanceof MouseEvent) {
+          _this.currentY = evt.pageY;
+        } else if (evt instanceof TouchEvent) {
+          _this.currentY = evt.touches[0].pageY;
         }
-        return a2.end - b2.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled
-      ],
-      (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);
+        if (_this.currentY < _this.startY)
+          return;
+        if (_this.currentY - _this.startY >= Number(_this.props.pullDownToRefreshThreshold)) {
+          _this.setState({
+            pullToRefreshThresholdBreached: true
           });
         }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < 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
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getIndexes",
-        debug: () => this.options.debug
-      }
-    );
-    this.indexFromElement = (node2) => {
-      const attributeName = this.options.indexAttribute;
-      const indexStr = node2.getAttribute(attributeName);
-      if (!indexStr) {
-        console.warn(
-          `Missing attribute name '${attributeName}={index}' on measured element.`
-        );
-        return -1;
-      }
-      return parseInt(indexStr, 10);
-    };
-    this._measureElement = (node2, entry) => {
-      const index2 = this.indexFromElement(node2);
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return;
-      }
-      const key2 = item2.key;
-      const prevNode = this.elementsCache.get(key2);
-      if (prevNode !== node2) {
-        if (prevNode) {
-          this.observer.unobserve(prevNode);
+        if (_this.currentY - _this.startY > _this.maxPullDownDistance * 1.5)
+          return;
+        if (_this._infScroll) {
+          _this._infScroll.style.overflow = "visible";
+          _this._infScroll.style.transform = "translate3d(0px, " + (_this.currentY - _this.startY) + "px, 0px)";
         }
-        this.observer.observe(node2);
-        this.elementsCache.set(key2, node2);
-      }
-      if (node2.isConnected) {
-        this.resizeItem(index2, this.options.measureElement(node2, entry, this));
-      }
-    };
-    this.resizeItem = (index2, size2) => {
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return;
-      }
-      const itemSize = this.itemSizeCache.get(item2.key) ?? item2.size;
-      const delta = size2 - itemSize;
-      if (delta !== 0) {
-        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item2, delta, this) : item2.start < this.getScrollOffset() + this.scrollAdjustments) {
-          if (process.env.NODE_ENV !== "production" && this.options.debug) {
-            console.info("correction", delta);
-          }
-          this._scrollToOffset(this.getScrollOffset(), {
-            adjustments: this.scrollAdjustments += delta,
-            behavior: void 0
+      };
+      _this.onEnd = function() {
+        _this.startY = 0;
+        _this.currentY = 0;
+        _this.dragging = false;
+        if (_this.state.pullToRefreshThresholdBreached) {
+          _this.props.refreshFunction && _this.props.refreshFunction();
+          _this.setState({
+            pullToRefreshThresholdBreached: false
           });
         }
-        this.pendingMeasuredCacheIndexes.push(item2.index);
-        this.itemSizeCache = new Map(this.itemSizeCache.set(item2.key, size2));
-        this.notify(false);
-      }
-    };
-    this.measureElement = (node2) => {
-      if (!node2) {
-        this.elementsCache.forEach((cached, key2) => {
-          if (!cached.isConnected) {
-            this.observer.unobserve(cached);
-            this.elementsCache.delete(key2);
+        requestAnimationFrame(function() {
+          if (_this._infScroll) {
+            _this._infScroll.style.overflow = "auto";
+            _this._infScroll.style.transform = "none";
+            _this._infScroll.style.willChange = "unset";
           }
         });
-        return;
-      }
-      this._measureElement(node2, void 0);
-    };
-    this.getVirtualItems = memo(
-      () => [this.getIndexes(), this.getMeasurements()],
-      (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k2 = 0, len = indexes.length; k2 < len; k2++) {
-          const i = indexes[k2];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
-        }
-        return virtualItems;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualItemForOffset = (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";
+      };
+      _this.onScrollListener = function(event) {
+        if (typeof _this.props.onScroll === "function") {
+          setTimeout(function() {
+            return _this.props.onScroll && _this.props.onScroll(event);
+          }, 0);
+        }
+        var target = _this.props.height || _this._scrollableNode ? event.target : document.documentElement.scrollTop ? document.documentElement : document.body;
+        if (_this.actionTriggered)
+          return;
+        var atBottom = _this.props.inverse ? _this.isElementAtTop(target, _this.props.scrollThreshold) : _this.isElementAtBottom(target, _this.props.scrollThreshold);
+        if (atBottom && _this.props.hasMore) {
+          _this.actionTriggered = true;
+          _this.setState({ showLoader: true });
+          _this.props.next && _this.props.next();
+        }
+        _this.lastScrollTop = target.scrollTop;
+      };
+      _this.state = {
+        showLoader: false,
+        pullToRefreshThresholdBreached: false,
+        prevDataLength: props.dataLength
+      };
+      _this.throttledOnScrollListener = throttle$1(150, _this.onScrollListener).bind(_this);
+      _this.onStart = _this.onStart.bind(_this);
+      _this.onMove = _this.onMove.bind(_this);
+      _this.onEnd = _this.onEnd.bind(_this);
+      return _this;
+    }
+    InfiniteScroll2.prototype.componentDidMount = function() {
+      if (typeof this.props.dataLength === "undefined") {
+        throw new Error('mandatory prop "dataLength" is missing. The prop is needed when loading more content. Check README.md for usage');
+      }
+      this._scrollableNode = this.getScrollableTarget();
+      this.el = this.props.height ? this._infScroll : this._scrollableNode || window;
+      if (this.el) {
+        this.el.addEventListener("scroll", this.throttledOnScrollListener);
+      }
+      if (typeof this.props.initialScrollY === "number" && this.el && this.el instanceof HTMLElement && this.el.scrollHeight > this.props.initialScrollY) {
+        this.el.scrollTo(0, this.props.initialScrollY);
+      }
+      if (this.props.pullDownToRefresh && this.el) {
+        this.el.addEventListener("touchstart", this.onStart);
+        this.el.addEventListener("touchmove", this.onMove);
+        this.el.addEventListener("touchend", this.onEnd);
+        this.el.addEventListener("mousedown", this.onStart);
+        this.el.addEventListener("mousemove", this.onMove);
+        this.el.addEventListener("mouseup", this.onEnd);
+        this.maxPullDownDistance = this._pullDown && this._pullDown.firstChild && this._pullDown.firstChild.getBoundingClientRect().height || 0;
+        this.forceUpdate();
+        if (typeof this.props.refreshFunction !== "function") {
+          throw new Error(`Mandatory prop "refreshFunction" missing.
+          Pull Down To Refresh functionality will not work
+          as expected. Check README.md for usage'`);
         }
       }
-      if (align === "start") {
-        toOffset = toOffset;
-      } else if (align === "end") {
-        toOffset = toOffset - size2;
-      } else if (align === "center") {
-        toOffset = toOffset - size2 / 2;
-      }
-      const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
-      const scrollSize = this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[scrollSizeProp] : this.scrollElement[scrollSizeProp] : 0;
-      const maxOffset = scrollSize - size2;
-      return Math.max(Math.min(maxOffset, toOffset), 0);
     };
-    this.getOffsetForIndex = (index2, align = "auto") => {
-      index2 = Math.max(0, Math.min(index2, this.options.count - 1));
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return void 0;
-      }
-      const size2 = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (item2.end >= scrollOffset + size2 - this.options.scrollPaddingEnd) {
-          align = "end";
-        } else if (item2.start <= scrollOffset + this.options.scrollPaddingStart) {
-          align = "start";
-        } else {
-          return [scrollOffset, align];
+    InfiniteScroll2.prototype.componentWillUnmount = function() {
+      if (this.el) {
+        this.el.removeEventListener("scroll", this.throttledOnScrollListener);
+        if (this.props.pullDownToRefresh) {
+          this.el.removeEventListener("touchstart", this.onStart);
+          this.el.removeEventListener("touchmove", this.onMove);
+          this.el.removeEventListener("touchend", this.onEnd);
+          this.el.removeEventListener("mousedown", this.onStart);
+          this.el.removeEventListener("mousemove", this.onMove);
+          this.el.removeEventListener("mouseup", this.onEnd);
         }
       }
-      const toOffset = align === "end" ? item2.end + this.options.scrollPaddingEnd : item2.start - this.options.scrollPaddingStart;
-      return [this.getOffsetForAlignment(toOffset, align), align];
     };
-    this.isDynamicMode = () => this.elementsCache.size > 0;
-    this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-        this.scrollToIndexTimeoutId = null;
-      }
+    InfiniteScroll2.prototype.componentDidUpdate = function(prevProps) {
+      if (this.props.dataLength === prevProps.dataLength)
+        return;
+      this.actionTriggered = false;
+      this.setState({
+        showLoader: false
+      });
     };
-    this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
+    InfiniteScroll2.getDerivedStateFromProps = function(nextProps, prevState) {
+      var dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
+      if (dataLengthChanged) {
+        return __assign$1(__assign$1({}, prevState), { prevDataLength: nextProps.dataLength });
       }
-      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-        adjustments: void 0,
-        behavior
-      });
+      return null;
     };
-    this.scrollToIndex = (index2, { align: initialAlign = "auto", behavior } = {}) => {
-      index2 = Math.max(0, Math.min(index2, this.options.count - 1));
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
+    InfiniteScroll2.prototype.isElementAtTop = function(target, scrollThreshold) {
+      if (scrollThreshold === void 0) {
+        scrollThreshold = 0.8;
       }
-      const offsetAndAlign = this.getOffsetForIndex(index2, initialAlign);
-      if (!offsetAndAlign) return;
-      const [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 });
-          }
-        });
+      var clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight : target.clientHeight;
+      var threshold = parseThreshold(scrollThreshold);
+      if (threshold.unit === ThresholdUnits.Pixel) {
+        return target.scrollTop <= threshold.value + clientHeight - target.scrollHeight + 1;
       }
+      return target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1;
     };
-    this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
+    InfiniteScroll2.prototype.isElementAtBottom = function(target, scrollThreshold) {
+      if (scrollThreshold === void 0) {
+        scrollThreshold = 0.8;
       }
-      this._scrollToOffset(this.getScrollOffset() + delta, {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.getTotalSize = () => {
-      var _a2;
-      const measurements = this.getMeasurements();
-      let 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)
-        );
+      var clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight : target.clientHeight;
+      var threshold = parseThreshold(scrollThreshold);
+      if (threshold.unit === ThresholdUnits.Pixel) {
+        return target.scrollTop + clientHeight >= target.scrollHeight - threshold.value;
       }
-      return end2 - this.options.scrollMargin + this.options.paddingEnd;
-    };
-    this._scrollToOffset = (offset3, {
-      adjustments,
-      behavior
-    }) => {
-      this.options.scrollToFn(offset3, { behavior, adjustments }, this);
+      return target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight;
     };
-    this.measure = () => {
-      this.itemSizeCache = /* @__PURE__ */ new Map();
-      this.notify(false);
+    InfiniteScroll2.prototype.render = function() {
+      var _this = this;
+      var 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.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
-  });
-}
+    return InfiniteScroll2;
+  }(Component$1)
+);
 const inputInTable$8 = "_inputInTable_1llou_1";
 const inputHover$8 = "_inputHover_1llou_13";
 const inputFocus$8 = "_inputFocus_1llou_18";
@@ -19293,264 +18881,95 @@ const getItemStyle = (draggableProps, item2) => {
   };
 };
 const ListRow = forwardRef(
-  ({ item: item2, index: index2, expanding, invokeEditOnRowClick, provided, draggable: draggable2 }, listRowRefs) => {
+  ({ items, expanding, invokeEditOnRowClick, provided, draggable: draggable2 }, listRowRefs) => {
     const disabledContext = useContext(DisabledContext);
-    const listElement = (index22, provided2, item22, indent2, hasOnClick2, edit22) => {
-      const Component2 = item22.component || "a";
-      return /* @__PURE__ */ jsx(
+    const listElement = (index2, provided2, item2, indent, hasOnClick, edit2) => {
+      const Component2 = item2.component || "a";
+      return /* @__PURE__ */ createElement(
         Component2,
         {
-          href: item22.url,
-          to: item22.url,
-          style: getItemStyle(provided2 == null ? void 0 : provided2.draggableProps, item22),
+          href: item2.url,
+          to: item2.url,
+          ref: provided2 == null ? void 0 : provided2.innerRef,
+          ...provided2.draggableProps,
+          style: getItemStyle(provided2.draggableProps, item2),
           className: cx$2(
             listStyles.item,
-            item22.active ? listStyles.active : "",
-            item22.disabled || disabledContext ? listStyles.disabled : "",
-            hasOnClick2 ? listStyles.action : ""
+            item2.active ? listStyles.active : "",
+            item2.disabled || disabledContext ? listStyles.disabled : "",
+            hasOnClick ? listStyles.action : ""
           ),
           onClick: (evt) => {
-            if (invokeEditOnRowClick && edit22) {
-              if (edit22.onClick) edit22.onClick(evt, item22.id);
+            if (invokeEditOnRowClick && edit2) {
+              if (edit2.onClick) edit2.onClick(evt, item2.id);
             }
-            if (item22.onClick) {
-              return item22.onClick(evt);
+            if (item2.onClick) {
+              return item2.onClick(evt);
             }
           },
-          "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 })
-          ] })
+          key: index2,
+          "data-id": index2,
+          title: item2.title,
+          "data-testid": item2.testId
         },
-        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,
+        /* @__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",
                   {
-                    draggable: draggable2,
-                    item: list2.items[rubric.source.index],
-                    expanding,
-                    onListReorder,
-                    index: rubric.source.index,
-                    provided
+                    className: listStyles.drag,
+                    ...provided2.dragHandleProps,
+                    children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
                   }
-                )
-              }
-            );
-          },
-          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
-      );
-      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
+                ),
+                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 })
+            ]
           }
-        ) })
-      }
-    );
-  };
-  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,
-          {
-            name: list2.name,
-            actions: list2.actions,
-            toggleNarrow: toggleNarrow2,
-            onToggleNarrow,
-            stickyHeader: stickyHeader2
+        )
+      );
+    };
+    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";
           }
-        ),
-        /* @__PURE__ */ jsx(
-          ListDroppableWrapper,
+        );
+        const hasOnClick = !!(edit2 || item2.url || item2.onClick);
+        const indent = item2.level && item2.level > 1 ? (item2.level - 1) * 20 : 0;
+        return isSubheading ? /* @__PURE__ */ jsx(
+          ListSubheading,
           {
-            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)
-                  )
-                }
-              );
-            }
-          }
-        )
-      ]
-    }
-  ) });
-};
+            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
+    ] });
+  }
+);
 const loader = "_loader_477i5_1";
 const fullViewPortSize = "_fullViewPortSize_477i5_7";
 const cover = "_cover_477i5_14";
@@ -19617,6 +19036,178 @@ 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";
@@ -20376,7 +19967,7 @@ const useFontsReady = () => {
 const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 const useWindowWidth = () => {
   const [width2, setWidth] = useState(getWidth());
-  const resizeListener = debounce$3(() => setWidth(getWidth()), 150);
+  const resizeListener = debounce$2(() => setWidth(getWidth()), 150);
   useEffect(() => {
     window.addEventListener("resize", resizeListener);
     return () => {
@@ -21605,43 +21196,48 @@ const useCustomSelectLogic = ({
     setTriggerFocus();
   };
   const openLayer = () => dispatch({ type: ActionTypes.OPEN_LAYER });
-  const isFirstRun = useRef(true);
-  useEffect(() => {
-    if (isFirstRun.current) {
-      isFirstRun.current = false;
-    } else {
-      dispatch({ type: ActionTypes.SET_VISIBLE_OPTIONS, options });
-    }
-  }, [options]);
   const onSelectOption = (evt, option2, close2) => {
     if (!(disabled2 || disabledContext)) {
+      console.log(1);
       if (close2) {
+        console.log(2);
         close2();
       }
       if (option2) {
+        console.log(3);
         if (option2.createAble && onCreate) {
+          console.log(4);
           onCreate(option2.value);
         } else {
+          console.log(5);
           if (!option2.disabled) {
+            console.log(6);
             if (Array.isArray(selectedOptions)) {
+              console.log(7);
               const alreadySelected = selectedOptions.some(
                 (selectedOption) => selectedOption.label === option2.label
               );
               if (!alreadySelected) {
+                console.log(8);
                 const newSelectedOptions = [...selectedOptions, option2];
                 if (onChange) {
+                  console.log(9);
                   onChange(evt, newSelectedOptions);
                 }
               } else {
+                console.log(10);
                 const newSelectedOptions = selectedOptions.filter(
                   (opt) => opt.label !== option2.label
                 );
                 if (onChange) {
+                  console.log(11);
                   onChange(evt, newSelectedOptions);
                 }
               }
             } else {
+              console.log(12);
               if (onChange) {
+                console.log(14);
                 onChange(evt, option2);
               }
             }
@@ -53064,7 +52660,7 @@ const styles$d = {
   active: active$2,
   icon: icon$1
 };
-const TooltipIcon = memo$1(
+const TooltipIcon = memo(
   ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
@@ -53139,7 +52735,7 @@ const Sections = ({
     )
   ] }, i)) });
 };
-const SideBar = memo$1(
+const SideBar = memo(
   ({
     options,
     startOpen = false,
@@ -55736,18 +55332,18 @@ const Spacer = ({
     }
   }
 );
-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 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 styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
@@ -55846,24 +55442,33 @@ const hasRowActions = (rows, headers) => {
 };
 const TableScrollWrapper = ({
   table: table2,
-  children,
-  headerRef
+  children
 }) => {
-  var _a2;
   const { rows, infiniteScroll } = table2;
-  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 pageSize = Math.ceil(window.innerHeight / 30);
+  const [visibleRows, setVisibleRows] = infiniteScroll ? useState(pageSize) : [rows.length, null];
+  const [hasMore, setHasMore] = infiniteScroll ? useState(visibleRows < rows.length) : [false, null];
+  const loadMoreItems = () => {
+    if (visibleRows >= rows.length && setHasMore) {
+      setHasMore(false);
+      return;
+    }
+    if (setVisibleRows) {
+      setVisibleRows(visibleRows + pageSize);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: infiniteScroll ? /* @__PURE__ */ jsx(
+    InfiniteScroll,
+    {
+      dataLength: Math.min(rows.length, visibleRows + pageSize),
+      next: loadMoreItems,
+      hasMore,
+      scrollableTarget: "scrollWrapper",
+      style: { overflow: "initial" },
+      loader: null,
+      children: children({ visibleRows })
+    }
+  ) : children({ visibleRows }) });
 };
 const clickableRow = "_clickableRow_m64j5_1";
 const hoverableRow = "_hoverableRow_m64j5_4";
@@ -56574,11 +56179,9 @@ const Row = ({
   provided = null,
   width: width2,
   columnWidths,
-  style: style2,
   testId
   //TODO: add testId
 }) => {
-  var _a2;
   const targetRef = useRef(null);
   const columnHeaderAlignment = getHeaderAlignment(
     columnHeaderAlignments,
@@ -56622,8 +56225,7 @@ const Row = ({
     },
     columnCount
   );
-  const getDraggingStyle2 = (isDragging, draggableStyle) => {
-    if (!snapshot || !provided) return null;
+  const getItemStyle2 = (isDragging, draggableStyle) => {
     return {
       minWidth: isDragging && `${width2}px`,
       width: isDragging && "100%",
@@ -56639,7 +56241,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 == null ? void 0 : 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.dragHandleProps, className: styles$8.dragIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
   };
   return isHeader ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
@@ -56691,13 +56293,7 @@ const Row = ({
         "data-warning": warning2 || null,
         ref: (provided == null ? void 0 : provided.innerRef) || null,
         ...(provided == null ? void 0 : provided.draggableProps) || null,
-        style: {
-          ...style2,
-          ...getDraggingStyle2(
-            snapshot == null ? void 0 : snapshot.isDragging,
-            (_a2 = provided == null ? void 0 : provided.draggableProps) == null ? void 0 : _a2.style
-          )
-        },
+        style: snapshot && provided ? getItemStyle2(snapshot.isDragging, provided.draggableProps.style) : null,
         children: [
           draggableTable ? getDragItem() : null,
           cells,
@@ -56739,8 +56335,16 @@ const Table = (props) => {
     maxHeight,
     fixedWidth: width2
   } = propTable;
-  useRef(null);
-  const headerRef = useRef(null);
+  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
+      });
+    }
+  }, []);
   const headers = get$2(props, "table.headers", []);
   const columnCount = getColumnCount(propRows, headers);
   const rowActions = hasRowActions(propRows, headers);
@@ -56791,7 +56395,7 @@ const Table = (props) => {
     // Collapse width if width = auto
     display: width2 === "auto" ? "inline-flex" : "flex"
   };
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [
+  return draggable2 ? /* @__PURE__ */ jsxs("div", { ref: targetRef, className: wrapperClass, style: wrapperStyles, children: [
     /* @__PURE__ */ jsx(
       Title$1,
       {
@@ -56812,96 +56416,40 @@ const Table = (props) => {
             onListReorder({ from: from3, to: to2 });
           }
         },
-        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(
+        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(
                         Row,
                         {
                           rowIndex,
@@ -56911,22 +56459,81 @@ const Table = (props) => {
                           colSpan,
                           hasRowActions: rowActions,
                           columnAlignment,
-                          style: {
-                            height: `${virtualRow.size}px`,
-                            transform: `translateY(${virtualRow.start - rowIndex * virtualRow.size}px)`
-                          }
+                          provided: provided2,
+                          snapshot,
+                          draggableTable: draggable2,
+                          width: dimensions.width
                         },
                         `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,
       {
@@ -59840,7 +59447,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 let refCount = 0;
 const INSTANCE_SYM = Symbol.for("__REACT_DND_CONTEXT_INSTANCE__");
-var DndProvider = /* @__PURE__ */ memo$1(function DndProvider2(_param) {
+var DndProvider = /* @__PURE__ */ memo(function DndProvider2(_param) {
   var { children } = _param, props = _objectWithoutProperties(_param, [
     "children"
   ]);
@@ -62201,7 +61808,7 @@ function useFeatures(props, visualElement2, preloadedFeatures) {
     var name_1 = featureNames[i];
     var _a2 = featureDefinitions[name_1], isEnabled = _a2.isEnabled, Component2 = _a2.Component;
     if (isEnabled(props) && Component2) {
-      features.push(React$4.createElement(Component2, __assign$3({ key: name_1 }, props, { visualElement: visualElement2 })));
+      features.push(React$4.createElement(Component2, __assign$4({ key: name_1 }, props, { visualElement: visualElement2 })));
     }
   }
   return features;
@@ -62442,7 +62049,7 @@ function useProjection(projectionId, _a2, visualElement2, ProjectionNodeConstruc
 var VisualElementHandler = (
   /** @class */
   function(_super) {
-    __extends(VisualElementHandler2, _super);
+    __extends$1(VisualElementHandler2, _super);
     function VisualElementHandler2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -62468,20 +62075,20 @@ function createMotionComponent(_a2) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props, externalRef) {
     var layoutId = useLayoutId(props);
-    props = __assign$3(__assign$3({}, props), { layoutId });
+    props = __assign$4(__assign$4({}, props), { layoutId });
     var 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$3(__assign$3({}, config2), props), createVisualElement);
+      context2.visualElement = useVisualElement(Component2, visualState, __assign$4(__assign$4({}, 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$3(__assign$3({}, config2), props) },
+      { visualElement: context2.visualElement, props: __assign$4(__assign$4({}, config2), props) },
       features,
       React$4.createElement(MotionContext.Provider, { value: context2 }, useRender(Component2, props, projectionId, useMotionRef(visualState, context2.visualElement, externalRef), visualState, config2.isStatic, context2.visualElement))
     );
@@ -62807,7 +62414,7 @@ const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v
   const functions = v2.match(functionRegex);
   return functions ? functions.map(applyDefaultFilter).join(" ") : v2;
 } });
-var int = __assign$3(__assign$3({}, number), { transform: Math.round });
+var int = __assign$4(__assign$4({}, number), { transform: Math.round });
 var numberValueTypes = {
   // Border props
   borderWidth: px,
@@ -62937,7 +62544,7 @@ function useInitialMotionValues(_a2, visualState, isStatic) {
     var state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
     var vars = state.vars, style2 = state.style;
-    return __assign$3(__assign$3({}, vars), style2);
+    return __assign$4(__assign$4({}, vars), style2);
   }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
@@ -63095,18 +62702,18 @@ function buildSVGAttrs(state, _a2, options, transformTemplate) {
   }
 }
 var createSvgRenderState = function() {
-  return __assign$3(__assign$3({}, createHtmlRenderState()), { attrs: {} });
+  return __assign$4(__assign$4({}, createHtmlRenderState()), { attrs: {} });
 };
 function useSVGProps(props, visualState) {
   var visualProps = useMemo$1(function() {
     var state = createSvgRenderState();
     buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
-    return __assign$3(__assign$3({}, state.attrs), { style: __assign$3({}, state.style) });
+    return __assign$4(__assign$4({}, state.attrs), { style: __assign$4({}, state.style) });
   }, [visualState]);
   if (props.style) {
     var rawStyles = {};
     copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = __assign$3(__assign$3({}, rawStyles), visualProps.style);
+    visualProps.style = __assign$4(__assign$4({}, rawStyles), visualProps.style);
   }
   return visualProps;
 }
@@ -63119,7 +62726,7 @@ function createUseRender(forwardMotionProps) {
     var useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
     var visualProps = useVisualProps(props, latestValues, isStatic);
     var filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
-    var elementProps = __assign$3(__assign$3(__assign$3({}, filteredProps), visualProps), { ref: ref2 });
+    var elementProps = __assign$4(__assign$4(__assign$4({}, filteredProps), visualProps), { ref: ref2 });
     if (projectionId) {
       elementProps["data-projection-id"] = projectionId;
     }
@@ -63296,7 +62903,7 @@ var htmlMotionConfig = {
 function createDomMotionConfig(Component2, _a2, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
   var _b = _a2.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;
   var baseConfig = isSVGComponent(Component2) ? svgMotionConfig : htmlMotionConfig;
-  return __assign$3(__assign$3({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
+  return __assign$4(__assign$4({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
 }
 var AnimationType;
 (function(AnimationType2) {
@@ -64383,7 +63990,7 @@ function initIntersectionObserver(_a2) {
   var rootObservers = observers.get(lookupRoot);
   var key2 = JSON.stringify(options);
   if (!rootObservers[key2]) {
-    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$3({ root: root2 }, options));
+    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$4({ root: root2 }, options));
   }
   return rootObservers[key2];
 }
@@ -64601,9 +64208,9 @@ var getDefaultTransition = function(valueKey, to2) {
   } else {
     transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
   }
-  return __assign$3({ to: to2 }, transitionFactory(to2));
+  return __assign$4({ to: to2 }, transitionFactory(to2));
 };
-var defaultValueTypes = __assign$3(__assign$3({}, numberValueTypes), {
+var defaultValueTypes = __assign$4(__assign$4({}, numberValueTypes), {
   // Color props
   color,
   backgroundColor: color,
@@ -64645,7 +64252,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$3({}, transition);
+  var options = __assign$4({}, transition);
   if (times)
     options["offset"] = times;
   if (transition.duration)
@@ -64692,9 +64299,9 @@ function getPopmotionAnimationOptions(transition, options, key2) {
   }
   hydrateKeyframes(options);
   if (!isTransitionDefined(transition)) {
-    transition = __assign$3(__assign$3({}, transition), getDefaultTransition(key2, options.to));
+    transition = __assign$4(__assign$4({}, transition), getDefaultTransition(key2, options.to));
   }
-  return __assign$3(__assign$3({}, options), convertTransitionToAnimationOptions(transition));
+  return __assign$4(__assign$4({}, options), convertTransitionToAnimationOptions(transition));
 }
 function getAnimation(key2, value, target, transition, onComplete) {
   var _a2;
@@ -64720,7 +64327,7 @@ function getAnimation(key2, value, target, transition, onComplete) {
         return value.set(v2);
       }
     };
-    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(__assign$3(__assign$3({}, options), valueTransition)) : animate$1(__assign$3(__assign$3({}, getPopmotionAnimationOptions(valueTransition, options, key2)), { onUpdate: function(v2) {
+    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(__assign$4(__assign$4({}, options), valueTransition)) : animate$1(__assign$4(__assign$4({}, getPopmotionAnimationOptions(valueTransition, options, key2)), { onUpdate: function(v2) {
       var _a3;
       options.onUpdate(v2);
       (_a3 = valueTransition.onUpdate) === null || _a3 === void 0 ? void 0 : _a3.call(valueTransition, v2);
@@ -64973,7 +64580,7 @@ function setTarget(visualElement2, definition) {
   var _a2 = resolved ? visualElement2.makeTargetAnimatable(resolved, false) : {}, _b = _a2.transitionEnd, transitionEnd = _b === void 0 ? {} : _b;
   _a2.transition;
   var target = __rest$1(_a2, ["transitionEnd", "transition"]);
-  target = __assign$3(__assign$3({}, target), transitionEnd);
+  target = __assign$4(__assign$4({}, target), transitionEnd);
   for (var key2 in target) {
     var value = resolveFinalValueInKeyframes(target[key2]);
     setMotionValue(visualElement2, key2, value);
@@ -65091,9 +64698,9 @@ function animateTarget(visualElement2, definition, _a2) {
     if (!value || valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key2)) {
       continue;
     }
-    var valueTransition = __assign$3({ delay }, transition);
+    var valueTransition = __assign$4({ delay }, transition);
     if (visualElement2.shouldReduceMotion && isTransformProp(key2)) {
-      valueTransition = __assign$3(__assign$3({}, valueTransition), { type: false, delay: 0 });
+      valueTransition = __assign$4(__assign$4({}, valueTransition), { type: false, delay: 0 });
     }
     var animation = startAnimation(key2, value, valueTarget, valueTransition);
     animations2.push(animation);
@@ -65126,7 +64733,7 @@ function animateChildren(visualElement2, variant, delayChildren, staggerChildren
     return maxStaggerDuration - i * staggerChildren;
   };
   Array.from(visualElement2.variantChildren).sort(sortByTreeOrder).forEach(function(child, i) {
-    animations2.push(animateVariant(child, variant, __assign$3(__assign$3({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
+    animations2.push(animateVariant(child, variant, __assign$4(__assign$4({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
       return child.notifyAnimationComplete(variant);
     }));
   });
@@ -65170,7 +64777,7 @@ function createAnimationState(visualElement2) {
     if (resolved) {
       resolved.transition;
       var transitionEnd = resolved.transitionEnd, target = __rest$1(resolved, ["transition", "transitionEnd"]);
-      acc = __assign$3(__assign$3(__assign$3({}, acc), target), transitionEnd);
+      acc = __assign$4(__assign$4(__assign$4({}, acc), target), transitionEnd);
     }
     return acc;
   };
@@ -65200,7 +64807,7 @@ function createAnimationState(visualElement2) {
       if (isInherited && isInitialRender && visualElement2.manuallyAnimateOnMount) {
         isInherited = false;
       }
-      typeState.protectedKeys = __assign$3({}, encounteredKeys);
+      typeState.protectedKeys = __assign$4({}, encounteredKeys);
       if (
         // If it isn't active and hasn't *just* been set as inactive
         !typeState.isActive && activeDelta === null || // If we didn't and don't have any defined prop for this animation type
@@ -65218,7 +64825,7 @@ function createAnimationState(visualElement2) {
       if (activeDelta === false)
         resolvedValues = {};
       var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
-      var allKeys = __assign$3(__assign$3({}, prevResolvedValues), resolvedValues);
+      var allKeys = __assign$4(__assign$4({}, prevResolvedValues), resolvedValues);
       var markToAnimate = function(key3) {
         shouldAnimateType = true;
         removedKeys.delete(key3);
@@ -65250,7 +64857,7 @@ function createAnimationState(visualElement2) {
       typeState.prevProp = prop;
       typeState.prevResolvedValues = resolvedValues;
       if (typeState.isActive) {
-        encounteredKeys = __assign$3(__assign$3({}, encounteredKeys), resolvedValues);
+        encounteredKeys = __assign$4(__assign$4({}, encounteredKeys), resolvedValues);
       }
       if (isInitialRender && visualElement2.blockInitialAnimation) {
         shouldAnimateType = false;
@@ -65259,7 +64866,7 @@ function createAnimationState(visualElement2) {
         animations2.push.apply(animations2, __spreadArray$2([], __read(definitionList.map(function(animation) {
           return {
             animation,
-            options: __assign$3({ type }, options)
+            options: __assign$4({ type }, options)
           };
         })), false));
       }
@@ -65267,7 +64874,7 @@ function createAnimationState(visualElement2) {
     for (var i = 0; i < numAnimationTypes; i++) {
       _loop_1(i);
     }
-    allAnimatedKeys = __assign$3({}, encounteredKeys);
+    allAnimatedKeys = __assign$4({}, encounteredKeys);
     if (removedKeys.size) {
       var fallbackAnimation_1 = {};
       removedKeys.forEach(function(key2) {
@@ -65375,7 +64982,7 @@ var PanSession = (
           return;
         var point2 = info3.point;
         var timestamp2 = getFrameData().timestamp;
-        _this.history.push(__assign$3(__assign$3({}, point2), { timestamp: timestamp2 }));
+        _this.history.push(__assign$4(__assign$4({}, point2), { timestamp: timestamp2 }));
         var _a3 = _this.handlers, onStart = _a3.onStart, onMove = _a3.onMove;
         if (!isPanStarted) {
           onStart && onStart(_this.lastMoveEvent, info3);
@@ -65409,7 +65016,7 @@ var PanSession = (
       var initialInfo = transformPoint(info2, this.transformPagePoint);
       var point = initialInfo.point;
       var timestamp = getFrameData().timestamp;
-      this.history = [__assign$3(__assign$3({}, point), { timestamp })];
+      this.history = [__assign$4(__assign$4({}, point), { timestamp })];
       var onSessionStart = handlers2.onSessionStart;
       onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
       this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
@@ -65930,7 +65537,7 @@ var VisualElementDragControls = (
           transition = { min: 0, max: 0 };
         var bounceStiffness = dragElastic ? 200 : 1e6;
         var bounceDamping = dragElastic ? 40 : 1e7;
-        var inertia2 = __assign$3(__assign$3({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+        var inertia2 = __assign$4(__assign$4({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
         return _this.startAxisValueAnimation(axis, inertia2);
       });
       return Promise.all(momentumAnimations).then(onDragTransitionEnd);
@@ -66041,7 +65648,7 @@ var VisualElementDragControls = (
     VisualElementDragControls2.prototype.getProps = function() {
       var props = this.visualElement.getProps();
       var _a2 = props.drag, drag2 = _a2 === void 0 ? false : _a2, _b = props.dragDirectionLock, dragDirectionLock = _b === void 0 ? false : _b, _c = props.dragPropagation, dragPropagation = _c === void 0 ? false : _c, _d = props.dragConstraints, dragConstraints = _d === void 0 ? false : _d, _e2 = props.dragElastic, dragElastic = _e2 === void 0 ? defaultElastic : _e2, _f = props.dragMomentum, dragMomentum = _f === void 0 ? true : _f;
-      return __assign$3(__assign$3({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
+      return __assign$4(__assign$4({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
     };
     return VisualElementDragControls2;
   }()
@@ -66198,7 +65805,7 @@ var visualElement = function(_a2) {
     var values2 = /* @__PURE__ */ new Map();
     var valueSubscriptions = /* @__PURE__ */ new Map();
     var prevMotionValues = {};
-    var baseTarget = __assign$3({}, latestValues);
+    var baseTarget = __assign$4({}, latestValues);
     var removeFromVariantTree;
     function render2() {
       if (!instance || !isMounted)
@@ -66232,7 +65839,7 @@ var visualElement = function(_a2) {
     }
     var isControllingVariants = checkIfControllingVariants(props);
     var isVariantNode = checkIfVariantNode(props);
-    var element = __assign$3(__assign$3({
+    var element = __assign$4(__assign$4({
       treeType,
       /**
        * This is a mirror of the internal instance prop, which keeps
@@ -66597,7 +66204,7 @@ function resolveCSSVariables(visualElement2, _a2, transitionEnd) {
   if (!(element instanceof Element))
     return { target, transitionEnd };
   if (transitionEnd) {
-    transitionEnd = __assign$3({}, transitionEnd);
+    transitionEnd = __assign$4({}, transitionEnd);
   }
   visualElement2.forEachValue(function(value) {
     var current2 = value.get();
@@ -66752,8 +66359,8 @@ var checkAndConvertChangedValueTypes = function(visualElement2, target, origin2,
   if (transitionEnd === void 0) {
     transitionEnd = {};
   }
-  target = __assign$3({}, target);
-  transitionEnd = __assign$3({}, transitionEnd);
+  target = __assign$4({}, target);
+  transitionEnd = __assign$4({}, transitionEnd);
   var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
   var removedTransformValues = [];
   var hasAttemptedToRemoveTransformValues = false;
@@ -66906,7 +66513,7 @@ var htmlConfig = {
       transitionEnd = parsed.transitionEnd;
       target = parsed.target;
     }
-    return __assign$3({ transition, transitionEnd }, target);
+    return __assign$4({ transition, transitionEnd }, target);
   },
   scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
   build: function(element, renderState, latestValues, options, props) {
@@ -66918,7 +66525,7 @@ var htmlConfig = {
   render: renderHTML
 };
 var htmlVisualElement = visualElement(htmlConfig);
-var svgVisualElement = visualElement(__assign$3(__assign$3({}, htmlConfig), { getBaseTarget: function(props, key2) {
+var svgVisualElement = visualElement(__assign$4(__assign$4({}, htmlConfig), { getBaseTarget: function(props, key2) {
   return props[key2];
 }, readValueFromInstance: function(domElement, key2) {
   var _a2;
@@ -66996,7 +66603,7 @@ var correctBoxShadow = {
 var MeasureLayoutWithContext = (
   /** @class */
   function(_super) {
-    __extends(MeasureLayoutWithContext2, _super);
+    __extends$1(MeasureLayoutWithContext2, _super);
     function MeasureLayoutWithContext2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -67015,7 +66622,7 @@ var MeasureLayoutWithContext = (
         projection.addEventListener("animationComplete", function() {
           _this.safeToRemove();
         });
-        projection.setOptions(__assign$3(__assign$3({}, projection.options), { onExitComplete: function() {
+        projection.setOptions(__assign$4(__assign$4({}, projection.options), { onExitComplete: function() {
           return _this.safeToRemove();
         } }));
       }
@@ -67080,10 +66687,10 @@ var MeasureLayoutWithContext = (
 function MeasureLayout(props) {
   var _a2 = __read(usePresence(), 2), isPresent = _a2[0], safeToRemove = _a2[1];
   var layoutGroup = useContext(LayoutGroupContext);
-  return React__default.createElement(MeasureLayoutWithContext, __assign$3({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
+  return React__default.createElement(MeasureLayoutWithContext, __assign$4({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
 }
 var defaultScaleCorrectors = {
-  borderRadius: __assign$3(__assign$3({}, correctBorderRadius), { applyTo: [
+  borderRadius: __assign$4(__assign$4({}, correctBorderRadius), { applyTo: [
     "borderTopLeftRadius",
     "borderTopRightRadius",
     "borderBottomLeftRadius",
@@ -67506,7 +67113,7 @@ function createProjectionNode(_a2) {
                 _this.resumingFrom.resumingFrom = void 0;
               }
               _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-              var animationOptions = __assign$3(__assign$3({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+              var animationOptions = __assign$4(__assign$4({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
               if (visualElement2.shouldReduceMotion) {
                 animationOptions.delay = 0;
                 animationOptions.type = false;
@@ -67760,7 +67367,7 @@ function createProjectionNode(_a2) {
       };
       ProjectionNode.prototype.setOptions = function(options) {
         var _a3;
-        this.options = __assign$3(__assign$3(__assign$3({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
+        this.options = __assign$4(__assign$4(__assign$4({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
       };
       ProjectionNode.prototype.clearMeasurements = function() {
         this.scroll = void 0;
@@ -67878,7 +67485,7 @@ function createProjectionNode(_a2) {
         }
         var snapshot = this.snapshot;
         var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-        var mixedValues = __assign$3({}, this.latestValues);
+        var mixedValues = __assign$4({}, this.latestValues);
         var targetDelta = createDelta();
         this.relativeTarget = this.relativeTargetOrigin = void 0;
         this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
@@ -67921,7 +67528,7 @@ function createProjectionNode(_a2) {
         }
         this.pendingAnimation = sync.update(function() {
           globalProjectionState.hasAnimatedSinceResize = true;
-          _this.currentAnimation = animate(0, animationTarget, __assign$3(__assign$3({}, options), { onUpdate: function(latest) {
+          _this.currentAnimation = animate(0, animationTarget, __assign$4(__assign$4({}, options), { onUpdate: function(latest) {
             var _a4;
             _this.mixTargetDelta(latest);
             (_a4 = options.onUpdate) === null || _a4 === void 0 ? void 0 : _a4.call(options, latest);
@@ -68289,7 +67896,7 @@ var HTMLProjectionNode = createProjectionNode({
     return Boolean(window.getComputedStyle(instance).position === "fixed");
   }
 });
-var featureBundle = __assign$3(__assign$3(__assign$3(__assign$3({}, animations), gestureAnimations), drag), layoutFeatures);
+var featureBundle = __assign$4(__assign$4(__assign$4(__assign$4({}, animations), gestureAnimations), drag), layoutFeatures);
 var motion = /* @__PURE__ */ createMotionProxy(function(Component2, config2) {
   return createDomMotionConfig(Component2, config2, featureBundle, createDomVisualElement, HTMLProjectionNode);
 });