@oliasoft-open-source/react-ui-library 4.18.0-beta-11 → 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,2046 +9501,1290 @@ 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;
-  };
+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
+  );
 }
-function notUndefined(value, msg2) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
+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;
 }
-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);
+function isDocument(node2) {
+  const {
+    Document
+  } = getWindow(node2);
+  return node2 instanceof Document;
+}
+function isHTMLElement(node2) {
+  if (isWindow(node2)) {
+    return false;
   }
-  return arr;
-};
-const observeElementRect = (instance, cb2) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
+  return node2 instanceof getWindow(node2).HTMLElement;
+}
+function isSVGElement(node2) {
+  return node2 instanceof getWindow(node2).SVGElement;
+}
+function getOwnerDocument(target) {
+  if (!target) {
+    return document;
   }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
+  if (isWindow(target)) {
+    return target.document;
   }
-  const handler = (rect) => {
-    const { width: width2, height: height2 } = rect;
-    cb2({ width: Math.round(width2), height: Math.round(height2) });
-  };
-  handler(element.getBoundingClientRect());
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
+  if (!isNode(target)) {
+    return document;
   }
-  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;
+  if (isDocument(target)) {
+    return target;
   }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
+  if (isHTMLElement(target) || isSVGElement(target)) {
+    return target.ownerDocument;
   }
-  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 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 {
-        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
+    } 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
     };
-    this.notify = (sync2) => {
-      var _a2, _b;
-      (_b = (_a2 = this.options).onChange) == null ? void 0 : _b.call(_a2, this, sync2);
-    };
-    this.maybeNotify = memo(
-      () => {
-        this.calculateRange();
-        return [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ];
-      },
-      (isScrolling) => {
-        this.notify(isScrolling);
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "maybeNotify",
-        debug: () => this.options.debug,
-        initialDeps: [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ]
-      }
-    );
-    this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((d2) => d2());
-      this.unsubs = [];
-      this.observer.disconnect();
-      this.scrollElement = null;
-      this.targetWindow = null;
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
-      };
-    };
-    this._willUpdate = () => {
-      var _a2;
-      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        if (!scrollElement) {
-          this.maybeNotify();
-          return;
-        }
-        this.scrollElement = scrollElement;
-        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
-          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
-        } else {
-          this.targetWindow = ((_a2 = this.scrollElement) == null ? void 0 : _a2.window) ?? null;
-        }
-        this.elementsCache.forEach((cached) => {
-          this.observer.observe(cached);
-        });
-        this._scrollToOffset(this.getScrollOffset(), {
-          adjustments: void 0,
-          behavior: void 0
-        });
-        this.unsubs.push(
-          this.options.observeElementRect(this, (rect) => {
-            this.scrollRect = rect;
-            this.maybeNotify();
-          })
-        );
-        this.unsubs.push(
-          this.options.observeElementOffset(this, (offset, isScrolling) => {
-            this.scrollAdjustments = 0;
-            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
-            this.scrollOffset = offset;
-            this.isScrolling = isScrolling;
-            this.maybeNotify();
-          })
-        );
-      }
-    };
-    this.getSize = () => {
-      if (!this.options.enabled) {
-        this.scrollRect = null;
-        return 0;
-      }
-      this.scrollRect = this.scrollRect ?? this.options.initialRect;
-      return this.scrollRect[this.options.horizontal ? "width" : "height"];
-    };
-    this.getScrollOffset = () => {
-      if (!this.options.enabled) {
-        this.scrollOffset = null;
-        return 0;
-      }
-      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
-      return this.scrollOffset;
-    };
-    this.getFurthestMeasurement = (measurements, index2) => {
-      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
-      const furthestMeasurements = /* @__PURE__ */ new Map();
-      for (let m2 = index2 - 1; m2 >= 0; m2--) {
-        const measurement = measurements[m2];
-        if (furthestMeasurementsFound.has(measurement.lane)) {
-          continue;
-        }
-        const previousFurthestMeasurement = furthestMeasurements.get(
-          measurement.lane
-        );
-        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
-          furthestMeasurements.set(measurement.lane, measurement);
-        } else if (measurement.end < previousFurthestMeasurement.end) {
-          furthestMeasurementsFound.set(measurement.lane, true);
-        }
-        if (furthestMeasurementsFound.size === this.options.lanes) {
-          break;
-        }
-      }
-      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a2, b2) => {
-        if (a2.end === b2.end) {
-          return a2.index - b2.index;
-        }
-        return a2.end - b2.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled
-      ],
-      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count,
-          paddingStart,
-          scrollMargin,
-          getItemKey,
-          enabled
-        };
-      },
-      {
-        key: false
-      }
-    );
-    this.getMeasurements = memo(
-      () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
-        if (!enabled) {
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          return [];
-        }
-        if (this.measurementsCache.length === 0) {
-          this.measurementsCache = this.options.initialMeasurementsCache;
-          this.measurementsCache.forEach((item2) => {
-            this.itemSizeCache.set(item2.key, item2.size);
-          });
-        }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < count; i++) {
-          const key2 = getItemKey(i);
-          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
-          const measuredSize = itemSizeCache.get(key2);
-          const size2 = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
-          const end = start + size2;
-          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
-          measurements[i] = {
-            index: i,
-            start,
-            size: size2,
-            end,
-            key: key2,
-            lane
-          };
-        }
-        this.measurementsCache = measurements;
-        return measurements;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getMeasurements",
-        debug: () => this.options.debug
-      }
-    );
-    this.calculateRange = memo(
-      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
-      (measurements, outerSize, scrollOffset) => {
-        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset
-        }) : null;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "calculateRange",
-        debug: () => this.options.debug
-      }
-    );
-    this.getIndexes = memo(
-      () => [
-        this.options.rangeExtractor,
-        this.calculateRange(),
-        this.options.overscan,
-        this.options.count
-      ],
-      (rangeExtractor, range2, overscan, count) => {
-        return range2 === null ? [] : rangeExtractor({
-          startIndex: range2.startIndex,
-          endIndex: range2.endIndex,
-          overscan,
-          count
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getIndexes",
-        debug: () => this.options.debug
+  }
+  return null;
+}
+const CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
       }
-    );
-    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;
+      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;
       }
-      return parseInt(indexStr, 10);
-    };
-    this._measureElement = (node2, entry) => {
-      const index2 = this.indexFromElement(node2);
-      const item2 = this.measurementsCache[index2];
-      if (!item2) {
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
         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;
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
     }
   }
-  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++;
+});
+const SELECTOR = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
+function findFirstFocusableNode(element) {
+  if (element.matches(SELECTOR)) {
+    return element;
   }
-  return { startIndex, endIndex };
+  return element.querySelector(SELECTOR);
 }
-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 hiddenStyles = {
+  display: "none"
+};
+function HiddenText(_ref) {
+  let {
+    id: id2,
+    value
+  } = _ref;
+  return React__default.createElement("div", {
+    id: id2,
+    style: hiddenStyles
+  }, value);
+}
+function LiveRegion(_ref) {
+  let {
+    id: id2,
+    announcement,
+    ariaLiveType = "assertive"
+  } = _ref;
+  const visuallyHidden = {
+    position: "fixed",
+    width: 1,
+    height: 1,
+    margin: -1,
+    border: 0,
+    padding: 0,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(100%)",
+    whiteSpace: "nowrap"
   };
-  const [instance] = React$4.useState(
-    () => new Virtualizer(resolvedOptions)
-  );
-  instance.setOptions(resolvedOptions);
-  React$4.useEffect(() => {
-    return instance._didMount();
+  return React__default.createElement("div", {
+    id: id2,
+    style: visuallyHidden,
+    role: "status",
+    "aria-live": ariaLiveType,
+    "aria-atomic": true
+  }, announcement);
+}
+function useAnnouncement() {
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((value) => {
+    if (value != null) {
+      setAnnouncement(value);
+    }
   }, []);
-  useIsomorphicLayoutEffect$5(() => {
-    return instance._willUpdate();
-  });
-  return instance;
+  return {
+    announce,
+    announcement
+  };
 }
-function useVirtualizer(options) {
-  return useVirtualizerBase({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options
-  });
+const DndMonitorContext = /* @__PURE__ */ createContext(null);
+function useDndMonitor(listener) {
+  const registerListener = useContext(DndMonitorContext);
+  useEffect(() => {
+    if (!registerListener) {
+      throw new Error("useDndMonitor must be used within a children of <DndContext>");
+    }
+    const unsubscribe = registerListener(listener);
+    return unsubscribe;
+  }, [listener, registerListener]);
 }
-const inputInTable$8 = "_inputInTable_snjei_1";
-const inputHover$8 = "_inputHover_snjei_13";
-const inputFocus$8 = "_inputFocus_snjei_18";
-const inputError$8 = "_inputError_snjei_25";
-const inputWarning$8 = "_inputWarning_snjei_26";
-const inputDisabled$8 = "_inputDisabled_snjei_61";
-const hideScrollbars$8 = "_hideScrollbars_snjei_67";
-const list$1 = "_list_snjei_77";
-const bordered$1 = "_bordered_snjei_83";
-const virtualRow = "_virtualRow_snjei_87";
-const item$4 = "_item_snjei_87";
-const header$1 = "_header_snjei_90";
-const headerTitle = "_headerTitle_snjei_90";
-const heading$3 = "_heading_snjei_91";
-const itemHeader = "_itemHeader_snjei_91";
-const narrow = "_narrow_snjei_94";
-const stickyHeader = "_stickyHeader_snjei_98";
-const title$3 = "_title_snjei_109";
-const name = "_name_snjei_115";
-const iconTooltipMargin = "_iconTooltipMargin_snjei_118";
-const bold = "_bold_snjei_121";
-const toggleNarrow = "_toggleNarrow_snjei_132";
-const drag$1 = "_drag_snjei_150";
-const dragOverlay$1 = "_dragOverlay_snjei_171";
-const listContent = "_listContent_snjei_176";
-const action = "_action_snjei_203";
-const active$3 = "_active_snjei_206";
-const indented = "_indented_snjei_213";
-const disabled$5 = "_disabled_snjei_226";
-const label$6 = "_label_snjei_237";
-const details$2 = "_details_snjei_248";
-const metadata = "_metadata_snjei_249";
-const itemContent = "_itemContent_snjei_257";
-const indentIcon = "_indentIcon_snjei_264";
-const expandIcon = "_expandIcon_snjei_269";
-const expanded = "_expanded_snjei_276";
-const right$4 = "_right_snjei_279";
-const actions = "_actions_snjei_287";
-const hideScrollbar = "_hideScrollbar_snjei_67";
-const noPointerEvents = "_noPointerEvents_snjei_302";
-const virtualRows = "_virtualRows_snjei_305";
-const listStyles = {
-  inputInTable: inputInTable$8,
-  inputHover: inputHover$8,
-  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
+function useDndMonitorProvider() {
+  const [listeners] = useState(() => /* @__PURE__ */ new Set());
+  const registerListener = useCallback((listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }, [listeners]);
+  const dispatch = useCallback((_ref) => {
+    let {
+      type,
+      event
+    } = _ref;
+    listeners.forEach((listener) => {
+      var _listener$type;
+      return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
+    });
+  }, [listeners]);
+  return [dispatch, registerListener];
+}
+const defaultScreenReaderInstructions = {
+  draggable: "\n    To pick up a draggable item, press the space bar.\n    While dragging, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  "
 };
-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 defaultAnnouncements = {
+  onDragStart(_ref) {
+    let {
+      active: active2
+    } = _ref;
+    return "Picked up draggable item " + active2.id + ".";
+  },
+  onDragOver(_ref2) {
+    let {
+      active: active2,
+      over
+    } = _ref2;
+    if (over) {
+      return "Draggable item " + active2.id + " was moved over droppable area " + over.id + ".";
+    }
+    return "Draggable item " + active2.id + " is no longer over a droppable area.";
+  },
+  onDragEnd(_ref3) {
+    let {
+      active: active2,
+      over
+    } = _ref3;
+    if (over) {
+      return "Draggable item " + active2.id + " was dropped over droppable area " + over.id;
+    }
+    return "Draggable item " + active2.id + " was dropped.";
+  },
+  onDragCancel(_ref4) {
+    let {
+      active: active2
+    } = _ref4;
+    return "Dragging was cancelled. Draggable item " + active2.id + " was dropped.";
+  }
 };
-const ListHeading = forwardRef(
-  ({
-    name: name2,
-    actions: actions2 = [],
-    toggleNarrow: toggleNarrow2 = false,
-    onToggleNarrow = () => {
+function Accessibility(_ref) {
+  let {
+    announcements = defaultAnnouncements,
+    container: container2,
+    hiddenTextDescribedById,
+    screenReaderInstructions = defaultScreenReaderInstructions
+  } = _ref;
+  const {
+    announce,
+    announcement
+  } = useAnnouncement();
+  const liveRegionId = useUniqueId("DndLiveRegion");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useDndMonitor(useMemo(() => ({
+    onDragStart(_ref2) {
+      let {
+        active: active2
+      } = _ref2;
+      announce(announcements.onDragStart({
+        active: active2
+      }));
     },
-    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 }) }) })
-        ]
+    onDragMove(_ref3) {
+      let {
+        active: active2,
+        over
+      } = _ref3;
+      if (announcements.onDragMove) {
+        announce(announcements.onDragMove({
+          active: active2,
+          over
+        }));
       }
-    );
-  }
-);
-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
-  );
+    onDragOver(_ref4) {
+      let {
+        active: active2,
+        over
+      } = _ref4;
+      announce(announcements.onDragOver({
+        active: active2,
+        over
+      }));
+    },
+    onDragEnd(_ref5) {
+      let {
+        active: active2,
+        over
+      } = _ref5;
+      announce(announcements.onDragEnd({
+        active: active2,
+        over
+      }));
+    },
+    onDragCancel(_ref6) {
+      let {
+        active: active2,
+        over
+      } = _ref6;
+      announce(announcements.onDragCancel({
+        active: active2,
+        over
+      }));
+    }
+  }), [announce, announcements]));
+  if (!mounted) {
+    return null;
+  }
+  const markup = React__default.createElement(React__default.Fragment, null, React__default.createElement(HiddenText, {
+    id: hiddenTextDescribedById,
+    value: screenReaderInstructions.draggable
+  }), React__default.createElement(LiveRegion, {
+    id: liveRegionId,
+    announcement
+  }));
+  return container2 ? createPortal(markup, container2) : markup;
 }
-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]";
+var Action;
+(function(Action2) {
+  Action2["DragStart"] = "dragStart";
+  Action2["DragMove"] = "dragMove";
+  Action2["DragEnd"] = "dragEnd";
+  Action2["DragCancel"] = "dragCancel";
+  Action2["DragOver"] = "dragOver";
+  Action2["RegisterDroppable"] = "registerDroppable";
+  Action2["SetDroppableDisabled"] = "setDroppableDisabled";
+  Action2["UnregisterDroppable"] = "unregisterDroppable";
+})(Action || (Action = {}));
+function noop$1() {
 }
-function isNode(node2) {
-  return "nodeType" in node2;
+const defaultCoordinates = /* @__PURE__ */ Object.freeze({
+  x: 0,
+  y: 0
+});
+function distanceBetween(p1, p2) {
+  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
 }
-function getWindow(target) {
-  var _target$ownerDocument, _target$ownerDocument2;
-  if (!target) {
-    return window;
-  }
-  if (isWindow(target)) {
-    return target;
-  }
-  if (!isNode(target)) {
-    return window;
+function getRelativeTransformOrigin(event, rect) {
+  const eventCoordinates = getEventCoordinates(event);
+  if (!eventCoordinates) {
+    return "0 0";
   }
-  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;
+  const transformOrigin = {
+    x: (eventCoordinates.x - rect.left) / rect.width * 100,
+    y: (eventCoordinates.y - rect.top) / rect.height * 100
+  };
+  return transformOrigin.x + "% " + transformOrigin.y + "%";
 }
-function isHTMLElement(node2) {
-  if (isWindow(node2)) {
-    return false;
-  }
-  return node2 instanceof getWindow(node2).HTMLElement;
+function sortCollisionsAsc(_ref, _ref2) {
+  let {
+    data: {
+      value: a2
+    }
+  } = _ref;
+  let {
+    data: {
+      value: b2
+    }
+  } = _ref2;
+  return a2 - b2;
 }
-function isSVGElement(node2) {
-  return node2 instanceof getWindow(node2).SVGElement;
+function sortCollisionsDesc(_ref3, _ref4) {
+  let {
+    data: {
+      value: a2
+    }
+  } = _ref3;
+  let {
+    data: {
+      value: b2
+    }
+  } = _ref4;
+  return b2 - a2;
 }
-function getOwnerDocument(target) {
-  if (!target) {
-    return document;
-  }
-  if (isWindow(target)) {
-    return target.document;
-  }
-  if (!isNode(target)) {
-    return document;
+function getFirstCollision(collisions, property) {
+  if (!collisions || collisions.length === 0) {
+    return null;
   }
-  if (isDocument(target)) {
-    return target;
+  const [firstCollision] = collisions;
+  return firstCollision[property];
+}
+function centerOfRectangle(rect, left2, top2) {
+  if (left2 === void 0) {
+    left2 = rect.left;
   }
-  if (isHTMLElement(target) || isSVGElement(target)) {
-    return target.ownerDocument;
+  if (top2 === void 0) {
+    top2 = rect.top;
   }
-  return document;
+  return {
+    x: left2 + rect.width * 0.5,
+    y: top2 + rect.height * 0.5
+  };
 }
-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];
+const closestCenter = (_ref) => {
+  let {
+    collisionRect,
+    droppableRects,
+    droppableContainers
+  } = _ref;
+  const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
+  const collisions = [];
+  for (const droppableContainer of droppableContainers) {
+    const {
+      id: id2
+    } = droppableContainer;
+    const rect = droppableRects.get(id2);
+    if (rect) {
+      const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
+      collisions.push({
+        id: id2,
+        data: {
+          droppableContainer,
+          value: distBetween
+        }
+      });
     }
-    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
-  }, []);
+  }
+  return collisions.sort(sortCollisionsAsc);
+};
+function getIntersectionRatio(entry, target) {
+  const top2 = Math.max(target.top, entry.top);
+  const left2 = Math.max(target.left, entry.left);
+  const right2 = Math.min(target.left + target.width, entry.left + entry.width);
+  const bottom2 = Math.min(target.top + target.height, entry.top + entry.height);
+  const width2 = right2 - left2;
+  const height2 = bottom2 - top2;
+  if (left2 < right2 && top2 < bottom2) {
+    const targetArea = target.width * target.height;
+    const entryArea = entry.width * entry.height;
+    const intersectionArea = width2 * height2;
+    const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
+    return Number(intersectionRatio.toFixed(4));
+  }
+  return 0;
 }
-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;
+const rectIntersection = (_ref) => {
+  let {
+    collisionRect,
+    droppableRects,
+    droppableContainers
+  } = _ref;
+  const collisions = [];
+  for (const droppableContainer of droppableContainers) {
+    const {
+      id: id2
+    } = droppableContainer;
+    const rect = droppableRects.get(id2);
+    if (rect) {
+      const intersectionRatio = getIntersectionRatio(rect, collisionRect);
+      if (intersectionRatio > 0) {
+        collisions.push({
+          id: id2,
+          data: {
+            droppableContainer,
+            value: intersectionRatio
+          }
+        });
+      }
     }
-  }, []);
-  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;
+  return collisions.sort(sortCollisionsDesc);
+};
+function adjustScale(transform, rect1, rect2) {
+  return {
+    ...transform,
+    scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
+    scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
+  };
 }
-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 getRectDelta(rect1, rect2) {
+  return rect1 && rect2 ? {
+    x: rect1.left - rect2.left,
+    y: rect1.top - rect2.top
+  } : defaultCoordinates;
 }
-function createAdjustmentFn(modifier) {
-  return function(object2) {
+function createRectAdjustmentFn(modifier) {
+  return function adjustClientRect(rect) {
     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
+    return adjustments.reduce((acc, adjustment) => ({
+      ...acc,
+      top: acc.top + modifier * adjustment.y,
+      bottom: acc.bottom + modifier * adjustment.y,
+      left: acc.left + modifier * adjustment.x,
+      right: acc.right + modifier * adjustment.x
+    }), {
+      ...rect
     });
   };
 }
-const add$1 = /* @__PURE__ */ createAdjustmentFn(1);
-const subtract$1 = /* @__PURE__ */ createAdjustmentFn(-1);
-function hasViewportRelativeCoordinates(event) {
-  return "clientX" in event && "clientY" in event;
+const getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
+function parseTransform(transform) {
+  if (transform.startsWith("matrix3d(")) {
+    const transformArray = transform.slice(9, -1).split(/, /);
+    return {
+      x: +transformArray[12],
+      y: +transformArray[13],
+      scaleX: +transformArray[0],
+      scaleY: +transformArray[5]
+    };
+  } else if (transform.startsWith("matrix(")) {
+    const transformArray = transform.slice(7, -1).split(/, /);
+    return {
+      x: +transformArray[4],
+      y: +transformArray[5],
+      scaleX: +transformArray[0],
+      scaleY: +transformArray[3]
+    };
+  }
+  return null;
 }
-function isKeyboardEvent(event) {
-  if (!event) {
-    return false;
+function inverseTransform(rect, transform, transformOrigin) {
+  const parsedTransform = parseTransform(transform);
+  if (!parsedTransform) {
+    return rect;
   }
   const {
-    KeyboardEvent: KeyboardEvent2
-  } = getWindow(event.target);
-  return KeyboardEvent2 && event instanceof KeyboardEvent2;
+    scaleX,
+    scaleY,
+    x: translateX,
+    y: translateY
+  } = parsedTransform;
+  const x2 = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
+  const y2 = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
+  const w2 = scaleX ? rect.width / scaleX : rect.width;
+  const h = scaleY ? rect.height / scaleY : rect.height;
+  return {
+    width: w2,
+    height: h,
+    top: y2,
+    right: x2 + w2,
+    bottom: y2 + h,
+    left: x2
+  };
 }
-function isTouchEvent$2(event) {
-  if (!event) {
-    return false;
+const defaultOptions$2 = {
+  ignoreTransform: false
+};
+function getClientRect(element, options) {
+  if (options === void 0) {
+    options = defaultOptions$2;
+  }
+  let rect = element.getBoundingClientRect();
+  if (options.ignoreTransform) {
+    const {
+      transform,
+      transformOrigin
+    } = getWindow(element).getComputedStyle(element);
+    if (transform) {
+      rect = inverseTransform(rect, transform, transformOrigin);
+    }
   }
   const {
-    TouchEvent
-  } = getWindow(event.target);
-  return TouchEvent && event instanceof TouchEvent;
+    top: top2,
+    left: left2,
+    width: width2,
+    height: height2,
+    bottom: bottom2,
+    right: right2
+  } = rect;
+  return {
+    top: top2,
+    left: left2,
+    width: width2,
+    height: height2,
+    bottom: bottom2,
+    right: right2
+  };
 }
-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
-      };
-    }
+function getTransformAgnosticClientRect(element) {
+  return getClientRect(element, {
+    ignoreTransform: true
+  });
+}
+function getWindowClientRect(element) {
+  const width2 = element.innerWidth;
+  const height2 = element.innerHeight;
+  return {
+    top: 0,
+    left: 0,
+    right: width2,
+    bottom: height2,
+    width: width2,
+    height: height2
+  };
+}
+function isFixed(node2, computedStyle) {
+  if (computedStyle === void 0) {
+    computedStyle = getWindow(node2).getComputedStyle(node2);
   }
-  if (hasViewportRelativeCoordinates(event)) {
-    return {
-      x: event.clientX,
-      y: event.clientY
-    };
+  return computedStyle.position === "fixed";
+}
+function isScrollable(element, computedStyle) {
+  if (computedStyle === void 0) {
+    computedStyle = getWindow(element).getComputedStyle(element);
   }
-  return null;
+  const overflowRegex = /(auto|scroll|overlay)/;
+  const properties2 = ["overflow", "overflowX", "overflowY"];
+  return properties2.some((property) => {
+    const value = computedStyle[property];
+    return typeof value === "string" ? overflowRegex.test(value) : false;
+  });
 }
-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 + ")";
+function getScrollableAncestors(element, limit2) {
+  const scrollParents = [];
+  function findScrollableAncestors(node2) {
+    if (limit2 != null && scrollParents.length >= limit2) {
+      return scrollParents;
     }
-  },
-  Transform: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    if (!node2) {
+      return scrollParents;
     }
-  },
-  Transition: {
-    toString(_ref) {
-      let {
-        property,
-        duration,
-        easing
-      } = _ref;
-      return property + " " + duration + "ms " + easing;
+    if (isDocument(node2) && node2.scrollingElement != null && !scrollParents.includes(node2.scrollingElement)) {
+      scrollParents.push(node2.scrollingElement);
+      return scrollParents;
+    }
+    if (!isHTMLElement(node2) || isSVGElement(node2)) {
+      return scrollParents;
+    }
+    if (scrollParents.includes(node2)) {
+      return scrollParents;
+    }
+    const computedStyle = getWindow(element).getComputedStyle(node2);
+    if (node2 !== element) {
+      if (isScrollable(node2, computedStyle)) {
+        scrollParents.push(node2);
+      }
+    }
+    if (isFixed(node2, computedStyle)) {
+      return scrollParents;
     }
+    return findScrollableAncestors(node2.parentNode);
   }
-});
-const SELECTOR = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
-function findFirstFocusableNode(element) {
-  if (element.matches(SELECTOR)) {
+  if (!element) {
+    return scrollParents;
+  }
+  return findScrollableAncestors(element);
+}
+function getFirstScrollableAncestor(node2) {
+  const [firstScrollableAncestor] = getScrollableAncestors(node2, 1);
+  return firstScrollableAncestor != null ? firstScrollableAncestor : null;
+}
+function getScrollableElement(element) {
+  if (!canUseDOM || !element) {
+    return null;
+  }
+  if (isWindow(element)) {
     return element;
   }
-  return element.querySelector(SELECTOR);
+  if (!isNode(element)) {
+    return null;
+  }
+  if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {
+    return window;
+  }
+  if (isHTMLElement(element)) {
+    return element;
+  }
+  return null;
 }
-const hiddenStyles = {
-  display: "none"
-};
-function HiddenText(_ref) {
-  let {
-    id: id2,
-    value
-  } = _ref;
-  return React__default.createElement("div", {
-    id: id2,
-    style: hiddenStyles
-  }, value);
+function getScrollXCoordinate(element) {
+  if (isWindow(element)) {
+    return element.scrollX;
+  }
+  return element.scrollLeft;
 }
-function LiveRegion(_ref) {
-  let {
-    id: id2,
-    announcement,
-    ariaLiveType = "assertive"
-  } = _ref;
-  const visuallyHidden = {
-    position: "fixed",
-    width: 1,
-    height: 1,
-    margin: -1,
-    border: 0,
-    padding: 0,
-    overflow: "hidden",
-    clip: "rect(0 0 0 0)",
-    clipPath: "inset(100%)",
-    whiteSpace: "nowrap"
-  };
-  return React__default.createElement("div", {
-    id: id2,
-    style: visuallyHidden,
-    role: "status",
-    "aria-live": ariaLiveType,
-    "aria-atomic": true
-  }, announcement);
+function getScrollYCoordinate(element) {
+  if (isWindow(element)) {
+    return element.scrollY;
+  }
+  return element.scrollTop;
 }
-function useAnnouncement() {
-  const [announcement, setAnnouncement] = useState("");
-  const announce = useCallback((value) => {
-    if (value != null) {
-      setAnnouncement(value);
-    }
-  }, []);
+function getScrollCoordinates(element) {
   return {
-    announce,
-    announcement
+    x: getScrollXCoordinate(element),
+    y: getScrollYCoordinate(element)
   };
 }
-const DndMonitorContext = /* @__PURE__ */ createContext(null);
-function useDndMonitor(listener) {
-  const registerListener = useContext(DndMonitorContext);
-  useEffect(() => {
-    if (!registerListener) {
-      throw new Error("useDndMonitor must be used within a children of <DndContext>");
-    }
-    const unsubscribe = registerListener(listener);
-    return unsubscribe;
-  }, [listener, registerListener]);
+var Direction;
+(function(Direction2) {
+  Direction2[Direction2["Forward"] = 1] = "Forward";
+  Direction2[Direction2["Backward"] = -1] = "Backward";
+})(Direction || (Direction = {}));
+function isDocumentScrollingElement(element) {
+  if (!canUseDOM || !element) {
+    return false;
+  }
+  return element === document.scrollingElement;
 }
-function useDndMonitorProvider() {
-  const [listeners] = useState(() => /* @__PURE__ */ new Set());
-  const registerListener = useCallback((listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  }, [listeners]);
-  const dispatch = useCallback((_ref) => {
-    let {
-      type,
-      event
-    } = _ref;
-    listeners.forEach((listener) => {
-      var _listener$type;
-      return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
-    });
-  }, [listeners]);
-  return [dispatch, registerListener];
+function getScrollPosition(scrollingContainer) {
+  const minScroll = {
+    x: 0,
+    y: 0
+  };
+  const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
+    height: window.innerHeight,
+    width: window.innerWidth
+  } : {
+    height: scrollingContainer.clientHeight,
+    width: scrollingContainer.clientWidth
+  };
+  const maxScroll = {
+    x: scrollingContainer.scrollWidth - dimensions.width,
+    y: scrollingContainer.scrollHeight - dimensions.height
+  };
+  const isTop = scrollingContainer.scrollTop <= minScroll.y;
+  const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
+  const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
+  const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
+  return {
+    isTop,
+    isLeft,
+    isBottom,
+    isRight,
+    maxScroll,
+    minScroll
+  };
 }
-const defaultScreenReaderInstructions = {
-  draggable: "\n    To pick up a draggable item, press the space bar.\n    While dragging, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  "
-};
-const defaultAnnouncements = {
-  onDragStart(_ref) {
-    let {
-      active: active2
-    } = _ref;
-    return "Picked up draggable item " + active2.id + ".";
-  },
-  onDragOver(_ref2) {
-    let {
-      active: active2,
-      over
-    } = _ref2;
-    if (over) {
-      return "Draggable item " + active2.id + " was moved over droppable area " + over.id + ".";
-    }
-    return "Draggable item " + active2.id + " is no longer over a droppable area.";
-  },
-  onDragEnd(_ref3) {
-    let {
-      active: active2,
-      over
-    } = _ref3;
-    if (over) {
-      return "Draggable item " + active2.id + " was dropped over droppable area " + over.id;
-    }
-    return "Draggable item " + active2.id + " was dropped.";
-  },
-  onDragCancel(_ref4) {
-    let {
-      active: active2
-    } = _ref4;
-    return "Dragging was cancelled. Draggable item " + active2.id + " was dropped.";
-  }
+const defaultThreshold = {
+  x: 0.2,
+  y: 0.2
 };
-function Accessibility(_ref) {
+function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
   let {
-    announcements = defaultAnnouncements,
-    container: container2,
-    hiddenTextDescribedById,
-    screenReaderInstructions = defaultScreenReaderInstructions
+    top: top2,
+    left: left2,
+    right: right2,
+    bottom: bottom2
   } = _ref;
+  if (acceleration === void 0) {
+    acceleration = 10;
+  }
+  if (thresholdPercentage === void 0) {
+    thresholdPercentage = defaultThreshold;
+  }
   const {
-    announce,
-    announcement
-  } = useAnnouncement();
-  const liveRegionId = useUniqueId("DndLiveRegion");
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useDndMonitor(useMemo(() => ({
-    onDragStart(_ref2) {
-      let {
-        active: active2
-      } = _ref2;
-      announce(announcements.onDragStart({
-        active: active2
-      }));
-    },
-    onDragMove(_ref3) {
-      let {
-        active: active2,
-        over
-      } = _ref3;
-      if (announcements.onDragMove) {
-        announce(announcements.onDragMove({
-          active: active2,
-          over
-        }));
-      }
-    },
-    onDragOver(_ref4) {
-      let {
-        active: active2,
-        over
-      } = _ref4;
-      announce(announcements.onDragOver({
-        active: active2,
-        over
-      }));
-    },
-    onDragEnd(_ref5) {
-      let {
-        active: active2,
-        over
-      } = _ref5;
-      announce(announcements.onDragEnd({
-        active: active2,
-        over
-      }));
-    },
-    onDragCancel(_ref6) {
-      let {
-        active: active2,
-        over
-      } = _ref6;
-      announce(announcements.onDragCancel({
-        active: active2,
-        over
-      }));
-    }
-  }), [announce, announcements]));
-  if (!mounted) {
-    return null;
+    isTop,
+    isBottom,
+    isLeft,
+    isRight
+  } = getScrollPosition(scrollContainer);
+  const direction = {
+    x: 0,
+    y: 0
+  };
+  const speed = {
+    x: 0,
+    y: 0
+  };
+  const threshold = {
+    height: scrollContainerRect.height * thresholdPercentage.y,
+    width: scrollContainerRect.width * thresholdPercentage.x
+  };
+  if (!isTop && top2 <= scrollContainerRect.top + threshold.height) {
+    direction.y = Direction.Backward;
+    speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top2) / threshold.height);
+  } else if (!isBottom && bottom2 >= scrollContainerRect.bottom - threshold.height) {
+    direction.y = Direction.Forward;
+    speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom2) / threshold.height);
   }
-  const markup = React__default.createElement(React__default.Fragment, null, React__default.createElement(HiddenText, {
-    id: hiddenTextDescribedById,
-    value: screenReaderInstructions.draggable
-  }), React__default.createElement(LiveRegion, {
-    id: liveRegionId,
-    announcement
-  }));
-  return container2 ? createPortal(markup, container2) : markup;
-}
-var Action;
-(function(Action2) {
-  Action2["DragStart"] = "dragStart";
-  Action2["DragMove"] = "dragMove";
-  Action2["DragEnd"] = "dragEnd";
-  Action2["DragCancel"] = "dragCancel";
-  Action2["DragOver"] = "dragOver";
-  Action2["RegisterDroppable"] = "registerDroppable";
-  Action2["SetDroppableDisabled"] = "setDroppableDisabled";
-  Action2["UnregisterDroppable"] = "unregisterDroppable";
-})(Action || (Action = {}));
-function noop$1() {
-}
-const defaultCoordinates = /* @__PURE__ */ Object.freeze({
-  x: 0,
-  y: 0
-});
-function distanceBetween(p1, p2) {
-  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+  if (!isRight && right2 >= scrollContainerRect.right - threshold.width) {
+    direction.x = Direction.Forward;
+    speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right2) / threshold.width);
+  } else if (!isLeft && left2 <= scrollContainerRect.left + threshold.width) {
+    direction.x = Direction.Backward;
+    speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left2) / threshold.width);
+  }
+  return {
+    direction,
+    speed
+  };
 }
-function getRelativeTransformOrigin(event, rect) {
-  const eventCoordinates = getEventCoordinates(event);
-  if (!eventCoordinates) {
-    return "0 0";
+function getScrollElementRect(element) {
+  if (element === document.scrollingElement) {
+    const {
+      innerWidth: innerWidth2,
+      innerHeight: innerHeight2
+    } = window;
+    return {
+      top: 0,
+      left: 0,
+      right: innerWidth2,
+      bottom: innerHeight2,
+      width: innerWidth2,
+      height: innerHeight2
+    };
   }
-  const transformOrigin = {
-    x: (eventCoordinates.x - rect.left) / rect.width * 100,
-    y: (eventCoordinates.y - rect.top) / rect.height * 100
+  const {
+    top: top2,
+    left: left2,
+    right: right2,
+    bottom: bottom2
+  } = element.getBoundingClientRect();
+  return {
+    top: top2,
+    left: left2,
+    right: right2,
+    bottom: bottom2,
+    width: element.clientWidth,
+    height: element.clientHeight
   };
-  return transformOrigin.x + "% " + transformOrigin.y + "%";
 }
-function sortCollisionsAsc(_ref, _ref2) {
-  let {
-    data: {
-      value: a2
-    }
-  } = _ref;
-  let {
-    data: {
-      value: b2
-    }
-  } = _ref2;
-  return a2 - b2;
+function getScrollOffsets(scrollableAncestors) {
+  return scrollableAncestors.reduce((acc, node2) => {
+    return add$1(acc, getScrollCoordinates(node2));
+  }, defaultCoordinates);
 }
-function sortCollisionsDesc(_ref3, _ref4) {
-  let {
-    data: {
-      value: a2
-    }
-  } = _ref3;
-  let {
-    data: {
-      value: b2
-    }
-  } = _ref4;
-  return b2 - a2;
+function getScrollXOffset(scrollableAncestors) {
+  return scrollableAncestors.reduce((acc, node2) => {
+    return acc + getScrollXCoordinate(node2);
+  }, 0);
 }
-function getFirstCollision(collisions, property) {
-  if (!collisions || collisions.length === 0) {
-    return null;
-  }
-  const [firstCollision] = collisions;
-  return firstCollision[property];
+function getScrollYOffset(scrollableAncestors) {
+  return scrollableAncestors.reduce((acc, node2) => {
+    return acc + getScrollYCoordinate(node2);
+  }, 0);
 }
-function centerOfRectangle(rect, left2, top2) {
-  if (left2 === void 0) {
-    left2 = rect.left;
+function scrollIntoViewIfNeeded(element, measure) {
+  if (measure === void 0) {
+    measure = getClientRect;
   }
-  if (top2 === void 0) {
-    top2 = rect.top;
+  if (!element) {
+    return;
   }
-  return {
-    x: left2 + rect.width * 0.5,
-    y: top2 + rect.height * 0.5
-  };
-}
-const closestCenter = (_ref) => {
-  let {
-    collisionRect,
-    droppableRects,
-    droppableContainers
-  } = _ref;
-  const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
-  const collisions = [];
-  for (const droppableContainer of droppableContainers) {
-    const {
-      id: id2
-    } = droppableContainer;
-    const rect = droppableRects.get(id2);
-    if (rect) {
-      const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
-      collisions.push({
-        id: id2,
-        data: {
-          droppableContainer,
-          value: distBetween
-        }
-      });
-    }
+  const {
+    top: top2,
+    left: left2,
+    bottom: bottom2,
+    right: right2
+  } = measure(element);
+  const firstScrollableAncestor = getFirstScrollableAncestor(element);
+  if (!firstScrollableAncestor) {
+    return;
   }
-  return collisions.sort(sortCollisionsAsc);
-};
-function getIntersectionRatio(entry, target) {
-  const top2 = Math.max(target.top, entry.top);
-  const left2 = Math.max(target.left, entry.left);
-  const right2 = Math.min(target.left + target.width, entry.left + entry.width);
-  const bottom2 = Math.min(target.top + target.height, entry.top + entry.height);
-  const width2 = right2 - left2;
-  const height2 = bottom2 - top2;
-  if (left2 < right2 && top2 < bottom2) {
-    const targetArea = target.width * target.height;
-    const entryArea = entry.width * entry.height;
-    const intersectionArea = width2 * height2;
-    const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
-    return Number(intersectionRatio.toFixed(4));
+  if (bottom2 <= 0 || right2 <= 0 || top2 >= window.innerHeight || left2 >= window.innerWidth) {
+    element.scrollIntoView({
+      block: "center",
+      inline: "center"
+    });
   }
-  return 0;
 }
-const rectIntersection = (_ref) => {
-  let {
-    collisionRect,
-    droppableRects,
-    droppableContainers
-  } = _ref;
-  const collisions = [];
-  for (const droppableContainer of droppableContainers) {
-    const {
-      id: id2
-    } = droppableContainer;
-    const rect = droppableRects.get(id2);
-    if (rect) {
-      const intersectionRatio = getIntersectionRatio(rect, collisionRect);
-      if (intersectionRatio > 0) {
-        collisions.push({
-          id: id2,
-          data: {
-            droppableContainer,
-            value: intersectionRatio
-          }
+const properties = [["x", ["left", "right"], getScrollXOffset], ["y", ["top", "bottom"], getScrollYOffset]];
+class Rect {
+  constructor(rect, element) {
+    this.rect = void 0;
+    this.width = void 0;
+    this.height = void 0;
+    this.top = void 0;
+    this.bottom = void 0;
+    this.right = void 0;
+    this.left = void 0;
+    const scrollableAncestors = getScrollableAncestors(element);
+    const scrollOffsets = getScrollOffsets(scrollableAncestors);
+    this.rect = {
+      ...rect
+    };
+    this.width = rect.width;
+    this.height = rect.height;
+    for (const [axis, keys2, getScrollOffset] of properties) {
+      for (const key2 of keys2) {
+        Object.defineProperty(this, key2, {
+          get: () => {
+            const currentOffsets = getScrollOffset(scrollableAncestors);
+            const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
+            return this.rect[key2] + scrollOffsetsDeltla;
+          },
+          enumerable: true
         });
       }
     }
-  }
-  return collisions.sort(sortCollisionsDesc);
-};
-function adjustScale(transform, rect1, rect2) {
-  return {
-    ...transform,
-    scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
-    scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
-  };
-}
-function getRectDelta(rect1, rect2) {
-  return rect1 && rect2 ? {
-    x: rect1.left - rect2.left,
-    y: rect1.top - rect2.top
-  } : defaultCoordinates;
-}
-function createRectAdjustmentFn(modifier) {
-  return function adjustClientRect(rect) {
-    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((acc, adjustment) => ({
-      ...acc,
-      top: acc.top + modifier * adjustment.y,
-      bottom: acc.bottom + modifier * adjustment.y,
-      left: acc.left + modifier * adjustment.x,
-      right: acc.right + modifier * adjustment.x
-    }), {
-      ...rect
+    Object.defineProperty(this, "rect", {
+      enumerable: false
     });
-  };
+  }
 }
-const getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
-function parseTransform(transform) {
-  if (transform.startsWith("matrix3d(")) {
-    const transformArray = transform.slice(9, -1).split(/, /);
-    return {
-      x: +transformArray[12],
-      y: +transformArray[13],
-      scaleX: +transformArray[0],
-      scaleY: +transformArray[5]
-    };
-  } else if (transform.startsWith("matrix(")) {
-    const transformArray = transform.slice(7, -1).split(/, /);
-    return {
-      x: +transformArray[4],
-      y: +transformArray[5],
-      scaleX: +transformArray[0],
-      scaleY: +transformArray[3]
+class Listeners {
+  constructor(target) {
+    this.target = void 0;
+    this.listeners = [];
+    this.removeAll = () => {
+      this.listeners.forEach((listener) => {
+        var _this$target;
+        return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
+      });
     };
+    this.target = target;
   }
-  return null;
-}
-function inverseTransform(rect, transform, transformOrigin) {
-  const parsedTransform = parseTransform(transform);
-  if (!parsedTransform) {
-    return rect;
+  add(eventName, handler, options) {
+    var _this$target2;
+    (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
+    this.listeners.push([eventName, handler, options]);
   }
-  const {
-    scaleX,
-    scaleY,
-    x: translateX,
-    y: translateY
-  } = parsedTransform;
-  const x2 = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
-  const y2 = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
-  const w2 = scaleX ? rect.width / scaleX : rect.width;
-  const h = scaleY ? rect.height / scaleY : rect.height;
-  return {
-    width: w2,
-    height: h,
-    top: y2,
-    right: x2 + w2,
-    bottom: y2 + h,
-    left: x2
-  };
 }
-const defaultOptions$2 = {
-  ignoreTransform: false
-};
-function getClientRect(element, options) {
-  if (options === void 0) {
-    options = defaultOptions$2;
-  }
-  let rect = element.getBoundingClientRect();
-  if (options.ignoreTransform) {
-    const {
-      transform,
-      transformOrigin
-    } = getWindow(element).getComputedStyle(element);
-    if (transform) {
-      rect = inverseTransform(rect, transform, transformOrigin);
-    }
-  }
+function getEventListenerTarget(target) {
   const {
-    top: top2,
-    left: left2,
-    width: width2,
-    height: height2,
-    bottom: bottom2,
-    right: right2
-  } = rect;
-  return {
-    top: top2,
-    left: left2,
-    width: width2,
-    height: height2,
-    bottom: bottom2,
-    right: right2
-  };
-}
-function getTransformAgnosticClientRect(element) {
-  return getClientRect(element, {
-    ignoreTransform: true
-  });
-}
-function getWindowClientRect(element) {
-  const width2 = element.innerWidth;
-  const height2 = element.innerHeight;
-  return {
-    top: 0,
-    left: 0,
-    right: width2,
-    bottom: height2,
-    width: width2,
-    height: height2
-  };
+    EventTarget
+  } = getWindow(target);
+  return target instanceof EventTarget ? target : getOwnerDocument(target);
 }
-function isFixed(node2, computedStyle) {
-  if (computedStyle === void 0) {
-    computedStyle = getWindow(node2).getComputedStyle(node2);
+function hasExceededDistance(delta, measurement) {
+  const dx = Math.abs(delta.x);
+  const dy = Math.abs(delta.y);
+  if (typeof measurement === "number") {
+    return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
   }
-  return computedStyle.position === "fixed";
-}
-function isScrollable(element, computedStyle) {
-  if (computedStyle === void 0) {
-    computedStyle = getWindow(element).getComputedStyle(element);
+  if ("x" in measurement && "y" in measurement) {
+    return dx > measurement.x && dy > measurement.y;
   }
-  const overflowRegex = /(auto|scroll|overlay)/;
-  const properties2 = ["overflow", "overflowX", "overflowY"];
-  return properties2.some((property) => {
-    const value = computedStyle[property];
-    return typeof value === "string" ? overflowRegex.test(value) : false;
-  });
-}
-function getScrollableAncestors(element, limit2) {
-  const scrollParents = [];
-  function findScrollableAncestors(node2) {
-    if (limit2 != null && scrollParents.length >= limit2) {
-      return scrollParents;
-    }
-    if (!node2) {
-      return scrollParents;
-    }
-    if (isDocument(node2) && node2.scrollingElement != null && !scrollParents.includes(node2.scrollingElement)) {
-      scrollParents.push(node2.scrollingElement);
-      return scrollParents;
-    }
-    if (!isHTMLElement(node2) || isSVGElement(node2)) {
-      return scrollParents;
-    }
-    if (scrollParents.includes(node2)) {
-      return scrollParents;
-    }
-    const computedStyle = getWindow(element).getComputedStyle(node2);
-    if (node2 !== element) {
-      if (isScrollable(node2, computedStyle)) {
-        scrollParents.push(node2);
-      }
-    }
-    if (isFixed(node2, computedStyle)) {
-      return scrollParents;
-    }
-    return findScrollableAncestors(node2.parentNode);
+  if ("x" in measurement) {
+    return dx > measurement.x;
   }
-  if (!element) {
-    return scrollParents;
+  if ("y" in measurement) {
+    return dy > measurement.y;
   }
-  return findScrollableAncestors(element);
+  return false;
 }
-function getFirstScrollableAncestor(node2) {
-  const [firstScrollableAncestor] = getScrollableAncestors(node2, 1);
-  return firstScrollableAncestor != null ? firstScrollableAncestor : null;
+var EventName;
+(function(EventName2) {
+  EventName2["Click"] = "click";
+  EventName2["DragStart"] = "dragstart";
+  EventName2["Keydown"] = "keydown";
+  EventName2["ContextMenu"] = "contextmenu";
+  EventName2["Resize"] = "resize";
+  EventName2["SelectionChange"] = "selectionchange";
+  EventName2["VisibilityChange"] = "visibilitychange";
+})(EventName || (EventName = {}));
+function preventDefault(event) {
+  event.preventDefault();
 }
-function getScrollableElement(element) {
-  if (!canUseDOM || !element) {
-    return null;
-  }
-  if (isWindow(element)) {
-    return element;
-  }
-  if (!isNode(element)) {
-    return null;
-  }
-  if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {
-    return window;
-  }
-  if (isHTMLElement(element)) {
-    return element;
-  }
-  return null;
-}
-function getScrollXCoordinate(element) {
-  if (isWindow(element)) {
-    return element.scrollX;
-  }
-  return element.scrollLeft;
-}
-function getScrollYCoordinate(element) {
-  if (isWindow(element)) {
-    return element.scrollY;
-  }
-  return element.scrollTop;
-}
-function getScrollCoordinates(element) {
-  return {
-    x: getScrollXCoordinate(element),
-    y: getScrollYCoordinate(element)
-  };
-}
-var Direction;
-(function(Direction2) {
-  Direction2[Direction2["Forward"] = 1] = "Forward";
-  Direction2[Direction2["Backward"] = -1] = "Backward";
-})(Direction || (Direction = {}));
-function isDocumentScrollingElement(element) {
-  if (!canUseDOM || !element) {
-    return false;
-  }
-  return element === document.scrollingElement;
-}
-function getScrollPosition(scrollingContainer) {
-  const minScroll = {
-    x: 0,
-    y: 0
-  };
-  const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
-    height: window.innerHeight,
-    width: window.innerWidth
-  } : {
-    height: scrollingContainer.clientHeight,
-    width: scrollingContainer.clientWidth
-  };
-  const maxScroll = {
-    x: scrollingContainer.scrollWidth - dimensions.width,
-    y: scrollingContainer.scrollHeight - dimensions.height
-  };
-  const isTop = scrollingContainer.scrollTop <= minScroll.y;
-  const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
-  const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
-  const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
-  return {
-    isTop,
-    isLeft,
-    isBottom,
-    isRight,
-    maxScroll,
-    minScroll
-  };
+function stopPropagation(event) {
+  event.stopPropagation();
 }
-const defaultThreshold = {
-  x: 0.2,
-  y: 0.2
+var KeyboardCode;
+(function(KeyboardCode2) {
+  KeyboardCode2["Space"] = "Space";
+  KeyboardCode2["Down"] = "ArrowDown";
+  KeyboardCode2["Right"] = "ArrowRight";
+  KeyboardCode2["Left"] = "ArrowLeft";
+  KeyboardCode2["Up"] = "ArrowUp";
+  KeyboardCode2["Esc"] = "Escape";
+  KeyboardCode2["Enter"] = "Enter";
+})(KeyboardCode || (KeyboardCode = {}));
+const defaultKeyboardCodes = {
+  start: [KeyboardCode.Space, KeyboardCode.Enter],
+  cancel: [KeyboardCode.Esc],
+  end: [KeyboardCode.Space, KeyboardCode.Enter]
 };
-function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
+const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
-    top: top2,
-    left: left2,
-    right: right2,
-    bottom: bottom2
+    currentCoordinates
   } = _ref;
-  if (acceleration === void 0) {
-    acceleration = 10;
-  }
-  if (thresholdPercentage === void 0) {
-    thresholdPercentage = defaultThreshold;
-  }
-  const {
-    isTop,
-    isBottom,
-    isLeft,
-    isRight
-  } = getScrollPosition(scrollContainer);
-  const direction = {
-    x: 0,
-    y: 0
-  };
-  const speed = {
-    x: 0,
-    y: 0
-  };
-  const threshold = {
-    height: scrollContainerRect.height * thresholdPercentage.y,
-    width: scrollContainerRect.width * thresholdPercentage.x
-  };
-  if (!isTop && top2 <= scrollContainerRect.top + threshold.height) {
-    direction.y = Direction.Backward;
-    speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top2) / threshold.height);
-  } else if (!isBottom && bottom2 >= scrollContainerRect.bottom - threshold.height) {
-    direction.y = Direction.Forward;
-    speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom2) / threshold.height);
-  }
-  if (!isRight && right2 >= scrollContainerRect.right - threshold.width) {
-    direction.x = Direction.Forward;
-    speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right2) / threshold.width);
-  } else if (!isLeft && left2 <= scrollContainerRect.left + threshold.width) {
-    direction.x = Direction.Backward;
-    speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left2) / threshold.width);
+  switch (event.code) {
+    case KeyboardCode.Right:
+      return {
+        ...currentCoordinates,
+        x: currentCoordinates.x + 25
+      };
+    case KeyboardCode.Left:
+      return {
+        ...currentCoordinates,
+        x: currentCoordinates.x - 25
+      };
+    case KeyboardCode.Down:
+      return {
+        ...currentCoordinates,
+        y: currentCoordinates.y + 25
+      };
+    case KeyboardCode.Up:
+      return {
+        ...currentCoordinates,
+        y: currentCoordinates.y - 25
+      };
   }
-  return {
-    direction,
-    speed
-  };
-}
-function getScrollElementRect(element) {
-  if (element === document.scrollingElement) {
+  return void 0;
+};
+class KeyboardSensor {
+  constructor(props) {
+    this.props = void 0;
+    this.autoScrollEnabled = false;
+    this.referenceCoordinates = void 0;
+    this.listeners = void 0;
+    this.windowListeners = void 0;
+    this.props = props;
     const {
-      innerWidth: innerWidth2,
-      innerHeight: innerHeight2
-    } = window;
-    return {
-      top: 0,
-      left: 0,
-      right: innerWidth2,
-      bottom: innerHeight2,
-      width: innerWidth2,
-      height: innerHeight2
-    };
-  }
-  const {
-    top: top2,
-    left: left2,
-    right: right2,
-    bottom: bottom2
-  } = element.getBoundingClientRect();
-  return {
-    top: top2,
-    left: left2,
-    right: right2,
-    bottom: bottom2,
-    width: element.clientWidth,
-    height: element.clientHeight
-  };
-}
-function getScrollOffsets(scrollableAncestors) {
-  return scrollableAncestors.reduce((acc, node2) => {
-    return add$1(acc, getScrollCoordinates(node2));
-  }, defaultCoordinates);
-}
-function getScrollXOffset(scrollableAncestors) {
-  return scrollableAncestors.reduce((acc, node2) => {
-    return acc + getScrollXCoordinate(node2);
-  }, 0);
-}
-function getScrollYOffset(scrollableAncestors) {
-  return scrollableAncestors.reduce((acc, node2) => {
-    return acc + getScrollYCoordinate(node2);
-  }, 0);
-}
-function scrollIntoViewIfNeeded(element, measure) {
-  if (measure === void 0) {
-    measure = getClientRect;
+      event: {
+        target
+      }
+    } = props;
+    this.props = props;
+    this.listeners = new Listeners(getOwnerDocument(target));
+    this.windowListeners = new Listeners(getWindow(target));
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.attach();
   }
-  if (!element) {
-    return;
+  attach() {
+    this.handleStart();
+    this.windowListeners.add(EventName.Resize, this.handleCancel);
+    this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
+    setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
   }
-  const {
-    top: top2,
-    left: left2,
-    bottom: bottom2,
-    right: right2
-  } = measure(element);
-  const firstScrollableAncestor = getFirstScrollableAncestor(element);
-  if (!firstScrollableAncestor) {
-    return;
-  }
-  if (bottom2 <= 0 || right2 <= 0 || top2 >= window.innerHeight || left2 >= window.innerWidth) {
-    element.scrollIntoView({
-      block: "center",
-      inline: "center"
-    });
-  }
-}
-const properties = [["x", ["left", "right"], getScrollXOffset], ["y", ["top", "bottom"], getScrollYOffset]];
-class Rect {
-  constructor(rect, element) {
-    this.rect = void 0;
-    this.width = void 0;
-    this.height = void 0;
-    this.top = void 0;
-    this.bottom = void 0;
-    this.right = void 0;
-    this.left = void 0;
-    const scrollableAncestors = getScrollableAncestors(element);
-    const scrollOffsets = getScrollOffsets(scrollableAncestors);
-    this.rect = {
-      ...rect
-    };
-    this.width = rect.width;
-    this.height = rect.height;
-    for (const [axis, keys2, getScrollOffset] of properties) {
-      for (const key2 of keys2) {
-        Object.defineProperty(this, key2, {
-          get: () => {
-            const currentOffsets = getScrollOffset(scrollableAncestors);
-            const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
-            return this.rect[key2] + scrollOffsetsDeltla;
-          },
-          enumerable: true
-        });
-      }
-    }
-    Object.defineProperty(this, "rect", {
-      enumerable: false
-    });
-  }
-}
-class Listeners {
-  constructor(target) {
-    this.target = void 0;
-    this.listeners = [];
-    this.removeAll = () => {
-      this.listeners.forEach((listener) => {
-        var _this$target;
-        return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
-      });
-    };
-    this.target = target;
-  }
-  add(eventName, handler, options) {
-    var _this$target2;
-    (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
-    this.listeners.push([eventName, handler, options]);
-  }
-}
-function getEventListenerTarget(target) {
-  const {
-    EventTarget
-  } = getWindow(target);
-  return target instanceof EventTarget ? target : getOwnerDocument(target);
-}
-function hasExceededDistance(delta, measurement) {
-  const dx = Math.abs(delta.x);
-  const dy = Math.abs(delta.y);
-  if (typeof measurement === "number") {
-    return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
-  }
-  if ("x" in measurement && "y" in measurement) {
-    return dx > measurement.x && dy > measurement.y;
-  }
-  if ("x" in measurement) {
-    return dx > measurement.x;
-  }
-  if ("y" in measurement) {
-    return dy > measurement.y;
-  }
-  return false;
-}
-var EventName;
-(function(EventName2) {
-  EventName2["Click"] = "click";
-  EventName2["DragStart"] = "dragstart";
-  EventName2["Keydown"] = "keydown";
-  EventName2["ContextMenu"] = "contextmenu";
-  EventName2["Resize"] = "resize";
-  EventName2["SelectionChange"] = "selectionchange";
-  EventName2["VisibilityChange"] = "visibilitychange";
-})(EventName || (EventName = {}));
-function preventDefault(event) {
-  event.preventDefault();
-}
-function stopPropagation(event) {
-  event.stopPropagation();
-}
-var KeyboardCode;
-(function(KeyboardCode2) {
-  KeyboardCode2["Space"] = "Space";
-  KeyboardCode2["Down"] = "ArrowDown";
-  KeyboardCode2["Right"] = "ArrowRight";
-  KeyboardCode2["Left"] = "ArrowLeft";
-  KeyboardCode2["Up"] = "ArrowUp";
-  KeyboardCode2["Esc"] = "Escape";
-  KeyboardCode2["Enter"] = "Enter";
-})(KeyboardCode || (KeyboardCode = {}));
-const defaultKeyboardCodes = {
-  start: [KeyboardCode.Space, KeyboardCode.Enter],
-  cancel: [KeyboardCode.Esc],
-  end: [KeyboardCode.Space, KeyboardCode.Enter]
-};
-const defaultKeyboardCoordinateGetter = (event, _ref) => {
-  let {
-    currentCoordinates
-  } = _ref;
-  switch (event.code) {
-    case KeyboardCode.Right:
-      return {
-        ...currentCoordinates,
-        x: currentCoordinates.x + 25
-      };
-    case KeyboardCode.Left:
-      return {
-        ...currentCoordinates,
-        x: currentCoordinates.x - 25
-      };
-    case KeyboardCode.Down:
-      return {
-        ...currentCoordinates,
-        y: currentCoordinates.y + 25
-      };
-    case KeyboardCode.Up:
-      return {
-        ...currentCoordinates,
-        y: currentCoordinates.y - 25
-      };
-  }
-  return void 0;
-};
-class KeyboardSensor {
-  constructor(props) {
-    this.props = void 0;
-    this.autoScrollEnabled = false;
-    this.referenceCoordinates = void 0;
-    this.listeners = void 0;
-    this.windowListeners = void 0;
-    this.props = props;
-    const {
-      event: {
-        target
-      }
-    } = props;
-    this.props = props;
-    this.listeners = new Listeners(getOwnerDocument(target));
-    this.windowListeners = new Listeners(getWindow(target));
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.attach();
-  }
-  attach() {
-    this.handleStart();
-    this.windowListeners.add(EventName.Resize, this.handleCancel);
-    this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
-    setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
-  }
-  handleStart() {
-    const {
-      activeNode,
-      onStart
-    } = this.props;
-    const node2 = activeNode.node.current;
-    if (node2) {
-      scrollIntoViewIfNeeded(node2);
-    }
-    onStart(defaultCoordinates);
+  handleStart() {
+    const {
+      activeNode,
+      onStart
+    } = this.props;
+    const node2 = activeNode.node.current;
+    if (node2) {
+      scrollIntoViewIfNeeded(node2);
+    }
+    onStart(defaultCoordinates);
   }
   handleKeyDown(event) {
     if (isKeyboardEvent(event)) {
@@ -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) {
@@ -14478,199 +13722,1011 @@ const MetaContent = ({ item: item2 }) => {
         "data-testid": testId && `${testId}-details`,
         children: details2
       }
-    ),
-    metadata2 && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: listStyles.metadata,
-        "data-testid": testId && `${testId}-metadata`,
-        children: metadata2
+    ),
+    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;
+    }
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
+    result = fn(...newDeps);
+    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = " " + str;
+        }
+        return str;
+      };
+      console.info(
+        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * resultFpsPercentage, 120)
+        )}deg 100% 31%);`,
+        opts == null ? void 0 : opts.key
+      );
+    }
+    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
+    return result;
+  };
+}
+function notUndefined(value, msg2) {
+  if (value === void 0) {
+    throw new Error(`Unexpected undefined${""}`);
+  } else {
+    return value;
+  }
+}
+const approxEqual = (a2, b2) => Math.abs(a2 - b2) < 1;
+const debounce$2 = (targetWindow, fn, ms2) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms2);
+  };
+};
+const defaultKeyExtractor = (index2) => index2;
+const defaultRangeExtractor = (range2) => {
+  const start = Math.max(range2.startIndex - range2.overscan, 0);
+  const end = Math.min(range2.endIndex + range2.overscan, range2.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb2) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width: width2, height: height2 } = rect;
+    cb2({ width: Math.round(width2), height: Math.round(height2) });
+  };
+  handler(element.getBoundingClientRect());
+  if (!targetWindow.ResizeObserver) {
+    return () => {
+    };
+  }
+  const observer = new targetWindow.ResizeObserver((entries2) => {
+    const entry = entries2[0];
+    if (entry == null ? void 0 : entry.borderBoxSize) {
+      const box = entry.borderBoxSize[0];
+      if (box) {
+        handler({ width: box.inlineSize, height: box.blockSize });
+        return;
+      }
+    }
+    handler(element.getBoundingClientRect());
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => {
+    observer.unobserve(element);
+  };
+};
+const addEventListenerOptions = {
+  passive: true
+};
+const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
+const observeElementOffset = (instance, cb2) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  let offset = 0;
+  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce$2(
+    targetWindow,
+    () => {
+      cb2(offset, false);
+    },
+    instance.options.isScrollingResetDelay
+  );
+  const createHandler = (isScrolling) => () => {
+    const { horizontal, isRtl } = instance.options;
+    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+    fallback();
+    cb2(offset, isScrolling);
+  };
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  endHandler();
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  return () => {
+    element.removeEventListener("scroll", handler);
+    element.removeEventListener("scrollend", endHandler);
+  };
+};
+const measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size2 = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size2;
+    }
+  }
+  return Math.round(
+    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
+  );
+};
+const elementScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a2, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a2 = instance.scrollElement) == null ? void 0 : _a2.scrollTo) == null ? void 0 : _b.call(_a2, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.scrollToIndexTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.elementsCache = /* @__PURE__ */ new Map();
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get3 = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries2) => {
+          entries2.forEach((entry) => {
+            this._measureElement(entry.target, entry);
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a2;
+          (_a2 = get3()) == null ? void 0 : _a2.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a2;
+          return (_a2 = get3()) == null ? void 0 : _a2.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a2;
+          return (_a2 = get3()) == null ? void 0 : _a2.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      Object.entries(opts2).forEach(([key2, value]) => {
+        if (typeof value === "undefined") delete opts2[key2];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {
+        },
+        measureElement,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: true,
+        isRtl: false,
+        useScrollendEvent: true,
+        ...opts2
+      };
+    };
+    this.notify = (sync2) => {
+      var _a2, _b;
+      (_b = (_a2 = this.options).onChange) == null ? void 0 : _b.call(_a2, this, sync2);
+    };
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    );
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d2) => d2());
+      this.unsubs = [];
+      this.observer.disconnect();
+      this.scrollElement = null;
+      this.targetWindow = null;
+    };
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _a2;
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        if (!scrollElement) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = scrollElement;
+        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
+          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
+        } else {
+          this.targetWindow = ((_a2 = this.scrollElement) == null ? void 0 : _a2.window) ?? null;
+        }
+        this.elementsCache.forEach((cached) => {
+          this.observer.observe(cached);
+        });
+        this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        });
+        this.unsubs.push(
+          this.options.observeElementRect(this, (rect) => {
+            this.scrollRect = rect;
+            this.maybeNotify();
+          })
+        );
+        this.unsubs.push(
+          this.options.observeElementOffset(this, (offset, isScrolling) => {
+            this.scrollAdjustments = 0;
+            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
+            this.scrollOffset = offset;
+            this.isScrolling = isScrolling;
+            this.maybeNotify();
+          })
+        );
+      }
+    };
+    this.getSize = () => {
+      if (!this.options.enabled) {
+        this.scrollRect = null;
+        return 0;
+      }
+      this.scrollRect = this.scrollRect ?? this.options.initialRect;
+      return this.scrollRect[this.options.horizontal ? "width" : "height"];
+    };
+    this.getScrollOffset = () => {
+      if (!this.options.enabled) {
+        this.scrollOffset = null;
+        return 0;
+      }
+      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
+      return this.scrollOffset;
+    };
+    this.getFurthestMeasurement = (measurements, index2) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
+      const furthestMeasurements = /* @__PURE__ */ new Map();
+      for (let m2 = index2 - 1; m2 >= 0; m2--) {
+        const measurement = measurements[m2];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        const previousFurthestMeasurement = furthestMeasurements.get(
+          measurement.lane
+        );
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a2, b2) => {
+        if (a2.end === b2.end) {
+          return a2.index - b2.index;
+        }
+        return a2.end - b2.end;
+      })[0] : void 0;
+    };
+    this.getMeasurementOptions = memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getMeasurements = memo(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
+        if (!enabled) {
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          return [];
+        }
+        if (this.measurementsCache.length === 0) {
+          this.measurementsCache = this.options.initialMeasurementsCache;
+          this.measurementsCache.forEach((item2) => {
+            this.itemSizeCache.set(item2.key, item2.size);
+          });
+        }
+        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        const measurements = this.measurementsCache.slice(0, min);
+        for (let i = min; i < count; i++) {
+          const key2 = getItemKey(i);
+          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+          const measuredSize = itemSizeCache.get(key2);
+          const size2 = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end = start + size2;
+          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+          measurements[i] = {
+            index: i,
+            start,
+            size: size2,
+            end,
+            key: key2,
+            lane
+          };
+        }
+        this.measurementsCache = measurements;
+        return measurements;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
+      (measurements, outerSize, scrollOffset) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset
+        }) : null;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    );
+    this.getIndexes = memo(
+      () => [
+        this.options.rangeExtractor,
+        this.calculateRange(),
+        this.options.overscan,
+        this.options.count
+      ],
+      (rangeExtractor, range2, overscan, count) => {
+        return range2 === null ? [] : rangeExtractor({
+          startIndex: range2.startIndex,
+          endIndex: range2.endIndex,
+          overscan,
+          count
+        });
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getIndexes",
+        debug: () => this.options.debug
+      }
+    );
+    this.indexFromElement = (node2) => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node2.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(
+          `Missing attribute name '${attributeName}={index}' on measured element.`
+        );
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = (node2, entry) => {
+      const index2 = this.indexFromElement(node2);
+      const item2 = this.measurementsCache[index2];
+      if (!item2) {
+        return;
+      }
+      const key2 = item2.key;
+      const prevNode = this.elementsCache.get(key2);
+      if (prevNode !== node2) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node2);
+        this.elementsCache.set(key2, node2);
       }
-    )
-  ] });
-};
-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
+            )) })
           }
         )
       ]