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

package/dist/index.js

@@ -14,7 +14,7 @@ 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 * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
-import ReactDOM, { createPortal, flushSync as flushSync$1, unstable_batchedUpdates, render } from "react-dom";
+import 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 { 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 : {};
@@ -9501,1132 +9501,376 @@ const InputGroupAddon = ({
   })();
   return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
-function memo(getDeps, fn, opts) {
-  let deps = opts.initialDeps ?? [];
-  let result;
-  return () => {
-    var _a2, _b, _c, _d;
-    let depTime;
-    if (opts.key && ((_a2 = opts.debug) == null ? void 0 : _a2.call(opts))) depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index2) => deps[index2] !== dep);
-    if (!depsChanged) {
-      return result;
-    }
-    deps = newDeps;
-    let resultTime;
-    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
-    result = fn(...newDeps);
-    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
-      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-      const resultFpsPercentage = resultEndTime / 16;
-      const pad = (str, num) => {
-        str = String(str);
-        while (str.length < num) {
-          str = " " + str;
-        }
-        return str;
-      };
-      console.info(
-        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
-        `
-            font-size: .6rem;
-            font-weight: bold;
-            color: hsl(${Math.max(
-          0,
-          Math.min(120 - 120 * resultFpsPercentage, 120)
-        )}deg 100% 31%);`,
-        opts == null ? void 0 : opts.key
-      );
-    }
-    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
-    return result;
-  };
-}
-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 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";
+const listStyles = {
+  inputInTable: inputInTable$8,
+  inputHover: inputHover$8,
+  inputFocus: inputFocus$8,
+  inputError: inputError$8,
+  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,
+  itemHeader,
+  narrow,
+  stickyHeader,
+  title: title$3,
+  name,
+  iconTooltipMargin,
+  bold,
+  toggleNarrow,
+  drag: drag$1,
+  dragOverlay: dragOverlay$1,
+  listContent,
+  action,
+  active: active$3,
+  indented,
+  disabled: disabled$5,
+  label: label$6,
+  details: details$2,
+  metadata,
+  itemContent,
+  indentIcon,
+  expandIcon,
+  expanded,
+  right: right$4,
+  actions,
+  hideScrollbar,
+  noPointerEvents,
+  virtualRows
 };
-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 ToggleNarrow = ({
+  toggleNarrow: toggleNarrow2,
+  onClickToggleNarrow
+}) => {
+  return toggleNarrow2 ? /* @__PURE__ */ jsx("a", { className: listStyles.toggleNarrow, onClick: onClickToggleNarrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_LEFT }) }) : null;
 };
-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;
+const ListHeading = forwardRef(
+  ({
+    name: name2,
+    actions: actions2 = [],
+    toggleNarrow: toggleNarrow2 = false,
+    onToggleNarrow = () => {
+    },
+    stickyHeader: stickyHeader2
+  }, listHeadingRef) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: listHeadingRef,
+        className: cx$2(listStyles.header, stickyHeader2 ? listStyles.stickyHeader : ""),
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleNarrow,
+            {
+              toggleNarrow: toggleNarrow2,
+              onClickToggleNarrow: onToggleNarrow
+            }
+          ),
+          name2 && /* @__PURE__ */ jsx("div", { className: listStyles.headerTitle, children: /* @__PURE__ */ jsx(Heading$2, { top: true, marginBottom: 0, children: name2 }) }),
+          /* @__PURE__ */ jsx("div", { className: listStyles.right, children: /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) }) })
+        ]
       }
-    }
-    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;
+);
+function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
   }
-  let offset = 0;
-  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce$2(
-    targetWindow,
-    () => {
-      cb2(offset, false);
+  return useMemo(
+    () => (node2) => {
+      refs.forEach((ref) => ref(node2));
     },
-    instance.options.isScrollingResetDelay
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs
   );
-  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;
+}
+const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function isWindow(element) {
+  const elementString = Object.prototype.toString.call(element);
+  return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
+  elementString === "[object global]";
+}
+function isNode(node2) {
+  return "nodeType" in node2;
+}
+function getWindow(target) {
+  var _target$ownerDocument, _target$ownerDocument2;
+  if (!target) {
+    return window;
+  }
+  if (isWindow(target)) {
+    return target;
+  }
+  if (!isNode(target)) {
+    return window;
+  }
+  return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
+}
+function isDocument(node2) {
+  const {
+    Document
+  } = getWindow(node2);
+  return node2 instanceof Document;
+}
+function isHTMLElement(node2) {
+  if (isWindow(node2)) {
+    return false;
+  }
+  return node2 instanceof getWindow(node2).HTMLElement;
+}
+function isSVGElement(node2) {
+  return node2 instanceof getWindow(node2).SVGElement;
+}
+function getOwnerDocument(target) {
+  if (!target) {
+    return document;
+  }
+  if (isWindow(target)) {
+    return target.document;
+  }
+  if (!isNode(target)) {
+    return document;
+  }
+  if (isDocument(target)) {
+    return target;
+  }
+  if (isHTMLElement(target) || isSVGElement(target)) {
+    return target.ownerDocument;
+  }
+  return document;
+}
+const useIsomorphicLayoutEffect$5 = canUseDOM ? useLayoutEffect$1 : useEffect;
+function useEvent$1(handler) {
+  const handlerRef = useRef(handler);
+  useIsomorphicLayoutEffect$5(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback(function() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
+  }, []);
+}
+function useInterval() {
+  const intervalRef = useRef(null);
+  const set2 = useCallback((listener, duration) => {
+    intervalRef.current = setInterval(listener, duration);
+  }, []);
+  const clear = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
     }
+  }, []);
+  return [set2, clear];
+}
+function useLatestValue(value, dependencies) {
+  if (dependencies === void 0) {
+    dependencies = [value];
   }
-  return Math.round(
-    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
+  const valueRef = useRef(value);
+  useIsomorphicLayoutEffect$5(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+    }
+  }, dependencies);
+  return valueRef;
+}
+function useLazyMemo(callback, dependencies) {
+  const valueRef = useRef();
+  return useMemo(
+    () => {
+      const newValue = callback(valueRef.current);
+      valueRef.current = newValue;
+      return newValue;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...dependencies]
   );
-};
-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;
+}
+function useNodeRef(onChange) {
+  const onChangeHandler = useEvent$1(onChange);
+  const node2 = useRef(null);
+  const setNodeRef = useCallback(
+    (element) => {
+      if (element !== node2.current) {
+        onChangeHandler == null ? void 0 : onChangeHandler(element, node2.current);
+      }
+      node2.current = element;
+    },
+    //eslint-disable-next-line
+    []
+  );
+  return [node2, setNodeRef];
+}
+function usePrevious$3(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+let ids = {};
+function useUniqueId(prefix2, value) {
+  return useMemo(() => {
+    if (value) {
+      return value;
+    }
+    const id2 = ids[prefix2] == null ? 0 : ids[prefix2] + 1;
+    ids[prefix2] = id2;
+    return prefix2 + "-" + id2;
+  }, [prefix2, value]);
+}
+function createAdjustmentFn(modifier) {
+  return function(object2) {
+    for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      adjustments[_key - 1] = arguments[_key];
+    }
+    return adjustments.reduce((accumulator, adjustment) => {
+      const entries2 = Object.entries(adjustment);
+      for (const [key2, valueAdjustment] of entries2) {
+        const value = accumulator[key2];
+        if (value != null) {
+          accumulator[key2] = value + modifier * valueAdjustment;
         }
-        return _ro = new this.targetWindow.ResizeObserver((entries2) => {
-          entries2.forEach((entry) => {
-            this._measureElement(entry.target, entry);
-          });
-        });
+      }
+      return accumulator;
+    }, {
+      ...object2
+    });
+  };
+}
+const add$1 = /* @__PURE__ */ createAdjustmentFn(1);
+const subtract$1 = /* @__PURE__ */ createAdjustmentFn(-1);
+function hasViewportRelativeCoordinates(event) {
+  return "clientX" in event && "clientY" in event;
+}
+function isKeyboardEvent(event) {
+  if (!event) {
+    return false;
+  }
+  const {
+    KeyboardEvent: KeyboardEvent2
+  } = getWindow(event.target);
+  return KeyboardEvent2 && event instanceof KeyboardEvent2;
+}
+function isTouchEvent$2(event) {
+  if (!event) {
+    return false;
+  }
+  const {
+    TouchEvent
+  } = getWindow(event.target);
+  return TouchEvent && event instanceof TouchEvent;
+}
+function getEventCoordinates(event) {
+  if (isTouchEvent$2(event)) {
+    if (event.touches && event.touches.length) {
+      const {
+        clientX: x2,
+        clientY: y2
+      } = event.touches[0];
+      return {
+        x: x2,
+        y: y2
       };
+    } else if (event.changedTouches && event.changedTouches.length) {
+      const {
+        clientX: x2,
+        clientY: y2
+      } = event.changedTouches[0];
       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);
-        }
+        x: x2,
+        y: y2
       };
-    })();
-    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;
+    }
+  }
+  if (hasViewportRelativeCoordinates(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
     };
-    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 null;
+}
+const CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
       }
-      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
+      const {
+        x: x2,
+        y: y2
+      } = transform;
+      return "translate3d(" + (x2 ? Math.round(x2) : 0) + "px, " + (y2 ? Math.round(y2) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
       }
-    );
-    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$5 = typeof document !== "undefined" ? React$4.useLayoutEffect : React$4.useEffect;
-function useVirtualizerBase(options) {
-  const rerender = React$4.useReducer(() => ({}), {})[1];
-  const resolvedOptions = {
-    ...options,
-    onChange: (instance2, sync2) => {
-      var _a2;
-      if (sync2) {
-        flushSync$1(rerender);
-      } else {
-        rerender();
-      }
-      (_a2 = options.onChange) == null ? void 0 : _a2.call(options, instance2, sync2);
-    }
-  };
-  const [instance] = React$4.useState(
-    () => new Virtualizer(resolvedOptions)
-  );
-  instance.setOptions(resolvedOptions);
-  React$4.useEffect(() => {
-    return instance._didMount();
-  }, []);
-  useIsomorphicLayoutEffect$5(() => {
-    return instance._willUpdate();
-  });
-  return instance;
-}
-function useVirtualizer(options) {
-  return useVirtualizerBase({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options
-  });
-}
-const inputInTable$8 = "_inputInTable_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";
-const listStyles = {
-  inputInTable: inputInTable$8,
-  inputHover: inputHover$8,
-  inputFocus: inputFocus$8,
-  inputError: inputError$8,
-  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,
-  itemHeader,
-  narrow,
-  stickyHeader,
-  title: title$3,
-  name,
-  iconTooltipMargin,
-  bold,
-  toggleNarrow,
-  drag: drag$1,
-  dragOverlay: dragOverlay$1,
-  listContent,
-  action,
-  active: active$3,
-  indented,
-  disabled: disabled$5,
-  label: label$6,
-  details: details$2,
-  metadata,
-  itemContent,
-  indentIcon,
-  expandIcon,
-  expanded,
-  right: right$4,
-  actions,
-  hideScrollbar,
-  noPointerEvents,
-  virtualRows
-};
-const ToggleNarrow = ({
-  toggleNarrow: toggleNarrow2,
-  onClickToggleNarrow
-}) => {
-  return toggleNarrow2 ? /* @__PURE__ */ jsx("a", { className: listStyles.toggleNarrow, onClick: onClickToggleNarrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_LEFT }) }) : null;
-};
-const ListHeading = forwardRef(
-  ({
-    name: name2,
-    actions: actions2 = [],
-    toggleNarrow: toggleNarrow2 = false,
-    onToggleNarrow = () => {
-    },
-    stickyHeader: stickyHeader2
-  }, listHeadingRef) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: listHeadingRef,
-        className: cx$2(listStyles.header, stickyHeader2 ? listStyles.stickyHeader : ""),
-        children: [
-          /* @__PURE__ */ jsx(
-            ToggleNarrow,
-            {
-              toggleNarrow: toggleNarrow2,
-              onClickToggleNarrow: onToggleNarrow
-            }
-          ),
-          name2 && /* @__PURE__ */ jsx("div", { className: listStyles.headerTitle, children: /* @__PURE__ */ jsx(Heading$2, { top: true, marginBottom: 0, children: name2 }) }),
-          /* @__PURE__ */ jsx("div", { className: listStyles.right, children: /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) }) })
-        ]
-      }
-    );
-  }
-);
-function useCombinedRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-  return useMemo(
-    () => (node2) => {
-      refs.forEach((ref) => ref(node2));
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs
-  );
-}
-const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-function isWindow(element) {
-  const elementString = Object.prototype.toString.call(element);
-  return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
-  elementString === "[object global]";
-}
-function isNode(node2) {
-  return "nodeType" in node2;
-}
-function getWindow(target) {
-  var _target$ownerDocument, _target$ownerDocument2;
-  if (!target) {
-    return window;
-  }
-  if (isWindow(target)) {
-    return target;
-  }
-  if (!isNode(target)) {
-    return window;
-  }
-  return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
-}
-function isDocument(node2) {
-  const {
-    Document
-  } = getWindow(node2);
-  return node2 instanceof Document;
-}
-function isHTMLElement(node2) {
-  if (isWindow(node2)) {
-    return false;
-  }
-  return node2 instanceof getWindow(node2).HTMLElement;
-}
-function isSVGElement(node2) {
-  return node2 instanceof getWindow(node2).SVGElement;
-}
-function getOwnerDocument(target) {
-  if (!target) {
-    return document;
-  }
-  if (isWindow(target)) {
-    return target.document;
-  }
-  if (!isNode(target)) {
-    return document;
-  }
-  if (isDocument(target)) {
-    return target;
-  }
-  if (isHTMLElement(target) || isSVGElement(target)) {
-    return target.ownerDocument;
-  }
-  return document;
-}
-const useIsomorphicLayoutEffect$4 = canUseDOM ? useLayoutEffect$1 : useEffect;
-function useEvent$1(handler) {
-  const handlerRef = useRef(handler);
-  useIsomorphicLayoutEffect$4(() => {
-    handlerRef.current = handler;
-  });
-  return useCallback(function() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
-  }, []);
-}
-function useInterval() {
-  const intervalRef = useRef(null);
-  const set2 = useCallback((listener, duration) => {
-    intervalRef.current = setInterval(listener, duration);
-  }, []);
-  const clear = useCallback(() => {
-    if (intervalRef.current !== null) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-  }, []);
-  return [set2, clear];
-}
-function useLatestValue(value, dependencies) {
-  if (dependencies === void 0) {
-    dependencies = [value];
-  }
-  const valueRef = useRef(value);
-  useIsomorphicLayoutEffect$4(() => {
-    if (valueRef.current !== value) {
-      valueRef.current = value;
-    }
-  }, dependencies);
-  return valueRef;
-}
-function useLazyMemo(callback, dependencies) {
-  const valueRef = useRef();
-  return useMemo(
-    () => {
-      const newValue = callback(valueRef.current);
-      valueRef.current = newValue;
-      return newValue;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...dependencies]
-  );
-}
-function useNodeRef(onChange) {
-  const onChangeHandler = useEvent$1(onChange);
-  const node2 = useRef(null);
-  const setNodeRef = useCallback(
-    (element) => {
-      if (element !== node2.current) {
-        onChangeHandler == null ? void 0 : onChangeHandler(element, node2.current);
-      }
-      node2.current = element;
-    },
-    //eslint-disable-next-line
-    []
-  );
-  return [node2, setNodeRef];
-}
-function usePrevious$3(value) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-let ids = {};
-function useUniqueId(prefix2, value) {
-  return useMemo(() => {
-    if (value) {
-      return value;
-    }
-    const id2 = ids[prefix2] == null ? 0 : ids[prefix2] + 1;
-    ids[prefix2] = id2;
-    return prefix2 + "-" + id2;
-  }, [prefix2, value]);
-}
-function createAdjustmentFn(modifier) {
-  return function(object2) {
-    for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      adjustments[_key - 1] = arguments[_key];
-    }
-    return adjustments.reduce((accumulator, adjustment) => {
-      const entries2 = Object.entries(adjustment);
-      for (const [key2, valueAdjustment] of entries2) {
-        const value = accumulator[key2];
-        if (value != null) {
-          accumulator[key2] = value + modifier * valueAdjustment;
-        }
-      }
-      return accumulator;
-    }, {
-      ...object2
-    });
-  };
-}
-const add$1 = /* @__PURE__ */ createAdjustmentFn(1);
-const subtract$1 = /* @__PURE__ */ createAdjustmentFn(-1);
-function hasViewportRelativeCoordinates(event) {
-  return "clientX" in event && "clientY" in event;
-}
-function isKeyboardEvent(event) {
-  if (!event) {
-    return false;
-  }
-  const {
-    KeyboardEvent: KeyboardEvent2
-  } = getWindow(event.target);
-  return KeyboardEvent2 && event instanceof KeyboardEvent2;
-}
-function isTouchEvent$2(event) {
-  if (!event) {
-    return false;
-  }
-  const {
-    TouchEvent
-  } = getWindow(event.target);
-  return TouchEvent && event instanceof TouchEvent;
-}
-function getEventCoordinates(event) {
-  if (isTouchEvent$2(event)) {
-    if (event.touches && event.touches.length) {
-      const {
-        clientX: x2,
-        clientY: y2
-      } = event.touches[0];
-      return {
-        x: x2,
-        y: y2
-      };
-    } else if (event.changedTouches && event.changedTouches.length) {
-      const {
-        clientX: x2,
-        clientY: y2
-      } = event.changedTouches[0];
-      return {
-        x: x2,
-        y: y2
-      };
-    }
-  }
-  if (hasViewportRelativeCoordinates(event)) {
-    return {
-      x: event.clientX,
-      y: event.clientY
-    };
-  }
-  return null;
-}
-const CSS = /* @__PURE__ */ Object.freeze({
-  Translate: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      const {
-        x: x2,
-        y: y2
-      } = transform;
-      return "translate3d(" + (x2 ? Math.round(x2) : 0) + "px, " + (y2 ? Math.round(y2) : 0) + "px, 0)";
-    }
-  },
-  Scale: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      const {
-        scaleX,
-        scaleY
-      } = transform;
-      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
-    }
-  },
-  Transform: {
-    toString(transform) {
-      if (!transform) {
-        return;
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
       }
       return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
     }
@@ -12386,7 +11630,7 @@ function useRect(element, measure, fallbackRect) {
   const resizeObserver = useResizeObserver({
     callback: measureRect
   });
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     measureRect();
     if (element) {
       resizeObserver == null ? void 0 : resizeObserver.observe(element);
@@ -12569,7 +11813,7 @@ function useRects(elements, measure) {
   if (elements.length > 0 && rects === defaultValue$2) {
     measureRects();
   }
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     if (elements.length) {
       elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
     } else {
@@ -12940,7 +12184,7 @@ function useLayoutShiftScrollCompensation(_ref) {
     x: config,
     y: config
   } : config;
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     const disabled2 = !x2 && !y2;
     if (disabled2 || !activeNode) {
       initialized.current = false;
@@ -13262,7 +12506,7 @@ const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
   }, [draggableNodes, instantiateSensor]);
   const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
   useSensorSetup(sensors);
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     if (activeNodeRect && status === Status.Initializing) {
       setStatus(Status.Initialized);
     }
@@ -13346,7 +12590,7 @@ const DndContext$1 = /* @__PURE__ */ memo$1(function DndContext(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [overId]
   );
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     sensorContext.current = {
       activatorEvent,
       active: active2,
@@ -13473,7 +12717,7 @@ function useDraggable(_ref) {
   const [activatorNode, setActivatorNodeRef] = useNodeRef();
   const listeners = useSyntheticListeners(activators, id2);
   const dataRef = useLatestValue(data);
-  useIsomorphicLayoutEffect$4(
+  useIsomorphicLayoutEffect$5(
     () => {
       draggableNodes.set(id2, {
         id: id2,
@@ -13593,7 +12837,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$4(
+  useIsomorphicLayoutEffect$5(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -13646,7 +12890,7 @@ function AnimationManager(_ref) {
   if (!children && !clonedChildren && previousChildren) {
     setClonedChildren(previousChildren);
   }
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     if (!element) {
       return;
     }
@@ -14146,7 +13390,7 @@ function SortableContext(_ref) {
   const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
   const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
   const disabled2 = normalizeDisabled(disabledProp);
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     if (itemsHaveChanged && isDragging) {
       measureDroppableContainers(items);
     }
@@ -14227,7 +13471,7 @@ function useDerivedTransform(_ref) {
   } = _ref;
   const [derivedTransform, setDerivedtransform] = useState(null);
   const previousIndex = useRef(index2);
-  useIsomorphicLayoutEffect$4(() => {
+  useIsomorphicLayoutEffect$5(() => {
     if (!disabled2 && index2 !== previousIndex.current && node2.current) {
       const initial = rect.current;
       if (initial) {
@@ -14426,251 +13670,1063 @@ function useSortable(_ref) {
     ) {
       return disabledTransition;
     }
-    if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
-      return void 0;
+    if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
+      return void 0;
+    }
+    if (isSorting || shouldAnimateLayoutChanges) {
+      return CSS.Transition.toString({
+        ...transition,
+        property: transitionProperty
+      });
+    }
+    return void 0;
+  }
+}
+function normalizeLocalDisabled(localDisabled, globalDisabled) {
+  var _localDisabled$dragga, _localDisabled$droppa;
+  if (typeof localDisabled === "boolean") {
+    return {
+      draggable: localDisabled,
+      // Backwards compatibility
+      droppable: false
+    };
+  }
+  return {
+    draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
+    droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
+  };
+}
+[KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+const Label$1 = ({ label: label2 }) => {
+  return label2 ? /* @__PURE__ */ jsx("span", { className: listStyles.label, children: /* @__PURE__ */ jsx(Badge, { color: label2.color, title: label2.value, small: label2.small }) }) : null;
+};
+const Name = ({ name: name2, icon: icon2, testId }) => {
+  const newIcon = icon2 && /* @__PURE__ */ jsx(Icon, { icon: icon2.icon, color: icon2.color || "#db2828" });
+  return /* @__PURE__ */ jsxs("span", { className: cx$2(listStyles.name, listStyles.bold), "data-testid": testId, children: [
+    name2,
+    icon2 && icon2.tooltip && icon2.tooltip.text ? /* @__PURE__ */ jsx("span", { className: listStyles.iconTooltipMargin, children: /* @__PURE__ */ jsx(Tooltip, { text: icon2.tooltip.text, maxWidth: "350px", children: newIcon }) }) : icon2 && icon2.icon && /* @__PURE__ */ jsx("span", { className: listStyles.iconTooltipMargin, children: newIcon })
+  ] });
+};
+const MetaContent = ({ item: item2 }) => {
+  const { name: name2, icon: icon2, details: details2, metadata: metadata2, invalid, testId } = item2;
+  let renderedName = /* @__PURE__ */ jsx(Name, { name: name2, icon: icon2, testId: testId && `${testId}-name` });
+  if (invalid) {
+    renderedName = /* @__PURE__ */ jsx(Badge, { small: true, margin: "-2px", title: "!", children: renderedName });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: listStyles.title, children: [
+    renderedName,
+    details2 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: listStyles.details,
+        "data-testid": testId && `${testId}-details`,
+        children: details2
+      }
+    ),
+    metadata2 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: listStyles.metadata,
+        "data-testid": testId && `${testId}-metadata`,
+        children: metadata2
+      }
+    )
+  ] });
+};
+const MetaCount = ({ item: item2 }) => {
+  return item2.metaCount !== void 0 ? /* @__PURE__ */ jsx(Badge, { color: "rgba(0,0,0,0.25)", title: item2.metaCount }) : null;
+};
+const ItemContent = ({ item: item2, expanding }) => {
+  const onClick = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  return expanding && item2.active && item2.content ? /* @__PURE__ */ jsx("div", { className: listStyles.itemContent, onClick, children: item2.content }) : null;
+};
+const ListSubheading = forwardRef(({ item: item2, index: index2 }, listRowRefs) => {
+  const disabledContext = useContext(DisabledContext);
+  const { actions: actions2, disabled: disabled2, expanded: expanded2, onClick, title: title2, name: name2, icon: icon2, testId } = item2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el2) => {
+        if (listRowRefs && "current" in listRowRefs && Array.isArray(listRowRefs.current) && index2 !== void 0) {
+          listRowRefs.current[index2] = el2;
+        }
+      },
+      "data-testid": testId ?? null,
+      className: cx$2(
+        listStyles.item,
+        listStyles.heading,
+        disabled2 || disabledContext ? listStyles.disabled : "",
+        onClick ? listStyles.action : ""
+      ),
+      onClick: (evt) => {
+        if (onClick) {
+          onClick(evt);
+        }
+      },
+      title: title2,
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: listStyles.itemHeader, children: [
+        typeof expanded2 === "boolean" && /* @__PURE__ */ jsx("div", { className: cx$2(listStyles.expandIcon, expanded2 && listStyles.expanded), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }),
+        /* @__PURE__ */ jsx(Name, { name: name2, icon: icon2 }),
+        /* @__PURE__ */ jsxs("div", { className: listStyles.right, children: [
+          /* @__PURE__ */ jsx(MetaCount, { item: item2 }),
+          !(disabled2 || disabledContext) && actions2 && /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: item2.actions ?? [] }) })
+        ] })
+      ] }) })
+    }
+  );
+});
+const ListRow = forwardRef(
+  ({ item: item2, index: index2, expanding, invokeEditOnRowClick, draggable }, listRowRefs) => {
+    const disabledContext = useContext(DisabledContext);
+    const listElement = (index22, item22, style, attributes, listeners, setNodeRef) => {
+      const edit2 = item22.actions && item22.actions.find(
+        (a2) => {
+          var _a2;
+          return a2.label && ((_a2 = String(a2.label)) == null ? void 0 : _a2.toLowerCase()) === "edit";
+        }
+      );
+      const hasOnClick = !!(edit2 || item22.url || item22.onClick);
+      const indent = item22.level && item22.level > 1 ? (item22.level - 1) * 20 : 0;
+      const Component2 = item22.component || "a";
+      return /* @__PURE__ */ jsx(
+        Component2,
+        {
+          href: item22.url,
+          to: item22.url,
+          ref: setNodeRef,
+          style,
+          className: cx$2(
+            listStyles.item,
+            item22.active ? listStyles.active : "",
+            item22.disabled || disabledContext ? listStyles.disabled : "",
+            hasOnClick ? listStyles.action : ""
+          ),
+          onClick: (evt) => {
+            if (invokeEditOnRowClick && edit2) {
+              if (edit2.onClick) edit2.onClick(evt, item22.id);
+            }
+            if (item22.onClick) {
+              return item22.onClick(evt);
+            }
+          },
+          "data-id": index22,
+          title: item22.title,
+          "data-testid": item22.testId,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: (el2) => {
+                if (listRowRefs && "current" in listRowRefs && Array.isArray(listRowRefs.current) && index22 !== void 0) {
+                  listRowRefs.current[index22] = el2;
+                }
+              },
+              style: { paddingLeft: indent },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: listStyles.itemHeader, children: [
+                  draggable && /* @__PURE__ */ jsx("div", { className: listStyles.drag, ...attributes, ...listeners, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }),
+                  item22.level && item22.level > 0 ? /* @__PURE__ */ jsx("div", { className: listStyles.indentIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.INDENT }) }) : null,
+                  /* @__PURE__ */ jsx(Label$1, { label: item22.label }),
+                  /* @__PURE__ */ jsx(MetaContent, { item: item22 }),
+                  /* @__PURE__ */ jsxs("div", { className: listStyles.right, children: [
+                    /* @__PURE__ */ jsx(MetaCount, { item: item22 }),
+                    !(item22.disabled || disabledContext) && item22.actions && /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: item22.actions }) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(ItemContent, { item: item22, expanding })
+              ]
+            }
+          )
+        },
+        index22
+      );
+    };
+    const listElementWithDrag = (index22, item22) => {
+      const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+      } = useSortable({
+        id: index22.toString(),
+        animateLayoutChanges: () => false
+      });
+      const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+        opacity: isDragging ? 0 : 1
+      };
+      return listElement(index22, item22, style, attributes, listeners, setNodeRef);
+    };
+    const isSubheading = item2.type === "Heading";
+    return isSubheading ? /* @__PURE__ */ jsx(ListSubheading, { ref: listRowRefs, item: item2, index: index2 }, index2) : draggable ? listElementWithDrag(index2, item2) : listElement(index2, item2);
+  }
+);
+const ListDragWrapper = ({
+  children,
+  draggable,
+  list: list2,
+  onListReorder
+}) => {
+  const [dragIndex, setDragIndex] = useState(null);
+  if (!draggable) {
+    return children;
+  }
+  const handleDragStart2 = (event) => {
+    setDragIndex(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    setDragIndex(null);
+    const { active: active2, over } = event;
+    const from3 = active2 == null ? void 0 : active2.id;
+    const to2 = over == null ? void 0 : over.id;
+    if (from3 !== to2) {
+      onListReorder({
+        from: Number(from3),
+        to: Number(to2)
+      });
+    }
+  };
+  const itemIds = useMemo(
+    () => list2.items.map((_2, index2) => index2.toString()),
+    [list2.items]
+  );
+  return /* @__PURE__ */ jsxs(
+    DndContext$1,
+    {
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart2,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children }),
+        !!dragIndex && createPortal(
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: /* @__PURE__ */ jsx("div", { className: listStyles.dragOverlay, children: /* @__PURE__ */ jsx(
+            ListRow,
+            {
+              draggable,
+              item: list2.items[Number(dragIndex)],
+              index: Number(dragIndex)
+            }
+          ) }) }),
+          document.body
+        )
+      ]
+    }
+  );
+};
+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;
     }
-    if (isSorting || shouldAnimateLayoutChanges) {
-      return CSS.Transition.toString({
-        ...transition,
-        property: transitionProperty
-      });
+    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
+      );
     }
-    return void 0;
+    (_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;
   }
 }
-function normalizeLocalDisabled(localDisabled, globalDisabled) {
-  var _localDisabled$dragga, _localDisabled$droppa;
-  if (typeof localDisabled === "boolean") {
-    return {
-      draggable: localDisabled,
-      // Backwards compatibility
-      droppable: false
+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);
     };
-  }
-  return {
-    draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
-    droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
-  };
-}
-[KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
-const Label$1 = ({ label: label2 }) => {
-  return label2 ? /* @__PURE__ */ jsx("span", { className: listStyles.label, children: /* @__PURE__ */ jsx(Badge, { color: label2.color, title: label2.value, small: label2.small }) }) : null;
-};
-const Name = ({ name: name2, icon: icon2, testId }) => {
-  const newIcon = icon2 && /* @__PURE__ */ jsx(Icon, { icon: icon2.icon, color: icon2.color || "#db2828" });
-  return /* @__PURE__ */ jsxs("span", { className: cx$2(listStyles.name, listStyles.bold), "data-testid": testId, children: [
-    name2,
-    icon2 && icon2.tooltip && icon2.tooltip.text ? /* @__PURE__ */ jsx("span", { className: listStyles.iconTooltipMargin, children: /* @__PURE__ */ jsx(Tooltip, { text: icon2.tooltip.text, maxWidth: "350px", children: newIcon }) }) : icon2 && icon2.icon && /* @__PURE__ */ jsx("span", { className: listStyles.iconTooltipMargin, children: newIcon })
-  ] });
-};
-const MetaContent = ({ item: item2 }) => {
-  const { name: name2, icon: icon2, details: details2, metadata: metadata2, invalid, testId } = item2;
-  let renderedName = /* @__PURE__ */ jsx(Name, { name: name2, icon: icon2, testId: testId && `${testId}-name` });
-  if (invalid) {
-    renderedName = /* @__PURE__ */ jsx(Badge, { small: true, margin: "-2px", title: "!", children: renderedName });
-  }
-  return /* @__PURE__ */ jsxs("span", { className: listStyles.title, children: [
-    renderedName,
-    details2 && /* @__PURE__ */ jsx(
-      "span",
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
       {
-        className: listStyles.details,
-        "data-testid": testId && `${testId}-details`,
-        children: details2
+        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;
       }
-    ),
-    metadata2 && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: listStyles.metadata,
-        "data-testid": testId && `${testId}-metadata`,
-        children: metadata2
+      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);
       }
-    )
-  ] });
-};
-const MetaCount = ({ item: item2 }) => {
-  return item2.metaCount !== void 0 ? /* @__PURE__ */ jsx(Badge, { color: "rgba(0,0,0,0.25)", title: item2.metaCount }) : null;
-};
-const ItemContent = ({ item: item2, expanding }) => {
-  const onClick = (evt) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-  };
-  return expanding && item2.active && item2.content ? /* @__PURE__ */ jsx("div", { className: listStyles.itemContent, onClick, children: item2.content }) : null;
-};
-const ListSubheading = forwardRef(({ item: item2, index: index2 }, listRowRefs) => {
-  const disabledContext = useContext(DisabledContext);
-  const { actions: actions2, disabled: disabled2, expanded: expanded2, onClick, title: title2, name: name2, icon: icon2, testId } = item2;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: (el2) => {
-        if (listRowRefs && "current" in listRowRefs && Array.isArray(listRowRefs.current) && index2 !== void 0) {
-          listRowRefs.current[index2] = el2;
+      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
+          });
         }
-      },
-      "data-testid": testId ?? null,
-      className: cx$2(
-        listStyles.item,
-        listStyles.heading,
-        disabled2 || disabledContext ? listStyles.disabled : "",
-        onClick ? listStyles.action : ""
-      ),
-      onClick: (evt) => {
-        if (onClick) {
-          onClick(evt);
+        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;
       },
-      title: title2,
-      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: listStyles.itemHeader, children: [
-        typeof expanded2 === "boolean" && /* @__PURE__ */ jsx("div", { className: cx$2(listStyles.expandIcon, expanded2 && listStyles.expanded), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }),
-        /* @__PURE__ */ jsx(Name, { name: name2, icon: icon2 }),
-        /* @__PURE__ */ jsxs("div", { className: listStyles.right, children: [
-          /* @__PURE__ */ jsx(MetaCount, { item: item2 }),
-          !(disabled2 || disabledContext) && actions2 && /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: item2.actions ?? [] }) })
-        ] })
-      ] }) })
-    }
-  );
-});
-const ListRow = forwardRef(
-  ({ item: item2, index: index2, expanding, invokeEditOnRowClick, draggable }, listRowRefs) => {
-    const disabledContext = useContext(DisabledContext);
-    const listElement = (index22, item22, style, attributes, listeners, setNodeRef) => {
-      const edit2 = item22.actions && item22.actions.find(
-        (a2) => {
-          var _a2;
-          return a2.label && ((_a2 = String(a2.label)) == null ? void 0 : _a2.toLowerCase()) === "edit";
-        }
+      {
+        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
+        )]
       );
-      const hasOnClick = !!(edit2 || item22.url || item22.onClick);
-      const indent = item22.level && item22.level > 1 ? (item22.level - 1) * 20 : 0;
-      const Component2 = item22.component || "a";
-      return /* @__PURE__ */ jsx(
-        Component2,
-        {
-          href: item22.url,
-          to: item22.url,
-          ref: setNodeRef,
-          style,
-          className: cx$2(
-            listStyles.item,
-            item22.active ? listStyles.active : "",
-            item22.disabled || disabledContext ? listStyles.disabled : "",
-            hasOnClick ? listStyles.action : ""
-          ),
-          onClick: (evt) => {
-            if (invokeEditOnRowClick && edit2) {
-              if (edit2.onClick) edit2.onClick(evt, item22.id);
-            }
-            if (item22.onClick) {
-              return item22.onClick(evt);
-            }
-          },
-          "data-id": index22,
-          title: item22.title,
-          "data-testid": item22.testId,
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: (el2) => {
-                if (listRowRefs && "current" in listRowRefs && Array.isArray(listRowRefs.current) && index22 !== void 0) {
-                  listRowRefs.current[index22] = el2;
-                }
-              },
-              style: { paddingLeft: indent },
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: listStyles.itemHeader, children: [
-                  draggable && /* @__PURE__ */ jsx("div", { className: listStyles.drag, ...attributes, ...listeners, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }),
-                  item22.level && item22.level > 0 ? /* @__PURE__ */ jsx("div", { className: listStyles.indentIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.INDENT }) }) : null,
-                  /* @__PURE__ */ jsx(Label$1, { label: item22.label }),
-                  /* @__PURE__ */ jsx(MetaContent, { item: item22 }),
-                  /* @__PURE__ */ jsxs("div", { className: listStyles.right, children: [
-                    /* @__PURE__ */ jsx(MetaCount, { item: item22 }),
-                    !(item22.disabled || disabledContext) && item22.actions && /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: item22.actions }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(ItemContent, { item: item22, expanding })
-              ]
+    };
+    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 });
             }
-          )
-        },
-        index22
-      );
+          } else {
+            this.scrollToIndex(index2, { align, behavior });
+          }
+        });
+      }
     };
-    const listElementWithDrag = (index22, item22) => {
-      const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging
-      } = useSortable({
-        id: index22.toString(),
-        animateLayoutChanges: () => false
+    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
       });
-      const style = {
-        transform: CSS.Translate.toString(transform),
-        transition,
-        opacity: isDragging ? 0 : 1
-      };
-      return listElement(index22, item22, style, attributes, listeners, setNodeRef);
     };
-    const isSubheading = item2.type === "Heading";
-    return isSubheading ? /* @__PURE__ */ jsx(ListSubheading, { ref: listRowRefs, item: item2, index: index2 }, index2) : draggable ? listElementWithDrag(index2, item2) : listElement(index2, item2);
+    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 ListDragWrapper = ({
-  children,
-  draggable,
-  list: list2,
-  onListReorder
-}) => {
-  const [dragIndex, setDragIndex] = useState(null);
-  if (!draggable) {
-    return children;
+}
+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;
+    }
   }
-  const handleDragStart2 = (event) => {
-    setDragIndex(event.active.id);
+  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 handleDragEnd = (event) => {
-    setDragIndex(null);
-    const { active: active2, over } = event;
-    const from3 = active2 == null ? void 0 : active2.id;
-    const to2 = over == null ? void 0 : over.id;
-    if (from3 !== to2) {
-      onListReorder({
-        from: Number(from3),
-        to: Number(to2)
+  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"
       });
     }
   };
-  const itemIds = useMemo(
-    () => list2.items.map((_2, index2) => index2.toString()),
-    [list2.items]
-  );
-  return /* @__PURE__ */ jsxs(
-    DndContext$1,
+  useEffect(() => {
+    if (triggerScrollToActiveItem) {
+      const activeItemIndex = findFirstActiveItemIndex(items);
+      setScrollToActiveItem(activeItemIndex);
+    }
+  }, [triggerScrollToActiveItem]);
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      collisionDetection: closestCenter,
-      onDragStart: handleDragStart2,
-      onDragEnd: handleDragEnd,
-      children: [
-        /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children }),
-        !!dragIndex && createPortal(
-          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: /* @__PURE__ */ jsx("div", { className: listStyles.dragOverlay, children: /* @__PURE__ */ jsx(
-            ListRow,
-            {
-              draggable,
-              item: list2.items[Number(dragIndex)],
-              index: Number(dragIndex)
-            }
-          ) }) }),
-          document.body
-        )
-      ]
+      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 })
+        }
+      )
     }
   );
 };
@@ -14696,38 +14752,6 @@ const List = ({
     triggerScrollToActiveItem: false
   }
 }) => {
-  const { hideScrollbar: hideScrollbar2, triggerScrollToActiveItem } = scrollDetails;
-  const listContainerRef = useRef(null);
-  const estimateItemHeight = () => {
-    let height22 = 37;
-    if (list2.items.length > 0) {
-      const item2 = list2.items[list2.items.length - 1];
-      if (item2.details) height22 += 20;
-      if (item2.metadata) height22 += 20;
-    }
-    return height22;
-  };
-  const virtualizer = useVirtualizer({
-    count: list2.items.length,
-    getScrollElement: () => listContainerRef.current,
-    estimateSize: useCallback(estimateItemHeight, []),
-    overscan: 5
-  });
-  const findFirstActiveItemIndex = (items) => items.findIndex((item2) => item2.active === true);
-  const setScrollToActiveItem = (activeItemIndex) => {
-    if (activeItemIndex >= 0) {
-      virtualizer.scrollToIndex(activeItemIndex, {
-        align: "center",
-        behavior: "smooth"
-      });
-    }
-  };
-  useEffect(() => {
-    if (triggerScrollToActiveItem) {
-      const activeItemIndex = findFirstActiveItemIndex(list2 == null ? void 0 : list2.items);
-      setScrollToActiveItem(activeItemIndex);
-    }
-  }, [triggerScrollToActiveItem]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -14756,45 +14780,28 @@ const List = ({
             draggable,
             list: list2,
             onListReorder,
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx(ListScrollWrapper, { items: list2.items, scrollDetails, children: ({ virtualizer }) => virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
               "div",
               {
-                className: cx$2(
-                  listStyles.listContent,
-                  hideScrollbar2 ? listStyles.hideScrollbar : ""
-                ),
-                ref: listContainerRef,
+                "data-index": virtualRow2.index,
+                className: listStyles.virtualRow,
+                style: {
+                  transform: `translateY(${virtualRow2.start}px)`
+                },
+                ref: virtualizer.measureElement,
                 children: /* @__PURE__ */ jsx(
-                  "div",
+                  ListRow,
                   {
-                    className: listStyles.virtualRows,
-                    style: { height: `${virtualizer.getTotalSize()}px` },
-                    children: virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        "data-index": virtualRow2.index,
-                        className: listStyles.virtualRow,
-                        style: {
-                          transform: `translateY(${virtualRow2.start}px)`
-                        },
-                        ref: virtualizer.measureElement,
-                        children: /* @__PURE__ */ jsx(
-                          ListRow,
-                          {
-                            index: virtualRow2.index,
-                            draggable,
-                            item: list2.items[virtualRow2.index],
-                            expanding,
-                            invokeEditOnRowClick
-                          }
-                        )
-                      },
-                      virtualRow2.key
-                    ))
+                    index: virtualRow2.index,
+                    draggable,
+                    item: list2.items[virtualRow2.index],
+                    expanding,
+                    invokeEditOnRowClick
                   }
                 )
-              }
-            )
+              },
+              virtualRow2.key
+            )) })
           }
         )
       ]