npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.18.0-beta-13 → 4.18.0 - Mend

@oliasoft-open-source/react-ui-library 4.18.0-beta-13 → 4.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js CHANGED Viewed

@@ -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, createElement, forwardRef, useMemo, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, memo as memo$1, cloneElement as cloneElement$1, PureComponent, useImperativeHandle } from "react";
+import React__default, { useContext, isValidElement, useState, useRef, useEffect, useCallback, createElement, forwardRef, useMemo, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, memo, cloneElement as cloneElement$1, PureComponent, useImperativeHandle } from "react";
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
-import ReactDOM, { createPortal, unstable_batchedUpdates, flushSync as flushSync$1, render } from "react-dom";
-import { noop as noop$2, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$1, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$3, isObject as isObject$5, isEqual as isEqual$3 } from "lodash";
+import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
+import { noop as noop$2, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$1, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isEqual as isEqual$3 } from "lodash";
 import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue, withUnit, convertSamePrecision, convertAndGetValue, split as split$1, label as label$b, isValidNum, getAltUnitsListByQuantity, altUnitsList, withPrettyUnitLabel, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
@@ -222,32 +222,32 @@ function _setPrototypeOf$3(t, e2) {
 function _inheritsLoose$3(t, o) {
   t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf$3(t, o);
 }
-var extendStatics = function(d2, b2) {
-  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+var extendStatics$1 = function(d2, b2) {
+  extendStatics$1 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
     d3.__proto__ = b3;
   } || function(d3, b3) {
     for (var p in b3) if (Object.prototype.hasOwnProperty.call(b3, p)) d3[p] = b3[p];
   };
-  return extendStatics(d2, b2);
+  return extendStatics$1(d2, b2);
 };
-function __extends(d2, b2) {
+function __extends$1(d2, b2) {
   if (typeof b2 !== "function" && b2 !== null)
     throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-  extendStatics(d2, b2);
+  extendStatics$1(d2, b2);
   function __() {
     this.constructor = d2;
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-var __assign$3 = function() {
-  __assign$3 = Object.assign || function __assign2(t) {
+var __assign$4 = function() {
+  __assign$4 = Object.assign || function __assign2(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$3.apply(this, arguments);
+  return __assign$4.apply(this, arguments);
 };
 function __rest$1(s, e2) {
   var t = {};
@@ -883,15 +883,15 @@ var DefaultContext = {
   attr: void 0
 };
 var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-var __assign$2 = function() {
-  __assign$2 = Object.assign || function(t) {
+var __assign$3 = function() {
+  __assign$3 = Object.assign || function(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$2.apply(this, arguments);
+  return __assign$3.apply(this, arguments);
 };
 var __rest = function(s, e2) {
   var t = {};
@@ -903,15 +903,15 @@ var __rest = function(s, e2) {
 };
 function Tree2Element(tree2) {
   return tree2 && tree2.map(function(node2, i) {
-    return React__default.createElement(node2.tag, __assign$2({
+    return React__default.createElement(node2.tag, __assign$3({
       key: i
     }, node2.attr), Tree2Element(node2.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React__default.createElement(IconBase, __assign$2({
-      attr: __assign$2({}, data.attr)
+    return React__default.createElement(IconBase, __assign$3({
+      attr: __assign$3({}, data.attr)
     }, props), Tree2Element(data.child));
   };
 }
@@ -922,13 +922,13 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default.createElement("svg", __assign$2({
+    return React__default.createElement("svg", __assign$3({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className,
-      style: __assign$2(__assign$2({
+      style: __assign$3(__assign$3({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -1808,7 +1808,7 @@ var requestAnimationFrame$1 = function() {
   };
 }();
 var trailingTimeout = 2;
-function throttle$1(callback, delay) {
+function throttle$2(callback, delay) {
   var leadingCall = false, trailingCall = false, lastCallTime = 0;
   function resolvePending() {
     if (leadingCall) {
@@ -1850,7 +1850,7 @@ var ResizeObserverController$1 = (
       this.mutationsObserver_ = null;
       this.observers_ = [];
       this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
-      this.refresh = throttle$1(this.refresh.bind(this), REFRESH_DELAY);
+      this.refresh = throttle$2(this.refresh.bind(this), REFRESH_DELAY);
     }
     ResizeObserverController2.prototype.addObserver = function(observer) {
       if (!~this.observers_.indexOf(observer)) {
@@ -2354,7 +2354,7 @@ function useEventSubscriptions() {
     };
   }, []);
 }
-var useIsomorphicLayoutEffect$6 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
+var useIsomorphicLayoutEffect$5 = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
 function useLastState(currentState, enabled) {
   var lastState = useRef(currentState);
   if (!enabled) {
@@ -2602,7 +2602,7 @@ function useTrackElements(_ref) {
     resetWhenReferenceChangedWhileTracking(previousTrigger, trigger2);
   }, [get3, set2, resetWhenReferenceChangedWhileTracking, getScrollContainers]));
   var triggerOptionParent = triggerOption == null ? void 0 : triggerOption.getParent == null ? void 0 : triggerOption.getParent();
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (!triggerOptionParent) {
       return;
     }
@@ -2612,7 +2612,7 @@ function useTrackElements(_ref) {
       });
     });
   }, [triggerOptionParent, set2, getScrollContainers]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (enabled) {
       if (!hasEventSubscriptions()) {
         addEventListeners();
@@ -2624,7 +2624,7 @@ function useTrackElements(_ref) {
       }
     };
   }, [enabled, hasEventSubscriptions, addEventListeners, removeAllEventSubscriptions]);
-  useIsomorphicLayoutEffect$6(function() {
+  useIsomorphicLayoutEffect$5(function() {
     if (enabled) {
       handleChange();
     }
@@ -5308,15 +5308,15 @@ const Card = ({
     }
   );
 };
-var __assign$1 = function() {
-  __assign$1 = Object.assign || function __assign2(t) {
+var __assign$2 = function() {
+  __assign$2 = Object.assign || function __assign2(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign$2.apply(this, arguments);
 };
 function __spreadArray$1(to2, from3, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from3.length, ar2; i < l; i++) {
@@ -6149,7 +6149,7 @@ var Ie = function(e2) {
   function e2(e3, n2, o) {
     void 0 === e3 && (e3 = C), void 0 === n2 && (n2 = {});
     var r2 = this;
-    this.options = __assign$1(__assign$1({}, Te), e3), this.gs = n2, this.names = new Map(o), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
+    this.options = __assign$2(__assign$2({}, Te), e3), this.gs = n2, this.names = new Map(o), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
       return function(e4) {
         for (var t = e4.getTag(), n3 = t.length, o2 = "", r3 = function(n4) {
           var r4 = function(e5) {
@@ -6172,7 +6172,7 @@ var Ie = function(e2) {
   }, e2.prototype.rehydrate = function() {
     !this.server && S && _e(this);
   }, e2.prototype.reconstructWithOptions = function(n2, o) {
-    return void 0 === o && (o = true), new e2(__assign$1(__assign$1({}, this.options), n2), this.gs, o && this.names || void 0);
+    return void 0 === o && (o = true), new e2(__assign$2(__assign$2({}, this.options), n2), this.gs, o && this.names || void 0);
   }, e2.prototype.allocateGSInstance = function(e3) {
     return this.gs[e3] = (this.gs[e3] || 0) + 1;
   }, e2.prototype.getTag = function() {
@@ -6345,9 +6345,9 @@ function it$1(e2, r2, s) {
       var i2 = e4.attrs, a3 = e4.componentStyle, c3 = e4.defaultProps, p2 = e4.foldedComponentIds, d3 = e4.styledComponentId, h2 = e4.target, f3 = React__default.useContext(et$1), m3 = Ge(), y3 = e4.shouldForwardProp || m3.shouldForwardProp;
       "production" !== process.env.NODE_ENV && useDebugValue(d3);
       var v2 = I(r4, f3, c3) || C, g3 = function(e5, n2, o) {
-        for (var r5, s3 = __assign$1(__assign$1({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
+        for (var r5, s3 = __assign$2(__assign$2({}, n2), { className: void 0, theme: o }), i3 = 0; i3 < e5.length; i3 += 1) {
           var a4 = re(r5 = e5[i3]) ? r5(s3) : r5;
-          for (var c4 in a4) s3[c4] = "className" === c4 ? ie$2(s3[c4], a4[c4]) : "style" === c4 ? __assign$1(__assign$1({}, s3[c4]), a4[c4]) : a4[c4];
+          for (var c4 in a4) s3[c4] = "className" === c4 ? ie$2(s3[c4], a4[c4]) : "style" === c4 ? __assign$2(__assign$2({}, s3[c4]), a4[c4]) : a4[c4];
         }
         return n2.className && (s3.className = ie$2(s3.className, n2.className)), s3;
       }(i2, r4, v2), S3 = g3.as || h2, w3 = {};
@@ -6403,9 +6403,9 @@ function ut(n2, o, r2) {
     return n2(o, r2, lt$1.apply(void 0, __spreadArray$1([t], s2, false)));
   };
   return s.attrs = function(e2) {
-    return ut(n2, o, __assign$1(__assign$1({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
+    return ut(n2, o, __assign$2(__assign$2({}, r2), { attrs: Array.prototype.concat(r2.attrs, e2).filter(Boolean) }));
   }, s.withConfig = function(e2) {
-    return ut(n2, o, __assign$1(__assign$1({}, r2), e2));
+    return ut(n2, o, __assign$2(__assign$2({}, r2), e2));
   }, s;
 }
 var pt$1 = function(e2) {
@@ -9501,47 +9501,383 @@ const InputGroupAddon = ({
   })();
   return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
-const inputInTable$8 = "_inputInTable_4cdnv_1";
-const inputHover$8 = "_inputHover_4cdnv_13";
-const inputFocus$8 = "_inputFocus_4cdnv_18";
-const inputError$8 = "_inputError_4cdnv_25";
-const inputWarning$8 = "_inputWarning_4cdnv_26";
-const inputDisabled$8 = "_inputDisabled_4cdnv_61";
-const hideScrollbars$8 = "_hideScrollbars_4cdnv_67";
-const list$1 = "_list_4cdnv_77";
-const bordered$1 = "_bordered_4cdnv_83";
-const virtualRow = "_virtualRow_4cdnv_87";
-const item$4 = "_item_4cdnv_87";
-const header$1 = "_header_4cdnv_90";
-const headerTitle = "_headerTitle_4cdnv_90";
-const heading$3 = "_heading_4cdnv_91";
-const itemHeader = "_itemHeader_4cdnv_91";
-const narrow = "_narrow_4cdnv_94";
-const stickyHeader = "_stickyHeader_4cdnv_98";
-const title$3 = "_title_4cdnv_109";
-const name = "_name_4cdnv_115";
-const iconTooltipMargin = "_iconTooltipMargin_4cdnv_119";
-const bold = "_bold_4cdnv_122";
-const toggleNarrow = "_toggleNarrow_4cdnv_133";
-const drag$1 = "_drag_4cdnv_151";
-const dragOverlay$1 = "_dragOverlay_4cdnv_172";
-const listContent = "_listContent_4cdnv_177";
-const action = "_action_4cdnv_204";
-const active$3 = "_active_4cdnv_207";
-const indented = "_indented_4cdnv_214";
-const disabled$5 = "_disabled_4cdnv_227";
-const label$6 = "_label_4cdnv_238";
-const details$2 = "_details_4cdnv_249";
-const metadata = "_metadata_4cdnv_250";
-const itemContent = "_itemContent_4cdnv_258";
-const indentIcon = "_indentIcon_4cdnv_265";
-const expandIcon = "_expandIcon_4cdnv_270";
-const expanded = "_expanded_4cdnv_277";
-const right$4 = "_right_4cdnv_280";
-const actions = "_actions_4cdnv_288";
-const hideScrollbar = "_hideScrollbar_4cdnv_67";
-const noPointerEvents = "_noPointerEvents_4cdnv_303";
-const virtualRows = "_virtualRows_4cdnv_306";
+/*! *****************************************************************************
+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];
+  };
+  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 __());
+}
+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);
+};
+function throttle$1(delay, noTrailing, callback, debounceMode) {
+  var timeoutID;
+  var cancelled = false;
+  var lastExec = 0;
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+  function cancel() {
+    clearExistingTimeout();
+    cancelled = true;
+  }
+  if (typeof noTrailing !== "boolean") {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = void 0;
+  }
+  function wrapper2() {
+    var self2 = this;
+    var elapsed = Date.now() - lastExec;
+    var args = arguments;
+    if (cancelled) {
+      return;
+    }
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self2, args);
+    }
+    function clear() {
+      timeoutID = void 0;
+    }
+    if (debounceMode && !timeoutID) {
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === void 0 && elapsed > delay) {
+      exec();
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === void 0 ? delay - elapsed : delay);
+    }
+  }
+  wrapper2.cancel = cancel;
+  return wrapper2;
+}
+var ThresholdUnits = {
+  Pixel: "Pixel",
+  Percent: "Percent"
+};
+var defaultThreshold$1 = {
+  unit: ThresholdUnits.Percent,
+  value: 0.8
+};
+function parseThreshold(scrollThreshold) {
+  if (typeof scrollThreshold === "number") {
+    return {
+      unit: ThresholdUnits.Percent,
+      value: scrollThreshold * 100
+    };
+  }
+  if (typeof scrollThreshold === "string") {
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
+      return {
+        unit: ThresholdUnits.Pixel,
+        value: parseFloat(scrollThreshold)
+      };
+    }
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
+      return {
+        unit: ThresholdUnits.Percent,
+        value: parseFloat(scrollThreshold)
+      };
+    }
+    console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
+    return defaultThreshold$1;
+  }
+  console.warn("scrollThreshold should be string or number");
+  return defaultThreshold$1;
+}
+var InfiniteScroll = (
+  /** @class */
+  function(_super) {
+    __extends(InfiniteScroll2, _super);
+    function InfiniteScroll2(props) {
+      var _this = _super.call(this, props) || this;
+      _this.lastScrollTop = 0;
+      _this.actionTriggered = false;
+      _this.startY = 0;
+      _this.currentY = 0;
+      _this.dragging = false;
+      _this.maxPullDownDistance = 0;
+      _this.getScrollableTarget = function() {
+        if (_this.props.scrollableTarget instanceof HTMLElement)
+          return _this.props.scrollableTarget;
+        if (typeof _this.props.scrollableTarget === "string") {
+          return document.getElementById(_this.props.scrollableTarget);
+        }
+        if (_this.props.scrollableTarget === null) {
+          console.warn("You are trying to pass scrollableTarget but it is null. This might\n        happen because the element may not have been added to DOM yet.\n        See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.\n      ");
+        }
+        return null;
+      };
+      _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.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.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;
+        }
+        if (_this.currentY < _this.startY)
+          return;
+        if (_this.currentY - _this.startY >= Number(_this.props.pullDownToRefreshThreshold)) {
+          _this.setState({
+            pullToRefreshThresholdBreached: true
+          });
+        }
+        if (_this.currentY - _this.startY > _this.maxPullDownDistance * 1.5)
+          return;
+        if (_this._infScroll) {
+          _this._infScroll.style.overflow = "visible";
+          _this._infScroll.style.transform = "translate3d(0px, " + (_this.currentY - _this.startY) + "px, 0px)";
+        }
+      };
+      _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
+          });
+        }
+        requestAnimationFrame(function() {
+          if (_this._infScroll) {
+            _this._infScroll.style.overflow = "auto";
+            _this._infScroll.style.transform = "none";
+            _this._infScroll.style.willChange = "unset";
+          }
+        });
+      };
+      _this.onScrollListener = function(event) {
+        if (typeof _this.props.onScroll === "function") {
+          setTimeout(function() {
+            return _this.props.onScroll && _this.props.onScroll(event);
+          }, 0);
+        }
+        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'`);
+        }
+      }
+    };
+    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);
+        }
+      }
+    };
+    InfiniteScroll2.prototype.componentDidUpdate = function(prevProps) {
+      if (this.props.dataLength === prevProps.dataLength)
+        return;
+      this.actionTriggered = false;
+      this.setState({
+        showLoader: false
+      });
+    };
+    InfiniteScroll2.getDerivedStateFromProps = function(nextProps, prevState) {
+      var dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
+      if (dataLengthChanged) {
+        return __assign$1(__assign$1({}, prevState), { prevDataLength: nextProps.dataLength });
+      }
+      return null;
+    };
+    InfiniteScroll2.prototype.isElementAtTop = function(target, scrollThreshold) {
+      if (scrollThreshold === void 0) {
+        scrollThreshold = 0.8;
+      }
+      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;
+    };
+    InfiniteScroll2.prototype.isElementAtBottom = function(target, scrollThreshold) {
+      if (scrollThreshold === void 0) {
+        scrollThreshold = 0.8;
+      }
+      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 target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight;
+    };
+    InfiniteScroll2.prototype.render = function() {
+      var _this = this;
+      var style = __assign$1({ height: this.props.height || "auto", overflow: "auto", WebkitOverflowScrolling: "touch" }, this.props.style);
+      var hasChildren2 = this.props.hasChildren || !!(this.props.children && this.props.children instanceof Array && this.props.children.length);
+      var outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: "auto" } : {};
+      return React__default.createElement(
+        "div",
+        { style: outerDivStyle, className: "infinite-scroll-component__outerdiv" },
+        React__default.createElement(
+          "div",
+          { className: "infinite-scroll-component " + (this.props.className || ""), ref: function(infScroll) {
+            return _this._infScroll = infScroll;
+          }, style },
+          this.props.pullDownToRefresh && React__default.createElement(
+            "div",
+            { style: { position: "relative" }, ref: function(pullDown) {
+              return _this._pullDown = pullDown;
+            } },
+            React__default.createElement("div", { style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: -1 * this.maxPullDownDistance
+            } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent)
+          ),
+          this.props.children,
+          !this.state.showLoader && !hasChildren2 && this.props.hasMore && this.props.loader,
+          this.state.showLoader && this.props.hasMore && this.props.loader,
+          !this.props.hasMore && this.props.endMessage
+        )
+      );
+    };
+    return InfiniteScroll2;
+  }(Component$1)
+);
+const inputInTable$8 = "_inputInTable_7sjlf_1";
+const inputHover$8 = "_inputHover_7sjlf_13";
+const inputFocus$8 = "_inputFocus_7sjlf_18";
+const inputError$8 = "_inputError_7sjlf_25";
+const inputWarning$8 = "_inputWarning_7sjlf_26";
+const inputDisabled$8 = "_inputDisabled_7sjlf_61";
+const hideScrollbars$8 = "_hideScrollbars_7sjlf_67";
+const header$1 = "_header_7sjlf_77";
+const headerTitle = "_headerTitle_7sjlf_77";
+const heading$3 = "_heading_7sjlf_78";
+const itemHeader = "_itemHeader_7sjlf_78";
+const narrow = "_narrow_7sjlf_81";
+const stickyHeader = "_stickyHeader_7sjlf_85";
+const title$3 = "_title_7sjlf_96";
+const name = "_name_7sjlf_102";
+const iconTooltipMargin = "_iconTooltipMargin_7sjlf_105";
+const bold = "_bold_7sjlf_108";
+const toggleNarrow = "_toggleNarrow_7sjlf_117";
+const drag$1 = "_drag_7sjlf_135";
+const dragOverlay$1 = "_dragOverlay_7sjlf_156";
+const list$1 = "_list_7sjlf_161";
+const bordered$1 = "_bordered_7sjlf_165";
+const item$4 = "_item_7sjlf_78";
+const action = "_action_7sjlf_198";
+const active$3 = "_active_7sjlf_201";
+const indented = "_indented_7sjlf_208";
+const disabled$5 = "_disabled_7sjlf_221";
+const label$6 = "_label_7sjlf_232";
+const details$2 = "_details_7sjlf_243";
+const metadata = "_metadata_7sjlf_244";
+const itemContent = "_itemContent_7sjlf_252";
+const indentIcon = "_indentIcon_7sjlf_259";
+const expandIcon = "_expandIcon_7sjlf_264";
+const expanded = "_expanded_7sjlf_271";
+const right$4 = "_right_7sjlf_274";
+const actions = "_actions_7sjlf_282";
+const scrollableList = "_scrollableList_7sjlf_287";
+const infiniteScrollContainer = "_infiniteScrollContainer_7sjlf_292";
+const hideScrollbar = "_hideScrollbar_7sjlf_67";
+const noPointerEvents = "_noPointerEvents_7sjlf_309";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -9550,10 +9886,6 @@ const listStyles = {
   inputWarning: inputWarning$8,
   inputDisabled: inputDisabled$8,
   hideScrollbars: hideScrollbars$8,
-  list: list$1,
-  bordered: bordered$1,
-  virtualRow,
-  item: item$4,
   header: header$1,
   headerTitle,
   heading: heading$3,
@@ -9567,7 +9899,9 @@ const listStyles = {
   toggleNarrow,
   drag: drag$1,
   dragOverlay: dragOverlay$1,
-  listContent,
+  list: list$1,
+  bordered: bordered$1,
+  item: item$4,
   action,
   active: active$3,
   indented,
@@ -9581,9 +9915,10 @@ const listStyles = {
   expanded,
   right: right$4,
   actions,
+  scrollableList,
+  infiniteScrollContainer,
   hideScrollbar,
-  noPointerEvents,
-  virtualRows
+  noPointerEvents
 };
 const ToggleNarrow = ({
   toggleNarrow: toggleNarrow2,
@@ -9687,10 +10022,10 @@ function getOwnerDocument(target) {
   }
   return document;
 }
-const useIsomorphicLayoutEffect$5 = canUseDOM ? useLayoutEffect$1 : useEffect;
+const useIsomorphicLayoutEffect$4 = canUseDOM ? useLayoutEffect$1 : useEffect;
 function useEvent$1(handler) {
   const handlerRef = useRef(handler);
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     handlerRef.current = handler;
   });
   return useCallback(function() {
@@ -9718,7 +10053,7 @@ function useLatestValue(value, dependencies) {
     dependencies = [value];
   }
   const valueRef = useRef(value);
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     if (valueRef.current !== value) {
       valueRef.current = value;
     }
@@ -9808,9 +10143,9 @@ function isTouchEvent$2(event) {
     return false;
   }
   const {
-    TouchEvent
+    TouchEvent: TouchEvent2
   } = getWindow(event.target);
-  return TouchEvent && event instanceof TouchEvent;
+  return TouchEvent2 && event instanceof TouchEvent2;
 }
 function getEventCoordinates(event) {
   if (isTouchEvent$2(event)) {
@@ -11630,7 +11965,7 @@ function useRect(element, measure, fallbackRect) {
   const resizeObserver = useResizeObserver({
     callback: measureRect
   });
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     measureRect();
     if (element) {
       resizeObserver == null ? void 0 : resizeObserver.observe(element);
@@ -11813,7 +12148,7 @@ function useRects(elements, measure) {
   if (elements.length > 0 && rects === defaultValue$2) {
     measureRects();
   }
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     if (elements.length) {
       elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
     } else {
@@ -12184,7 +12519,7 @@ function useLayoutShiftScrollCompensation(_ref) {
     x: config,
     y: config
   } : config;
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     const disabled2 = !x2 && !y2;
     if (disabled2 || !activeNode) {
       initialized.current = false;
@@ -12228,7 +12563,7 @@ var Status;
   Status2[Status2["Initializing"] = 1] = "Initializing";
   Status2[Status2["Initialized"] = 2] = "Initialized";
 })(Status || (Status = {}));
-const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
+const DndContext$1 = /* @__PURE__ */ memo(function DndContext(_ref) {
   var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
   let {
     id: id2,
@@ -12506,7 +12841,7 @@ const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
   }, [draggableNodes, instantiateSensor]);
   const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
   useSensorSetup(sensors);
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     if (activeNodeRect && status === Status.Initializing) {
       setStatus(Status.Initialized);
     }
@@ -12590,7 +12925,7 @@ const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [overId]
   );
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     sensorContext.current = {
       activatorEvent,
       active: active2,
@@ -12717,7 +13052,7 @@ function useDraggable(_ref) {
   const [activatorNode, setActivatorNodeRef] = useNodeRef();
   const listeners = useSyntheticListeners(activators, id2);
   const dataRef = useLatestValue(data);
-  useIsomorphicLayoutEffect$5(
+  useIsomorphicLayoutEffect$4(
     () => {
       draggableNodes.set(id2, {
         id: id2,
@@ -12837,7 +13172,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$5(
+  useIsomorphicLayoutEffect$4(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -12890,7 +13225,7 @@ function AnimationManager(_ref) {
   if (!children && !clonedChildren && previousChildren) {
     setClonedChildren(previousChildren);
   }
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     if (!element) {
       return;
     }
@@ -13390,7 +13725,7 @@ function SortableContext(_ref) {
   const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
   const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
   const disabled2 = normalizeDisabled(disabledProp);
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     if (itemsHaveChanged && isDragging) {
       measureDroppableContainers(items);
     }
@@ -13471,7 +13806,7 @@ function useDerivedTransform(_ref) {
   } = _ref;
   const [derivedTransform, setDerivedtransform] = useState(null);
   const previousIndex = useRef(index2);
-  useIsomorphicLayoutEffect$5(() => {
+  useIsomorphicLayoutEffect$4(() => {
     if (!disabled2 && index2 !== previousIndex.current && node2.current) {
       const initial = rect.current;
       if (initial) {
@@ -13866,6 +14201,72 @@ const ListRow = forwardRef(
     return isSubheading ? /* @__PURE__ */ jsx(ListSubheading, { ref: listRowRefs, item: item2, index: index2 }, index2) : draggable ? listElementWithDrag(index2, item2) : listElement(index2, item2);
   }
 );
+const loader = "_loader_477i5_1";
+const fullViewPortSize = "_fullViewPortSize_477i5_7";
+const cover = "_cover_477i5_14";
+const dimmer = "_dimmer_477i5_21";
+const content$2 = "_content_477i5_44";
+const text$1 = "_text_477i5_49";
+const details$1 = "_details_477i5_53";
+const styles$t = {
+  loader,
+  fullViewPortSize,
+  cover,
+  dimmer,
+  content: content$2,
+  text: text$1,
+  details: details$1
+};
+const Loader = ({
+  width: width2,
+  height: height2,
+  text: text2 = "",
+  details: details2 = "",
+  fullViewPortSize: fullViewPortSize2 = false,
+  cover: cover2 = false,
+  children = null,
+  theme = Theme.DARK,
+  testId = null
+}) => {
+  const color2 = theme === Theme.DARK ? Theme.WHITE : Theme.INHERIT;
+  const background2 = theme === "white" ? "var(--color-background-raised)" : theme === "light" ? "var(--color-background)" : "black";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
+        [styles$t.fullViewPortSize]: fullViewPortSize2
+      }),
+      style: { width: width2, height: height2 },
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$t.content,
+          "data-testid": testId && `${testId}-content`,
+          children: [
+            children,
+            text2 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$t.text,
+                "data-testid": testId && `${testId}-text`,
+                children: text2
+              }
+            ),
+            details2 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$t.details,
+                "data-testid": testId && `${testId}-details`,
+                children: details2
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
 const ListDragWrapper = ({
   children,
   draggable,
@@ -13880,14 +14281,15 @@ const ListDragWrapper = ({
     setDragIndex(event.active.id);
   };
   const handleDragEnd = (event) => {
+    var _a2, _b, _c, _d, _e2, _f, _g, _h;
     setDragIndex(null);
     const { active: active2, over } = event;
-    const from3 = active2 == null ? void 0 : active2.id;
-    const to2 = over == null ? void 0 : over.id;
+    const from3 = (_b = (_a2 = active2 == null ? void 0 : active2.data) == null ? void 0 : _a2.current) == null ? void 0 : _b.sortable.index;
+    const to2 = (_d = (_c = over == null ? void 0 : over.data) == null ? void 0 : _c.current) == null ? void 0 : _d.sortable.index;
     if (from3 !== to2) {
       onListReorder({
-        from: Number(from3),
-        to: Number(to2)
+        from: (_f = (_e2 = active2 == null ? void 0 : active2.data) == null ? void 0 : _e2.current) == null ? void 0 : _f.sortable.index,
+        to: (_h = (_g = over == null ? void 0 : over.data) == null ? void 0 : _g.current) == null ? void 0 : _h.sortable.index
       });
     }
   };
@@ -13918,818 +14320,6 @@ const ListDragWrapper = ({
     }
   );
 };
-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;
-  };
-}
-function notUndefined(value, msg2) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
-  }
-}
-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);
-  };
-};
-const defaultKeyExtractor = (index2) => index2;
-const defaultRangeExtractor = (range2) => {
-  const start = Math.max(range2.startIndex - range2.overscan, 0);
-  const end = Math.min(range2.endIndex + range2.overscan, range2.count - 1);
-  const arr = [];
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-const observeElementRect = (instance, cb2) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  const handler = (rect) => {
-    const { width: width2, height: height2 } = rect;
-    cb2({ width: Math.round(width2), height: Math.round(height2) });
-  };
-  handler(element.getBoundingClientRect());
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
-  }
-  const observer = new targetWindow.ResizeObserver((entries2) => {
-    const entry = entries2[0];
-    if (entry == null ? void 0 : entry.borderBoxSize) {
-      const box = entry.borderBoxSize[0];
-      if (box) {
-        handler({ width: box.inlineSize, height: box.blockSize });
-        return;
-      }
-    }
-    handler(element.getBoundingClientRect());
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
-};
-const addEventListenerOptions = {
-  passive: true
-};
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb2) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  let offset = 0;
-  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce$2(
-    targetWindow,
-    () => {
-      cb2(offset, false);
-    },
-    instance.options.isScrollingResetDelay
-  );
-  const createHandler = (isScrolling) => () => {
-    const { horizontal, isRtl } = instance.options;
-    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
-    fallback();
-    cb2(offset, isScrolling);
-  };
-  const handler = createHandler(true);
-  const endHandler = createHandler(false);
-  endHandler();
-  element.addEventListener("scroll", handler, addEventListenerOptions);
-  element.addEventListener("scrollend", endHandler, addEventListenerOptions);
-  return () => {
-    element.removeEventListener("scroll", handler);
-    element.removeEventListener("scrollend", endHandler);
-  };
-};
-const measureElement = (element, entry, instance) => {
-  if (entry == null ? void 0 : entry.borderBoxSize) {
-    const box = entry.borderBoxSize[0];
-    if (box) {
-      const size2 = Math.round(
-        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
-      );
-      return size2;
-    }
-  }
-  return Math.round(
-    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
-  );
-};
-const elementScroll = (offset, {
-  adjustments = 0,
-  behavior
-}, instance) => {
-  var _a2, _b;
-  const toOffset = offset + adjustments;
-  (_b = (_a2 = instance.scrollElement) == null ? void 0 : _a2.scrollTo) == null ? void 0 : _b.call(_a2, {
-    [instance.options.horizontal ? "left" : "top"]: toOffset,
-    behavior
-  });
-};
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const get3 = () => {
-        if (_ro) {
-          return _ro;
-        }
-        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
-          return null;
-        }
-        return _ro = new this.targetWindow.ResizeObserver((entries2) => {
-          entries2.forEach((entry) => {
-            this._measureElement(entry.target, entry);
-          });
-        });
-      };
-      return {
-        disconnect: () => {
-          var _a2;
-          (_a2 = get3()) == null ? void 0 : _a2.disconnect();
-          _ro = null;
-        },
-        observe: (target) => {
-          var _a2;
-          return (_a2 = get3()) == null ? void 0 : _a2.observe(target, { box: "border-box" });
-        },
-        unobserve: (target) => {
-          var _a2;
-          return (_a2 = get3()) == null ? void 0 : _a2.unobserve(target);
-        }
-      };
-    })();
-    this.range = null;
-    this.setOptions = (opts2) => {
-      Object.entries(opts2).forEach(([key2, value]) => {
-        if (typeof value === "undefined") delete opts2[key2];
-      });
-      this.options = {
-        debug: false,
-        initialOffset: 0,
-        overscan: 1,
-        paddingStart: 0,
-        paddingEnd: 0,
-        scrollPaddingStart: 0,
-        scrollPaddingEnd: 0,
-        horizontal: false,
-        getItemKey: defaultKeyExtractor,
-        rangeExtractor: defaultRangeExtractor,
-        onChange: () => {
-        },
-        measureElement,
-        initialRect: { width: 0, height: 0 },
-        scrollMargin: 0,
-        gap: 0,
-        indexAttribute: "data-index",
-        initialMeasurementsCache: [],
-        lanes: 1,
-        isScrollingResetDelay: 150,
-        enabled: true,
-        isRtl: false,
-        useScrollendEvent: true,
-        ...opts2
-      };
-    };
-    this.notify = (sync2) => {
-      var _a2, _b;
-      (_b = (_a2 = this.options).onChange) == null ? void 0 : _b.call(_a2, this, sync2);
-    };
-    this.maybeNotify = memo(
-      () => {
-        this.calculateRange();
-        return [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ];
-      },
-      (isScrolling) => {
-        this.notify(isScrolling);
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "maybeNotify",
-        debug: () => this.options.debug,
-        initialDeps: [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ]
-      }
-    );
-    this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((d2) => d2());
-      this.unsubs = [];
-      this.observer.disconnect();
-      this.scrollElement = null;
-      this.targetWindow = null;
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
-      };
-    };
-    this._willUpdate = () => {
-      var _a2;
-      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        if (!scrollElement) {
-          this.maybeNotify();
-          return;
-        }
-        this.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.elementsCache.forEach((cached) => {
-          this.observer.observe(cached);
-        });
-        this._scrollToOffset(this.getScrollOffset(), {
-          adjustments: void 0,
-          behavior: void 0
-        });
-        this.unsubs.push(
-          this.options.observeElementRect(this, (rect) => {
-            this.scrollRect = rect;
-            this.maybeNotify();
-          })
-        );
-        this.unsubs.push(
-          this.options.observeElementOffset(this, (offset, isScrolling) => {
-            this.scrollAdjustments = 0;
-            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
-            this.scrollOffset = offset;
-            this.isScrolling = isScrolling;
-            this.maybeNotify();
-          })
-        );
-      }
-    };
-    this.getSize = () => {
-      if (!this.options.enabled) {
-        this.scrollRect = null;
-        return 0;
-      }
-      this.scrollRect = this.scrollRect ?? this.options.initialRect;
-      return this.scrollRect[this.options.horizontal ? "width" : "height"];
-    };
-    this.getScrollOffset = () => {
-      if (!this.options.enabled) {
-        this.scrollOffset = null;
-        return 0;
-      }
-      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
-      return this.scrollOffset;
-    };
-    this.getFurthestMeasurement = (measurements, index2) => {
-      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
-      const furthestMeasurements = /* @__PURE__ */ new Map();
-      for (let m2 = index2 - 1; m2 >= 0; m2--) {
-        const measurement = measurements[m2];
-        if (furthestMeasurementsFound.has(measurement.lane)) {
-          continue;
-        }
-        const previousFurthestMeasurement = furthestMeasurements.get(
-          measurement.lane
-        );
-        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
-          furthestMeasurements.set(measurement.lane, measurement);
-        } else if (measurement.end < previousFurthestMeasurement.end) {
-          furthestMeasurementsFound.set(measurement.lane, true);
-        }
-        if (furthestMeasurementsFound.size === this.options.lanes) {
-          break;
-        }
-      }
-      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a2, b2) => {
-        if (a2.end === b2.end) {
-          return a2.index - b2.index;
-        }
-        return a2.end - b2.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled
-      ],
-      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count,
-          paddingStart,
-          scrollMargin,
-          getItemKey,
-          enabled
-        };
-      },
-      {
-        key: false
-      }
-    );
-    this.getMeasurements = memo(
-      () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
-        if (!enabled) {
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          return [];
-        }
-        if (this.measurementsCache.length === 0) {
-          this.measurementsCache = this.options.initialMeasurementsCache;
-          this.measurementsCache.forEach((item2) => {
-            this.itemSizeCache.set(item2.key, item2.size);
-          });
-        }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < count; i++) {
-          const key2 = getItemKey(i);
-          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
-          const measuredSize = itemSizeCache.get(key2);
-          const size2 = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
-          const end = start + size2;
-          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
-          measurements[i] = {
-            index: i,
-            start,
-            size: size2,
-            end,
-            key: key2,
-            lane
-          };
-        }
-        this.measurementsCache = measurements;
-        return measurements;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getMeasurements",
-        debug: () => this.options.debug
-      }
-    );
-    this.calculateRange = memo(
-      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
-      (measurements, outerSize, scrollOffset) => {
-        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset
-        }) : null;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "calculateRange",
-        debug: () => this.options.debug
-      }
-    );
-    this.getIndexes = memo(
-      () => [
-        this.options.rangeExtractor,
-        this.calculateRange(),
-        this.options.overscan,
-        this.options.count
-      ],
-      (rangeExtractor, range2, overscan, count) => {
-        return range2 === null ? [] : rangeExtractor({
-          startIndex: range2.startIndex,
-          endIndex: range2.endIndex,
-          overscan,
-          count
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getIndexes",
-        debug: () => this.options.debug
-      }
-    );
-    this.indexFromElement = (node2) => {
-      const attributeName = this.options.indexAttribute;
-      const indexStr = node2.getAttribute(attributeName);
-      if (!indexStr) {
-        console.warn(
-          `Missing attribute name '${attributeName}={index}' on measured element.`
-        );
-        return -1;
-      }
-      return parseInt(indexStr, 10);
-    };
-    this._measureElement = (node2, entry) => {
-      const index2 = this.indexFromElement(node2);
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
-        return;
-      }
-      const key2 = item2.key;
-      const prevNode = this.elementsCache.get(key2);
-      if (prevNode !== node2) {
-        if (prevNode) {
-          this.observer.unobserve(prevNode);
-        }
-        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.pendingMeasuredCacheIndexes.push(item2.index);
-        this.itemSizeCache = new Map(this.itemSizeCache.set(item2.key, size2));
-        this.notify(false);
-      }
-    };
-    this.measureElement = (node2) => {
-      if (!node2) {
-        this.elementsCache.forEach((cached, key2) => {
-          if (!cached.isConnected) {
-            this.observer.unobserve(cached);
-            this.elementsCache.delete(key2);
-          }
-        });
-        return;
-      }
-      this._measureElement(node2, void 0);
-    };
-    this.getVirtualItems = memo(
-      () => [this.getIndexes(), this.getMeasurements()],
-      (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k2 = 0, len = indexes.length; k2 < len; k2++) {
-          const i = indexes[k2];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
-        }
-        return virtualItems;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualItemForOffset = (offset) => {
-      const measurements = this.getMeasurements();
-      if (measurements.length === 0) {
-        return void 0;
-      }
-      return notUndefined(
-        measurements[findNearestBinarySearch(
-          0,
-          measurements.length - 1,
-          (index2) => notUndefined(measurements[index2]).start,
-          offset
-        )]
-      );
-    };
-    this.getOffsetForAlignment = (toOffset, align) => {
-      const size2 = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (toOffset <= scrollOffset) {
-          align = "start";
-        } else if (toOffset >= scrollOffset + size2) {
-          align = "end";
-        } else {
-          align = "start";
-        }
-      }
-      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];
-        }
-      }
-      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;
-      }
-    };
-    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."
-        );
-      }
-      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.scrollToIndex = (index2, { align: initialAlign = "auto", behavior } = {}) => {
-      index2 = Math.max(0, Math.min(index2, this.options.count - 1));
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      const offsetAndAlign = this.getOffsetForIndex(index2, initialAlign);
-      if (!offsetAndAlign) return;
-      const [offset, align] = offsetAndAlign;
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-          this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.elementsCache.has(
-            this.options.getItemKey(index2)
-          );
-          if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index2, align)
-            );
-            if (!approxEqual(latestOffset, this.getScrollOffset())) {
-              this.scrollToIndex(index2, { align, behavior });
-            }
-          } else {
-            this.scrollToIndex(index2, { align, behavior });
-          }
-        });
-      }
-    };
-    this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      this._scrollToOffset(this.getScrollOffset() + delta, {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.getTotalSize = () => {
-      var _a2;
-      const measurements = this.getMeasurements();
-      let end;
-      if (measurements.length === 0) {
-        end = this.options.paddingStart;
-      } else {
-        end = this.options.lanes === 1 ? ((_a2 = measurements[measurements.length - 1]) == null ? void 0 : _a2.end) ?? 0 : Math.max(
-          ...measurements.slice(-this.options.lanes).map((m2) => m2.end)
-        );
-      }
-      return Math.max(
-        end - this.options.scrollMargin + this.options.paddingEnd,
-        0
-      );
-    };
-    this._scrollToOffset = (offset, {
-      adjustments,
-      behavior
-    }) => {
-      this.options.scrollToFn(offset, { behavior, adjustments }, this);
-    };
-    this.measure = () => {
-      this.itemSizeCache = /* @__PURE__ */ new Map();
-      this.notify(false);
-    };
-    this.setOptions(opts);
-  }
-}
-const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
-  while (low <= high) {
-    const middle = (low + high) / 2 | 0;
-    const currentValue = getCurrentValue(middle);
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
-    }
-  }
-  if (low > 0) {
-    return low - 1;
-  } else {
-    return 0;
-  }
-};
-function calculateRange({
-  measurements,
-  outerSize,
-  scrollOffset
-}) {
-  const count = measurements.length - 1;
-  const getOffset2 = (index2) => measurements[index2].start;
-  const startIndex = findNearestBinarySearch(0, count, getOffset2, scrollOffset);
-  let endIndex = startIndex;
-  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
-    endIndex++;
-  }
-  return { startIndex, endIndex };
-}
-const useIsomorphicLayoutEffect$4 = typeof document !== "undefined" ? React$4.useLayoutEffect : React$4.useEffect;
-function useVirtualizerBase(options) {
-  const rerender = React$4.useReducer(() => ({}), {})[1];
-  const resolvedOptions = {
-    ...options,
-    onChange: (instance2, sync2) => {
-      var _a2;
-      if (sync2) {
-        flushSync$1(rerender);
-      } else {
-        rerender();
-      }
-      (_a2 = options.onChange) == null ? void 0 : _a2.call(options, instance2, sync2);
-    }
-  };
-  const [instance] = React$4.useState(
-    () => new Virtualizer(resolvedOptions)
-  );
-  instance.setOptions(resolvedOptions);
-  React$4.useEffect(() => {
-    return instance._didMount();
-  }, []);
-  useIsomorphicLayoutEffect$4(() => {
-    return instance._willUpdate();
-  });
-  return instance;
-}
-function useVirtualizer(options) {
-  return useVirtualizerBase({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options
-  });
-}
-const ListScrollWrapper = ({
-  items,
-  scrollDetails,
-  children
-}) => {
-  const { hideScrollbar: hideScrollbar2, triggerScrollToActiveItem } = scrollDetails;
-  const listContainerRef = useRef(null);
-  const estimateItemHeight = () => {
-    let height2 = 37;
-    if (items.length > 0) {
-      const item2 = items[items.length - 1];
-      if (item2.details) height2 += 20;
-      if (item2.metadata) height2 += 20;
-    }
-    return height2;
-  };
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => listContainerRef.current,
-    estimateSize: useCallback(estimateItemHeight, []),
-    overscan: 5
-  });
-  const findFirstActiveItemIndex = (items2) => items2.findIndex((item2) => item2.active === true);
-  const setScrollToActiveItem = (activeItemIndex) => {
-    if (activeItemIndex >= 0) {
-      virtualizer.scrollToIndex(activeItemIndex, {
-        align: "center",
-        behavior: "smooth"
-      });
-    }
-  };
-  useEffect(() => {
-    if (triggerScrollToActiveItem) {
-      const activeItemIndex = findFirstActiveItemIndex(items);
-      setScrollToActiveItem(activeItemIndex);
-    }
-  }, [triggerScrollToActiveItem]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx$2(
-        listStyles.listContent,
-        hideScrollbar2 ? listStyles.hideScrollbar : ""
-      ),
-      ref: listContainerRef,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: listStyles.virtualRows,
-          style: { height: `${virtualizer.getTotalSize()}px` },
-          children: children({ virtualizer })
-        }
-      )
-    }
-  );
-};
 const List = ({
   list: list2,
   bordered: bordered2 = false,
@@ -14748,22 +14338,83 @@ const List = ({
   height: height2,
   testId,
   scrollDetails = {
+    scrollable: false,
     hideScrollbar: false,
-    triggerScrollToActiveItem: false
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false,
+    limit: 10,
+    infiniteScrollTarget: void 0
   }
 }) => {
-  return /* @__PURE__ */ jsxs(
+  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(
     "div",
     {
       className: cx$2(
-        listStyles.list,
         narrow2 ? listStyles.narrow : "",
-        bordered2 ? listStyles.bordered : ""
+        scrollable ? listStyles.scrollableList : "",
+        hideScrollbar2 ? listStyles.hideScrollbar : ""
       ),
       "data-testid": testId,
-      style: { height: height2, marginBottom },
       id: "scrollableDiv",
-      children: [
+      style: { height: height2, marginBottom },
+      ref: listContainerRef,
+      children: /* @__PURE__ */ jsxs(Card, { bordered: bordered2, padding: false, children: [
         !noHeader && /* @__PURE__ */ jsx(
           ListHeading,
           {
@@ -14771,106 +14422,53 @@ const List = ({
             actions: list2.actions,
             toggleNarrow: toggleNarrow2,
             onToggleNarrow,
-            stickyHeader: stickyHeader2
+            stickyHeader: stickyHeader2,
+            ref: listHeadingRef
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""), children: /* @__PURE__ */ jsx(
           ListDragWrapper,
           {
             draggable,
             list: list2,
             onListReorder,
-            children: /* @__PURE__ */ jsx(ListScrollWrapper, { items: list2.items, scrollDetails, children: ({ virtualizer }) => virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-              "div",
+            children: infiniteScroll ? /* @__PURE__ */ jsx(
+              InfiniteScroll,
               {
-                "data-index": virtualRow2.index,
-                className: listStyles.virtualRow,
-                style: {
-                  transform: `translateY(${virtualRow2.start}px)`
-                },
-                ref: virtualizer.measureElement,
-                children: /* @__PURE__ */ jsx(
+                dataLength: numVisibleRows,
+                next: loadMoreItems,
+                hasMore,
+                scrollableTarget: infiniteScrollTarget || "scrollableDiv",
+                loader: /* @__PURE__ */ jsx(Loader, {}),
+                className: listStyles.infiniteScrollContainer,
+                children: list2.items.slice(0, numVisibleRows).map((item2, index2) => /* @__PURE__ */ jsx(
                   ListRow,
                   {
-                    index: virtualRow2.index,
+                    index: index2,
                     draggable,
-                    item: list2.items[virtualRow2.index],
+                    item: item2,
                     expanding,
-                    invokeEditOnRowClick
-                  }
-                )
-              },
-              virtualRow2.key
-            )) })
-          }
-        )
-      ]
-    }
-  );
-};
-const loader = "_loader_477i5_1";
-const fullViewPortSize = "_fullViewPortSize_477i5_7";
-const cover = "_cover_477i5_14";
-const dimmer = "_dimmer_477i5_21";
-const content$2 = "_content_477i5_44";
-const text$1 = "_text_477i5_49";
-const details$1 = "_details_477i5_53";
-const styles$t = {
-  loader,
-  fullViewPortSize,
-  cover,
-  dimmer,
-  content: content$2,
-  text: text$1,
-  details: details$1
-};
-const Loader = ({
-  width: width2,
-  height: height2,
-  text: text2 = "",
-  details: details2 = "",
-  fullViewPortSize: fullViewPortSize2 = false,
-  cover: cover2 = false,
-  children = null,
-  theme = Theme.DARK,
-  testId = null
-}) => {
-  const color2 = theme === Theme.DARK ? Theme.WHITE : Theme.INHERIT;
-  const background2 = theme === "white" ? "var(--color-background-raised)" : theme === "light" ? "var(--color-background)" : "black";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
-        [styles$t.fullViewPortSize]: fullViewPortSize2
-      }),
-      style: { width: width2, height: height2 },
-      "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles$t.content,
-          "data-testid": testId && `${testId}-content`,
-          children: [
-            children,
-            text2 && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: styles$t.text,
-                "data-testid": testId && `${testId}-text`,
-                children: text2
+                    invokeEditOnRowClick,
+                    ref: listRowRefs
+                  },
+                  index2
+                ))
               }
-            ),
-            details2 && /* @__PURE__ */ jsx(
-              "div",
+            ) : list2.items.map((item2, index2) => /* @__PURE__ */ jsx(
+              ListRow,
               {
-                className: styles$t.details,
-                "data-testid": testId && `${testId}-details`,
-                children: details2
-              }
-            )
-          ]
-        }
-      ) })
+                index: index2,
+                draggable,
+                item: item2,
+                expanding,
+                invokeEditOnRowClick,
+                ref: listRowRefs
+              },
+              index2
+            ))
+          }
+        ) })
+      ] })
     }
   );
 };
@@ -15644,7 +15242,7 @@ const useFontsReady = () => {
 const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 const useWindowWidth = () => {
   const [width2, setWidth] = useState(getWidth());
-  const resizeListener = debounce$3(() => setWidth(getWidth()), 150);
+  const resizeListener = debounce$2(() => setWidth(getWidth()), 150);
   useEffect(() => {
     window.addEventListener("resize", resizeListener);
     return () => {
@@ -48406,7 +48004,7 @@ const styles$d = {
   active: active$2,
   icon: icon$1
 };
-const TooltipIcon = memo$1(
+const TooltipIcon = memo(
   ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
@@ -48481,7 +48079,7 @@ const Sections = ({
     )
   ] }, i)) });
 };
-const SideBar = memo$1(
+const SideBar = memo(
   ({
     options,
     startOpen = false,
@@ -51107,19 +50705,19 @@ const Spacer = ({
     }
   }
 );
-const inputInTable$2 = "_inputInTable_xkoxm_1";
-const inputHover$2 = "_inputHover_xkoxm_13";
-const inputFocus$2 = "_inputFocus_xkoxm_18";
-const inputError$2 = "_inputError_xkoxm_25";
-const inputWarning$2 = "_inputWarning_xkoxm_26";
-const inputDisabled$2 = "_inputDisabled_xkoxm_61";
-const hideScrollbars$2 = "_hideScrollbars_xkoxm_67";
-const wrapper = "_wrapper_xkoxm_85";
-const bordered = "_bordered_xkoxm_93";
-const scroll = "_scroll_xkoxm_98";
-const table = "_table_xkoxm_109";
-const dragOverlay = "_dragOverlay_xkoxm_145";
-const striped = "_striped_xkoxm_194";
+const inputInTable$2 = "_inputInTable_xzacf_1";
+const inputHover$2 = "_inputHover_xzacf_13";
+const inputFocus$2 = "_inputFocus_xzacf_18";
+const inputError$2 = "_inputError_xzacf_25";
+const inputWarning$2 = "_inputWarning_xzacf_26";
+const inputDisabled$2 = "_inputDisabled_xzacf_61";
+const hideScrollbars$2 = "_hideScrollbars_xzacf_67";
+const wrapper = "_wrapper_xzacf_85";
+const bordered = "_bordered_xzacf_93";
+const scroll = "_scroll_xzacf_98";
+const table = "_table_xzacf_108";
+const dragOverlay = "_dragOverlay_xzacf_145";
+const striped = "_striped_xzacf_194";
 const styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
@@ -51225,6 +50823,36 @@ const hasActions = (rows) => rows.reduce(
 const hasRowActions = (rows, headers) => {
   return hasActions(headers) > 0 || hasActions(rows) > 0;
 };
+const TableScrollWrapper = ({
+  table: table2,
+  children
+}) => {
+  const { rows, infiniteScroll } = table2;
+  const pageSize = Math.ceil(window.innerHeight / 30);
+  const [visibleRows, setVisibleRows] = infiniteScroll ? useState(pageSize) : [rows.length, null];
+  const [hasMore, setHasMore] = infiniteScroll ? useState(visibleRows < rows.length) : [false, null];
+  const loadMoreItems = () => {
+    if (visibleRows >= rows.length && setHasMore) {
+      setHasMore(false);
+      return;
+    }
+    if (setVisibleRows) {
+      setVisibleRows(visibleRows + pageSize);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: infiniteScroll ? /* @__PURE__ */ jsx(
+    InfiniteScroll,
+    {
+      dataLength: Math.min(rows.length, visibleRows + pageSize),
+      next: loadMoreItems,
+      hasMore,
+      scrollableTarget: "scrollWrapper",
+      style: { overflow: "initial" },
+      loader: null,
+      children: children({ visibleRows })
+    }
+  ) : children({ visibleRows }) });
+};
 const clickableRow = "_clickableRow_10f34_1";
 const hoverableRow = "_hoverableRow_10f34_4";
 const rowActive = "_rowActive_10f34_4";
@@ -51938,7 +51566,6 @@ const Row = ({
   hasRowActions: hasRowActions2,
   draggableTable = false,
   columnWidths,
-  height: height2,
   testId
   //TODO: add testId
 }) => {
@@ -51995,8 +51622,7 @@ const Row = ({
     animateLayoutChanges: () => false
   });
   const style = {
-    height: height2,
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Translate.toString(transform),
     transition,
     opacity: isDragging ? 0 : void 0
   };
@@ -52054,8 +51680,6 @@ const Row = ({
         ),
         "data-error": error2 || null,
         "data-warning": warning2 || null,
-        "data-index": rowIndex,
-        "data-even": rowIndex % 2 === 0,
         style,
         children: [
           draggableTable ? getDragItem() : null,
@@ -52147,36 +51771,6 @@ const TableDragWrapper = (props) => {
     }
   );
 };
-const TableScrollWrapper = ({
-  table: table2,
-  theadRef,
-  children
-}) => {
-  var _a2, _b;
-  const { infiniteScroll = false } = table2;
-  if (!infiniteScroll) {
-    return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: children({}) });
-  }
-  const containerRef = useRef(null);
-  const MIN_ITEM_HEIGHT = 31;
-  const virtualizer = useVirtualizer({
-    count: ((_a2 = table2.rows) == null ? void 0 : _a2.length) ?? 0,
-    getScrollElement: () => containerRef.current,
-    estimateSize: () => MIN_ITEM_HEIGHT,
-    overscan: 10
-  });
-  const theadHeight = ((_b = theadRef.current) == null ? void 0 : _b.clientHeight) ?? 0;
-  const totalHeight = virtualizer.getTotalSize() + theadHeight;
-  const items = virtualizer.getVirtualItems();
-  const paddingTop = items.length > 0 ? items[0].start : 0;
-  const paddingBottom = items.length > 0 ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
-  const tableStyle = {
-    "--virtualPaddingTop": paddingTop + "px",
-    "--virtualPaddingBottom": paddingBottom + "px",
-    height: totalHeight
-  };
-  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, ref: containerRef, children: children({ virtualizer, tableStyle }) });
-};
 const Table = (props) => {
   var _a2, _b, _c, _d, _e2, _f, _g;
   const { onListReorder = () => {
@@ -52199,7 +51793,6 @@ const Table = (props) => {
     maxHeight,
     fixedWidth: width2
   } = propTable;
-  const theadRef = useRef(null);
   const tbodyRef = useRef(null);
   const headers = get$2(props, "table.headers", []);
   const columnCount = getColumnCount(propRows, headers);
@@ -52261,7 +51854,7 @@ const Table = (props) => {
         testId: testId && `${testId}-title`
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsx(
       TableDragWrapper,
       {
         colSpan,
@@ -52272,66 +51865,49 @@ const Table = (props) => {
         rowActions,
         rows,
         tbodyRef,
-        children: /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, theadRef, children: ({ virtualizer, tableStyle }) => {
-          return /* @__PURE__ */ jsxs(
-            "table",
-            {
-              className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
-              "data-testid": testId,
-              style: tableStyle,
-              children: [
-                /* @__PURE__ */ jsx("thead", { ref: theadRef, children: headers.map((row2, rowIndex) => {
-                  return /* @__PURE__ */ jsx(
-                    Row,
-                    {
-                      rowIndex,
-                      isHeader: true,
-                      row: row2,
-                      columnCount,
-                      columnWidths,
-                      colSpan,
-                      hasRowActions: rowActions,
-                      columnAlignment,
-                      columnHeaderAlignments,
-                      draggableTable: draggable
-                    },
-                    `0_${rowIndex}`
-                  );
-                }) }),
-                /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-                  Row,
-                  {
-                    rowIndex: virtualRow2.index,
-                    row: rows[virtualRow2.index],
-                    columnCount,
-                    columnWidths,
-                    colSpan,
-                    hasRowActions: rowActions,
-                    columnAlignment,
-                    draggableTable: draggable,
-                    height: virtualRow2.size
-                  },
-                  `1_${virtualRow2.index}`
-                )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
+            "data-testid": testId,
+            children: [
+              /* @__PURE__ */ jsx("thead", { children: headers.map((row2, rowIndex) => {
+                return /* @__PURE__ */ jsx(
                   Row,
                   {
-                    rowIndex: index2,
+                    rowIndex,
+                    isHeader: true,
                     row: row2,
                     columnCount,
                     columnWidths,
                     colSpan,
                     hasRowActions: rowActions,
                     columnAlignment,
+                    columnHeaderAlignments,
                     draggableTable: draggable
                   },
-                  `1_${index2}`
-                )) })
-              ]
-            }
-          );
-        } })
+                  `0_${rowIndex}`
+                );
+              }) }),
+              /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: rows.slice(0, visibleRows).map((row2, rowIndex) => /* @__PURE__ */ jsx(
+                Row,
+                {
+                  rowIndex,
+                  row: row2,
+                  columnCount,
+                  columnWidths,
+                  colSpan,
+                  hasRowActions: rowActions,
+                  columnAlignment,
+                  draggableTable: draggable
+                },
+                `1_${rowIndex}`
+              )) })
+            ]
+          }
+        )
       }
-    ),
+    ) }),
     footer2 && /* @__PURE__ */ jsx(
       Footer,
       {
@@ -55444,7 +55020,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 let refCount = 0;
 const INSTANCE_SYM = Symbol.for("__REACT_DND_CONTEXT_INSTANCE__");
-var DndProvider = /* @__PURE__ */ memo$1(function DndProvider2(_param) {
+var DndProvider = /* @__PURE__ */ memo(function DndProvider2(_param) {
   var { children } = _param, props = _objectWithoutProperties(_param, [
     "children"
   ]);
@@ -57805,7 +57381,7 @@ function useFeatures(props, visualElement2, preloadedFeatures) {
     var name_1 = featureNames[i];
     var _a2 = featureDefinitions[name_1], isEnabled = _a2.isEnabled, Component2 = _a2.Component;
     if (isEnabled(props) && Component2) {
-      features.push(React$4.createElement(Component2, __assign$3({ key: name_1 }, props, { visualElement: visualElement2 })));
+      features.push(React$4.createElement(Component2, __assign$4({ key: name_1 }, props, { visualElement: visualElement2 })));
     }
   }
   return features;
@@ -58046,7 +57622,7 @@ function useProjection(projectionId, _a2, visualElement2, ProjectionNodeConstruc
 var VisualElementHandler = (
   /** @class */
   function(_super) {
-    __extends(VisualElementHandler2, _super);
+    __extends$1(VisualElementHandler2, _super);
     function VisualElementHandler2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -58072,20 +57648,20 @@ function createMotionComponent(_a2) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props, externalRef) {
     var layoutId = useLayoutId(props);
-    props = __assign$3(__assign$3({}, props), { layoutId });
+    props = __assign$4(__assign$4({}, props), { layoutId });
     var config = useContext(MotionConfigContext);
     var features = null;
     var context2 = useCreateMotionContext(props);
     var projectionId = config.isStatic ? void 0 : useProjectionId();
     var visualState = useVisualState(props, config.isStatic);
     if (!config.isStatic && isBrowser) {
-      context2.visualElement = useVisualElement(Component2, visualState, __assign$3(__assign$3({}, config), props), createVisualElement);
+      context2.visualElement = useVisualElement(Component2, visualState, __assign$4(__assign$4({}, config), props), createVisualElement);
       useProjection(projectionId, props, context2.visualElement, projectionNodeConstructor || featureDefinitions.projectionNodeConstructor);
       features = useFeatures(props, context2.visualElement, preloadedFeatures);
     }
     return React$4.createElement(
       VisualElementHandler,
-      { visualElement: context2.visualElement, props: __assign$3(__assign$3({}, config), props) },
+      { visualElement: context2.visualElement, props: __assign$4(__assign$4({}, config), props) },
       features,
       React$4.createElement(MotionContext.Provider, { value: context2 }, useRender(Component2, props, projectionId, useMotionRef(visualState, context2.visualElement, externalRef), visualState, config.isStatic, context2.visualElement))
     );
@@ -58411,7 +57987,7 @@ const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v
   const functions = v2.match(functionRegex);
   return functions ? functions.map(applyDefaultFilter).join(" ") : v2;
 } });
-var int = __assign$3(__assign$3({}, number), { transform: Math.round });
+var int = __assign$4(__assign$4({}, number), { transform: Math.round });
 var numberValueTypes = {
   // Border props
   borderWidth: px,
@@ -58541,7 +58117,7 @@ function useInitialMotionValues(_a2, visualState, isStatic) {
     var state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
     var vars = state.vars, style = state.style;
-    return __assign$3(__assign$3({}, vars), style);
+    return __assign$4(__assign$4({}, vars), style);
   }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
@@ -58699,18 +58275,18 @@ function buildSVGAttrs(state, _a2, options, transformTemplate) {
   }
 }
 var createSvgRenderState = function() {
-  return __assign$3(__assign$3({}, createHtmlRenderState()), { attrs: {} });
+  return __assign$4(__assign$4({}, createHtmlRenderState()), { attrs: {} });
 };
 function useSVGProps(props, visualState) {
   var visualProps = useMemo(function() {
     var state = createSvgRenderState();
     buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
-    return __assign$3(__assign$3({}, state.attrs), { style: __assign$3({}, state.style) });
+    return __assign$4(__assign$4({}, state.attrs), { style: __assign$4({}, state.style) });
   }, [visualState]);
   if (props.style) {
     var rawStyles = {};
     copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = __assign$3(__assign$3({}, rawStyles), visualProps.style);
+    visualProps.style = __assign$4(__assign$4({}, rawStyles), visualProps.style);
   }
   return visualProps;
 }
@@ -58723,7 +58299,7 @@ function createUseRender(forwardMotionProps) {
     var useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
     var visualProps = useVisualProps(props, latestValues, isStatic);
     var filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
-    var elementProps = __assign$3(__assign$3(__assign$3({}, filteredProps), visualProps), { ref });
+    var elementProps = __assign$4(__assign$4(__assign$4({}, filteredProps), visualProps), { ref });
     if (projectionId) {
       elementProps["data-projection-id"] = projectionId;
     }
@@ -58900,7 +58476,7 @@ var htmlMotionConfig = {
 function createDomMotionConfig(Component2, _a2, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
   var _b = _a2.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;
   var baseConfig = isSVGComponent(Component2) ? svgMotionConfig : htmlMotionConfig;
-  return __assign$3(__assign$3({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
+  return __assign$4(__assign$4({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement, projectionNodeConstructor, Component: Component2 });
 }
 var AnimationType;
 (function(AnimationType2) {
@@ -59987,7 +59563,7 @@ function initIntersectionObserver(_a2) {
   var rootObservers = observers.get(lookupRoot);
   var key2 = JSON.stringify(options);
   if (!rootObservers[key2]) {
-    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$3({ root: root2 }, options));
+    rootObservers[key2] = new IntersectionObserver(fireAllObserverCallbacks, __assign$4({ root: root2 }, options));
   }
   return rootObservers[key2];
 }
@@ -60205,9 +59781,9 @@ var getDefaultTransition = function(valueKey, to2) {
   } else {
     transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
   }
-  return __assign$3({ to: to2 }, transitionFactory(to2));
+  return __assign$4({ to: to2 }, transitionFactory(to2));
 };
-var defaultValueTypes = __assign$3(__assign$3({}, numberValueTypes), {
+var defaultValueTypes = __assign$4(__assign$4({}, numberValueTypes), {
   // Color props
   color,
   backgroundColor: color,
@@ -60249,7 +59825,7 @@ function isTransitionDefined(_a2) {
 var legacyRepeatWarning = false;
 function convertTransitionToAnimationOptions(_a2) {
   var ease = _a2.ease, times = _a2.times, yoyo = _a2.yoyo, flip = _a2.flip, loop = _a2.loop, transition = __rest$1(_a2, ["ease", "times", "yoyo", "flip", "loop"]);
-  var options = __assign$3({}, transition);
+  var options = __assign$4({}, transition);
   if (times)
     options["offset"] = times;
   if (transition.duration)
@@ -60296,9 +59872,9 @@ function getPopmotionAnimationOptions(transition, options, key2) {
   }
   hydrateKeyframes(options);
   if (!isTransitionDefined(transition)) {
-    transition = __assign$3(__assign$3({}, transition), getDefaultTransition(key2, options.to));
+    transition = __assign$4(__assign$4({}, transition), getDefaultTransition(key2, options.to));
   }
-  return __assign$3(__assign$3({}, options), convertTransitionToAnimationOptions(transition));
+  return __assign$4(__assign$4({}, options), convertTransitionToAnimationOptions(transition));
 }
 function getAnimation(key2, value, target, transition, onComplete) {
   var _a2;
@@ -60324,7 +59900,7 @@ function getAnimation(key2, value, target, transition, onComplete) {
         return value.set(v2);
       }
     };
-    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(__assign$3(__assign$3({}, options), valueTransition)) : animate$1(__assign$3(__assign$3({}, getPopmotionAnimationOptions(valueTransition, options, key2)), { onUpdate: function(v2) {
+    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(__assign$4(__assign$4({}, options), valueTransition)) : animate$1(__assign$4(__assign$4({}, getPopmotionAnimationOptions(valueTransition, options, key2)), { onUpdate: function(v2) {
       var _a3;
       options.onUpdate(v2);
       (_a3 = valueTransition.onUpdate) === null || _a3 === void 0 ? void 0 : _a3.call(valueTransition, v2);
@@ -60577,7 +60153,7 @@ function setTarget(visualElement2, definition) {
   var _a2 = resolved ? visualElement2.makeTargetAnimatable(resolved, false) : {}, _b = _a2.transitionEnd, transitionEnd = _b === void 0 ? {} : _b;
   _a2.transition;
   var target = __rest$1(_a2, ["transitionEnd", "transition"]);
-  target = __assign$3(__assign$3({}, target), transitionEnd);
+  target = __assign$4(__assign$4({}, target), transitionEnd);
   for (var key2 in target) {
     var value = resolveFinalValueInKeyframes(target[key2]);
     setMotionValue(visualElement2, key2, value);
@@ -60695,9 +60271,9 @@ function animateTarget(visualElement2, definition, _a2) {
     if (!value || valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key2)) {
       continue;
     }
-    var valueTransition = __assign$3({ delay }, transition);
+    var valueTransition = __assign$4({ delay }, transition);
     if (visualElement2.shouldReduceMotion && isTransformProp(key2)) {
-      valueTransition = __assign$3(__assign$3({}, valueTransition), { type: false, delay: 0 });
+      valueTransition = __assign$4(__assign$4({}, valueTransition), { type: false, delay: 0 });
     }
     var animation = startAnimation(key2, value, valueTarget, valueTransition);
     animations2.push(animation);
@@ -60730,7 +60306,7 @@ function animateChildren(visualElement2, variant, delayChildren, staggerChildren
     return maxStaggerDuration - i * staggerChildren;
   };
   Array.from(visualElement2.variantChildren).sort(sortByTreeOrder).forEach(function(child, i) {
-    animations2.push(animateVariant(child, variant, __assign$3(__assign$3({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
+    animations2.push(animateVariant(child, variant, __assign$4(__assign$4({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
       return child.notifyAnimationComplete(variant);
     }));
   });
@@ -60774,7 +60350,7 @@ function createAnimationState(visualElement2) {
     if (resolved) {
       resolved.transition;
       var transitionEnd = resolved.transitionEnd, target = __rest$1(resolved, ["transition", "transitionEnd"]);
-      acc = __assign$3(__assign$3(__assign$3({}, acc), target), transitionEnd);
+      acc = __assign$4(__assign$4(__assign$4({}, acc), target), transitionEnd);
     }
     return acc;
   };
@@ -60804,7 +60380,7 @@ function createAnimationState(visualElement2) {
       if (isInherited && isInitialRender && visualElement2.manuallyAnimateOnMount) {
         isInherited = false;
       }
-      typeState.protectedKeys = __assign$3({}, encounteredKeys);
+      typeState.protectedKeys = __assign$4({}, encounteredKeys);
       if (
         // If it isn't active and hasn't *just* been set as inactive
         !typeState.isActive && activeDelta === null || // If we didn't and don't have any defined prop for this animation type
@@ -60822,7 +60398,7 @@ function createAnimationState(visualElement2) {
       if (activeDelta === false)
         resolvedValues = {};
       var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
-      var allKeys = __assign$3(__assign$3({}, prevResolvedValues), resolvedValues);
+      var allKeys = __assign$4(__assign$4({}, prevResolvedValues), resolvedValues);
       var markToAnimate = function(key3) {
         shouldAnimateType = true;
         removedKeys.delete(key3);
@@ -60854,7 +60430,7 @@ function createAnimationState(visualElement2) {
       typeState.prevProp = prop;
       typeState.prevResolvedValues = resolvedValues;
       if (typeState.isActive) {
-        encounteredKeys = __assign$3(__assign$3({}, encounteredKeys), resolvedValues);
+        encounteredKeys = __assign$4(__assign$4({}, encounteredKeys), resolvedValues);
       }
       if (isInitialRender && visualElement2.blockInitialAnimation) {
         shouldAnimateType = false;
@@ -60863,7 +60439,7 @@ function createAnimationState(visualElement2) {
         animations2.push.apply(animations2, __spreadArray$2([], __read(definitionList.map(function(animation) {
           return {
             animation,
-            options: __assign$3({ type }, options)
+            options: __assign$4({ type }, options)
           };
         })), false));
       }
@@ -60871,7 +60447,7 @@ function createAnimationState(visualElement2) {
     for (var i = 0; i < numAnimationTypes; i++) {
       _loop_1(i);
     }
-    allAnimatedKeys = __assign$3({}, encounteredKeys);
+    allAnimatedKeys = __assign$4({}, encounteredKeys);
     if (removedKeys.size) {
       var fallbackAnimation_1 = {};
       removedKeys.forEach(function(key2) {
@@ -60979,7 +60555,7 @@ var PanSession = (
           return;
         var point2 = info3.point;
         var timestamp2 = getFrameData().timestamp;
-        _this.history.push(__assign$3(__assign$3({}, point2), { timestamp: timestamp2 }));
+        _this.history.push(__assign$4(__assign$4({}, point2), { timestamp: timestamp2 }));
         var _a3 = _this.handlers, onStart = _a3.onStart, onMove = _a3.onMove;
         if (!isPanStarted) {
           onStart && onStart(_this.lastMoveEvent, info3);
@@ -61013,7 +60589,7 @@ var PanSession = (
       var initialInfo = transformPoint(info2, this.transformPagePoint);
       var point = initialInfo.point;
       var timestamp = getFrameData().timestamp;
-      this.history = [__assign$3(__assign$3({}, point), { timestamp })];
+      this.history = [__assign$4(__assign$4({}, point), { timestamp })];
       var onSessionStart = handlers2.onSessionStart;
       onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
       this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
@@ -61534,7 +61110,7 @@ var VisualElementDragControls = (
           transition = { min: 0, max: 0 };
         var bounceStiffness = dragElastic ? 200 : 1e6;
         var bounceDamping = dragElastic ? 40 : 1e7;
-        var inertia2 = __assign$3(__assign$3({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+        var inertia2 = __assign$4(__assign$4({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness, bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
         return _this.startAxisValueAnimation(axis, inertia2);
       });
       return Promise.all(momentumAnimations).then(onDragTransitionEnd);
@@ -61645,7 +61221,7 @@ var VisualElementDragControls = (
     VisualElementDragControls2.prototype.getProps = function() {
       var props = this.visualElement.getProps();
       var _a2 = props.drag, drag2 = _a2 === void 0 ? false : _a2, _b = props.dragDirectionLock, dragDirectionLock = _b === void 0 ? false : _b, _c = props.dragPropagation, dragPropagation = _c === void 0 ? false : _c, _d = props.dragConstraints, dragConstraints = _d === void 0 ? false : _d, _e2 = props.dragElastic, dragElastic = _e2 === void 0 ? defaultElastic : _e2, _f = props.dragMomentum, dragMomentum = _f === void 0 ? true : _f;
-      return __assign$3(__assign$3({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
+      return __assign$4(__assign$4({}, props), { drag: drag2, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum });
     };
     return VisualElementDragControls2;
   }()
@@ -61802,7 +61378,7 @@ var visualElement = function(_a2) {
     var values2 = /* @__PURE__ */ new Map();
     var valueSubscriptions = /* @__PURE__ */ new Map();
     var prevMotionValues = {};
-    var baseTarget = __assign$3({}, latestValues);
+    var baseTarget = __assign$4({}, latestValues);
     var removeFromVariantTree;
     function render2() {
       if (!instance || !isMounted)
@@ -61836,7 +61412,7 @@ var visualElement = function(_a2) {
     }
     var isControllingVariants = checkIfControllingVariants(props);
     var isVariantNode = checkIfVariantNode(props);
-    var element = __assign$3(__assign$3({
+    var element = __assign$4(__assign$4({
       treeType,
       /**
        * This is a mirror of the internal instance prop, which keeps
@@ -62201,7 +61777,7 @@ function resolveCSSVariables(visualElement2, _a2, transitionEnd) {
   if (!(element instanceof Element))
     return { target, transitionEnd };
   if (transitionEnd) {
-    transitionEnd = __assign$3({}, transitionEnd);
+    transitionEnd = __assign$4({}, transitionEnd);
   }
   visualElement2.forEachValue(function(value) {
     var current2 = value.get();
@@ -62356,8 +61932,8 @@ var checkAndConvertChangedValueTypes = function(visualElement2, target, origin,
   if (transitionEnd === void 0) {
     transitionEnd = {};
   }
-  target = __assign$3({}, target);
-  transitionEnd = __assign$3({}, transitionEnd);
+  target = __assign$4({}, target);
+  transitionEnd = __assign$4({}, transitionEnd);
   var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
   var removedTransformValues = [];
   var hasAttemptedToRemoveTransformValues = false;
@@ -62510,7 +62086,7 @@ var htmlConfig = {
       transitionEnd = parsed.transitionEnd;
       target = parsed.target;
     }
-    return __assign$3({ transition, transitionEnd }, target);
+    return __assign$4({ transition, transitionEnd }, target);
   },
   scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
   build: function(element, renderState, latestValues, options, props) {
@@ -62522,7 +62098,7 @@ var htmlConfig = {
   render: renderHTML
 };
 var htmlVisualElement = visualElement(htmlConfig);
-var svgVisualElement = visualElement(__assign$3(__assign$3({}, htmlConfig), { getBaseTarget: function(props, key2) {
+var svgVisualElement = visualElement(__assign$4(__assign$4({}, htmlConfig), { getBaseTarget: function(props, key2) {
   return props[key2];
 }, readValueFromInstance: function(domElement, key2) {
   var _a2;
@@ -62600,7 +62176,7 @@ var correctBoxShadow = {
 var MeasureLayoutWithContext = (
   /** @class */
   function(_super) {
-    __extends(MeasureLayoutWithContext2, _super);
+    __extends$1(MeasureLayoutWithContext2, _super);
     function MeasureLayoutWithContext2() {
       return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -62619,7 +62195,7 @@ var MeasureLayoutWithContext = (
         projection.addEventListener("animationComplete", function() {
           _this.safeToRemove();
         });
-        projection.setOptions(__assign$3(__assign$3({}, projection.options), { onExitComplete: function() {
+        projection.setOptions(__assign$4(__assign$4({}, projection.options), { onExitComplete: function() {
           return _this.safeToRemove();
         } }));
       }
@@ -62684,10 +62260,10 @@ var MeasureLayoutWithContext = (
 function MeasureLayout(props) {
   var _a2 = __read(usePresence(), 2), isPresent = _a2[0], safeToRemove = _a2[1];
   var layoutGroup = useContext(LayoutGroupContext);
-  return React__default.createElement(MeasureLayoutWithContext, __assign$3({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
+  return React__default.createElement(MeasureLayoutWithContext, __assign$4({}, props, { layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove }));
 }
 var defaultScaleCorrectors = {
-  borderRadius: __assign$3(__assign$3({}, correctBorderRadius), { applyTo: [
+  borderRadius: __assign$4(__assign$4({}, correctBorderRadius), { applyTo: [
     "borderTopLeftRadius",
     "borderTopRightRadius",
     "borderBottomLeftRadius",
@@ -63110,7 +62686,7 @@ function createProjectionNode(_a2) {
                 _this.resumingFrom.resumingFrom = void 0;
               }
               _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-              var animationOptions = __assign$3(__assign$3({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+              var animationOptions = __assign$4(__assign$4({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
               if (visualElement2.shouldReduceMotion) {
                 animationOptions.delay = 0;
                 animationOptions.type = false;
@@ -63364,7 +62940,7 @@ function createProjectionNode(_a2) {
       };
       ProjectionNode.prototype.setOptions = function(options) {
         var _a3;
-        this.options = __assign$3(__assign$3(__assign$3({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
+        this.options = __assign$4(__assign$4(__assign$4({}, this.options), options), { crossfade: (_a3 = options.crossfade) !== null && _a3 !== void 0 ? _a3 : true });
       };
       ProjectionNode.prototype.clearMeasurements = function() {
         this.scroll = void 0;
@@ -63482,7 +63058,7 @@ function createProjectionNode(_a2) {
         }
         var snapshot = this.snapshot;
         var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-        var mixedValues = __assign$3({}, this.latestValues);
+        var mixedValues = __assign$4({}, this.latestValues);
         var targetDelta = createDelta();
         this.relativeTarget = this.relativeTargetOrigin = void 0;
         this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
@@ -63525,7 +63101,7 @@ function createProjectionNode(_a2) {
         }
         this.pendingAnimation = sync.update(function() {
           globalProjectionState.hasAnimatedSinceResize = true;
-          _this.currentAnimation = animate(0, animationTarget, __assign$3(__assign$3({}, options), { onUpdate: function(latest) {
+          _this.currentAnimation = animate(0, animationTarget, __assign$4(__assign$4({}, options), { onUpdate: function(latest) {
             var _a4;
             _this.mixTargetDelta(latest);
             (_a4 = options.onUpdate) === null || _a4 === void 0 ? void 0 : _a4.call(options, latest);
@@ -63893,7 +63469,7 @@ var HTMLProjectionNode = createProjectionNode({
     return Boolean(window.getComputedStyle(instance).position === "fixed");
   }
 });
-var featureBundle = __assign$3(__assign$3(__assign$3(__assign$3({}, animations), gestureAnimations), drag), layoutFeatures);
+var featureBundle = __assign$4(__assign$4(__assign$4(__assign$4({}, animations), gestureAnimations), drag), layoutFeatures);
 var motion = /* @__PURE__ */ createMotionProxy(function(Component2, config) {
   return createDomMotionConfig(Component2, config, featureBundle, createDomVisualElement, HTMLProjectionNode);
 });
@@ -66969,6 +66545,41 @@ const SmartUploadModal = ({
     }
   ) });
 };
+const SettingField = ({
+  helpText,
+  active: active2 = true,
+  children,
+  noPermission = false,
+  selectedOption,
+  handleSelectChange
+}) => {
+  const options = [
+    { label: "All users", value: "all_users" },
+    { label: "Admin only", value: "superusers_admin" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+      children,
+      !noPermission && /* @__PURE__ */ jsx(
+        Select,
+        {
+          small: true,
+          searchable: false,
+          name: "userType",
+          options,
+          value: selectedOption,
+          disabled: !active2,
+          onChange: handleSelectChange ? (e2) => handleSelectChange(
+            e2.target.value
+          ) : void 0,
+          "aria-label": "Select user type",
+          width: "auto"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Text, { muted: true, children: helpText })
+  ] });
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -67032,6 +66643,7 @@ export {
   RichTextInput,
   Row$1 as Row,
   Select,
+  SettingField,
   SideBar,
   Slider,
   SmartUploadModal,