asma-ui-table 1.0.139 → 1.0.141

package/dist/asma-ui-table.es.js

@@ -9705,7 +9705,7 @@ function selectColumn(isFixed2, rowHeight) {
         {
           type: "button",
           style: { height: rowHeight ? rowHeight : "auto" },
-          className: "pl-2 flex items-center justify-start size-full",
+          className: "pl-2 flex w-full items-center justify-start m-0 p-0",
           onClick: () => cell.row.toggleSelected(),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             StyledCheckbox,
@@ -13671,1458 +13671,1402 @@ const Checkmark = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     ]
   }
 );
-function memo(getDeps, fn, opts) {
-  let deps = opts.initialDeps ?? [];
-  let result;
-  let isInitial = true;
-  function memoizedFunction() {
-    var _a, _b, _c;
-    let depTime;
-    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts)))
-      depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== 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
-      );
-    }
-    if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) {
-      opts.onChange(result);
-    }
-    isInitial = false;
-    return result;
-  }
-  memoizedFunction.updateDeps = (newDeps) => {
-    deps = newDeps;
-  };
-  return memoizedFunction;
-}
-function notUndefined(value, msg) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
-  } else {
-    return value;
-  }
+function TableRows({
+  styledTableProps,
+  table,
+  columnWindow
+}) {
+  const rows = styledTableProps.hideFooter ? table.getExpandedRowModel().rows : table.getRowModel().rows;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: rows.map((row, index) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TableRow,
+      {
+        styledTableProps,
+        row,
+        index,
+        columnWindow
+      },
+      row.id
+    );
+  }) });
 }
-const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
-const debounce = (targetWindow, fn, ms) => {
-  let timeoutId;
-  return function(...args) {
-    targetWindow.clearTimeout(timeoutId);
-    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
-  };
-};
-const getRect = (element) => {
-  const { offsetWidth, offsetHeight } = element;
-  return { width: offsetWidth, height: offsetHeight };
-};
-const defaultKeyExtractor = (index) => index;
-const defaultRangeExtractor = (range) => {
-  const start = Math.max(range.startIndex - range.overscan, 0);
-  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
-  const arr = [];
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-const observeElementRect = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
+function TableBody({
+  table,
+  styledTableProps,
+  columnWindow
+}) {
+  const { columns, data, loading, enableDnd, rowHeight } = styledTableProps;
+  const colSpan = table.getAllLeafColumns().length || columns.length || 1;
+  if (loading && data.length === 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style$1["tbody"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableSkeleton, { colSpan, rowHeight }) });
   }
-  const handler = (rect) => {
-    const { width: width2, height: height2 } = rect;
-    cb({ width: Math.round(width2), height: Math.round(height2) });
-  };
-  handler(getRect(element));
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
+  if (data.length === 0) {
+    return null;
   }
-  const observer = new targetWindow.ResizeObserver((entries) => {
-    const run = () => {
-      const entry = entries[0];
-      if (entry == null ? void 0 : entry.borderBoxSize) {
-        const box = entry.borderBoxSize[0];
-        if (box) {
-          handler({ width: box.inlineSize, height: box.blockSize });
-          return;
-        }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style$1["tbody"], children: enableDnd ? /* @__PURE__ */ jsxRuntimeExports.jsx(SortableContext, { items: data, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRows, { table, styledTableProps, columnWindow }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(TableRows, { table, styledTableProps, columnWindow }) });
+}
+function LoadingIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z",
+        opacity: 0.5
       }
-      handler(getRect(element));
-    };
-    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        dur: "1s",
+        from: "0 12 12",
+        repeatCount: "indefinite",
+        to: "360 12 12",
+        type: "rotate"
+      }
+    ) })
+  ] });
+}
+const Fetching = ({ fetching = false }) => {
+  return fetching ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-10 bg-white/40 left-0 top-0 right-0 bottom-0 flex items-center justify-center ", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIcon, { className: style$1["loading-icon"], width: 50, height: 50 }) }) : null;
 };
-const addEventListenerOptions = {
-  passive: true
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z" }) });
+}
+const style = {
+  "table-pagination": "_table-pagination_pu6mb_1",
+  "table-pagination__pages-list": "_table-pagination__pages-list_pu6mb_11",
+  "table-pagination__pages-list__page": "_table-pagination__pages-list__page_pu6mb_16",
+  "page-selected": "_page-selected_pu6mb_27",
+  "check-icon": "_check-icon_pu6mb_30"
 };
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb) => {
-  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(
-    targetWindow,
-    () => {
-      cb(offset, false);
+function ChevronLeftIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z" }) });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z" }) });
+}
+const StyledMenuItem = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  MenuItem,
+  {
+    classes: { root: "flex gap-x-1" },
+    sx: {
+      padding: "8px",
+      "&.Mui-selected": {
+        backgroundColor: "var(--colors-gama-50)",
+        "&:hover": { backgroundColor: "var(--colors-gama-50)" }
+      }
     },
-    instance.options.isScrollingResetDelay
-  );
-  const createHandler = (isScrolling) => () => {
-    const { horizontal, isRtl } = instance.options;
-    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
-    fallback();
-    cb(offset, isScrolling);
-  };
-  const handler = createHandler(true);
-  const endHandler = createHandler(false);
-  element.addEventListener("scroll", handler, addEventListenerOptions);
-  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
-  if (registerScrollendEvent) {
-    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
-  }
-  return () => {
-    element.removeEventListener("scroll", handler);
-    if (registerScrollendEvent) {
-      element.removeEventListener("scrollend", endHandler);
-    }
-  };
-};
-const measureElement = (element, entry, instance) => {
-  if (entry == null ? void 0 : entry.borderBoxSize) {
-    const box = entry.borderBoxSize[0];
-    if (box) {
-      const size = Math.round(
-        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
-      );
-      return size;
-    }
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CheckIcon,
+        {
+          width: 24,
+          height: 24,
+          color: props.selected ? "var(--colors-gama-500)" : "transparent",
+          style: { transition: "color 0.2s ease" }
+        }
+      ),
+      props.children
+    ]
   }
-  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
-};
-const elementScroll = (offset, {
-  adjustments = 0,
-  behavior
-}, instance) => {
-  var _a, _b;
-  const toOffset = offset + adjustments;
-  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
-    [instance.options.horizontal ? "left" : "top"]: toOffset,
-    behavior
-  });
-};
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollState = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.laneAssignments = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.prevLanes = void 0;
-    this.lanesChangedFlag = false;
-    this.lanesSettling = false;
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.now = () => {
-      var _a, _b, _c;
-      return ((_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) ?? Date.now();
-    };
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const get = () => {
-        if (_ro) {
-          return _ro;
-        }
-        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
-          return null;
-        }
-        return _ro = new this.targetWindow.ResizeObserver((entries) => {
-          entries.forEach((entry) => {
-            const run = () => {
-              this._measureElement(entry.target, entry);
-            };
-            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-          });
-        });
-      };
-      return {
-        disconnect: () => {
-          var _a;
-          (_a = get()) == null ? void 0 : _a.disconnect();
-          _ro = null;
-        },
-        observe: (target) => {
-          var _a;
-          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
-        },
-        unobserve: (target) => {
-          var _a;
-          return (_a = get()) == null ? void 0 : _a.unobserve(target);
-        }
-      };
-    })();
-    this.range = null;
-    this.setOptions = (opts2) => {
-      Object.entries(opts2).forEach(([key, value]) => {
-        if (typeof value === "undefined")
-          delete opts2[key];
-      });
-      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: false,
-        useAnimationFrameWithResizeObserver: false,
-        ...opts2
-      };
-    };
-    this.notify = (sync) => {
-      var _a, _b;
-      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
-    };
-    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((d) => d());
-      this.unsubs = [];
-      this.observer.disconnect();
-      if (this.rafId != null && this.targetWindow) {
-        this.targetWindow.cancelAnimationFrame(this.rafId);
-        this.rafId = null;
-      }
-      this.scrollState = null;
-      this.scrollElement = null;
-      this.targetWindow = null;
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
-      };
-    };
-    this._willUpdate = () => {
-      var _a;
-      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 = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
-        }
-        this.elementsCache.forEach((cached) => {
-          this.observer.observe(cached);
-        });
-        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;
-            if (this.scrollState) {
-              this.scheduleScrollReconcile();
-            }
-            this.maybeNotify();
-          })
-        );
-        this._scrollToOffset(this.getScrollOffset(), {
-          adjustments: void 0,
-          behavior: void 0
-        });
-      }
-    };
-    this.rafId = null;
-    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, index) => {
-      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
-      const furthestMeasurements = /* @__PURE__ */ new Map();
-      for (let m = index - 1; m >= 0; m--) {
-        const measurement = measurements[m];
-        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((a, b) => {
-        if (a.end === b.end) {
-          return a.index - b.index;
-        }
-        return a.end - b.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled,
-        this.options.lanes
-      ],
-      (count2, paddingStart, scrollMargin, getItemKey, enabled, lanes) => {
-        const lanesChanged = this.prevLanes !== void 0 && this.prevLanes !== lanes;
-        if (lanesChanged) {
-          this.lanesChangedFlag = true;
-        }
-        this.prevLanes = lanes;
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count: count2,
-          paddingStart,
-          scrollMargin,
-          getItemKey,
-          enabled,
-          lanes
-        };
-      },
-      {
-        key: false
-      }
-    );
-    this.getMeasurements = memo(
-      () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count: count2, paddingStart, scrollMargin, getItemKey, enabled, lanes }, itemSizeCache) => {
-        if (!enabled) {
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          this.laneAssignments.clear();
-          return [];
-        }
-        if (this.laneAssignments.size > count2) {
-          for (const index of this.laneAssignments.keys()) {
-            if (index >= count2) {
-              this.laneAssignments.delete(index);
-            }
-          }
-        }
-        if (this.lanesChangedFlag) {
-          this.lanesChangedFlag = false;
-          this.lanesSettling = true;
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          this.laneAssignments.clear();
-          this.pendingMeasuredCacheIndexes = [];
-        }
-        if (this.measurementsCache.length === 0 && !this.lanesSettling) {
-          this.measurementsCache = this.options.initialMeasurementsCache;
-          this.measurementsCache.forEach((item) => {
-            this.itemSizeCache.set(item.key, item.size);
-          });
-        }
-        const min2 = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        if (this.lanesSettling && this.measurementsCache.length === count2) {
-          this.lanesSettling = false;
-        }
-        const measurements = this.measurementsCache.slice(0, min2);
-        const laneLastIndex = new Array(lanes).fill(
-          void 0
-        );
-        for (let m = 0; m < min2; m++) {
-          const item = measurements[m];
-          if (item) {
-            laneLastIndex[item.lane] = m;
-          }
-        }
-        for (let i = min2; i < count2; i++) {
-          const key = getItemKey(i);
-          const cachedLane = this.laneAssignments.get(i);
-          let lane;
-          let start;
-          if (cachedLane !== void 0 && this.options.lanes > 1) {
-            lane = cachedLane;
-            const prevIndex = laneLastIndex[lane];
-            const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
-            start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
-          } else {
-            const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-            start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
-            lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
-            if (this.options.lanes > 1) {
-              this.laneAssignments.set(i, lane);
-            }
-          }
-          const measuredSize = itemSizeCache.get(key);
-          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
-          const end = start + size;
-          measurements[i] = {
-            index: i,
-            start,
-            size,
-            end,
-            key,
-            lane
-          };
-          laneLastIndex[lane] = i;
-        }
-        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(),
-        this.options.lanes
-      ],
-      (measurements, outerSize, scrollOffset, lanes) => {
-        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset,
-          lanes
-        }) : null;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "calculateRange",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualIndexes = memo(
-      () => {
-        let startIndex = null;
-        let endIndex = null;
-        const range = this.calculateRange();
-        if (range) {
-          startIndex = range.startIndex;
-          endIndex = range.endIndex;
-        }
-        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
-        return [
-          this.options.rangeExtractor,
-          this.options.overscan,
-          this.options.count,
-          startIndex,
-          endIndex
-        ];
-      },
-      (rangeExtractor, overscan, count2, startIndex, endIndex) => {
-        return startIndex === null || endIndex === null ? [] : rangeExtractor({
-          startIndex,
-          endIndex,
-          overscan,
-          count: count2
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
-        debug: () => this.options.debug
-      }
+);
+const amountOfRows = [10, 20, 50];
+function TablePagination({
+  table,
+  showRowSelect,
+  locale
+}) {
+  const { anchorEl, open, handleClose, handleOpen } = useToggleMenuVisibility();
+  const {
+    anchorEl: anchorElRows,
+    open: openRows,
+    handleClose: handleCloseRows,
+    handleOpen: handleOpenRows
+  } = useToggleMenuVisibility();
+  const tablePaginationRef = useRef(null);
+  const isNo = locale === "no";
+  const popoverOrigin = useMemo(
+    () => ({
+      anchorOrigin: { vertical: -5, horizontal: "center" },
+      transformOrigin: { vertical: "bottom", horizontal: "center" }
+    }),
+    []
+  );
+  const scrollToTop = useCallback(() => {
+    var _a;
+    const asmaTableClass = style$1["asma-ui-table-styled-table"];
+    const tableContainer = (_a = tablePaginationRef.current) == null ? void 0 : _a.closest(`.${asmaTableClass}`);
+    const scrollContainer = tableContainer == null ? void 0 : tableContainer.querySelector(
+      `.${style$1["table-scroll"]}, .${style$1["table-wrapper"]}`
     );
-    this.indexFromElement = (node) => {
-      const attributeName = this.options.indexAttribute;
-      const indexStr = node.getAttribute(attributeName);
-      if (!indexStr) {
-        console.warn(
-          `Missing attribute name '${attributeName}={index}' on measured element.`
-        );
-        return -1;
-      }
-      return parseInt(indexStr, 10);
-    };
-    this.shouldMeasureDuringScroll = (index) => {
-      var _a;
-      if (!this.scrollState || this.scrollState.behavior !== "smooth") {
-        return true;
-      }
-      const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index);
-      if (scrollIndex !== void 0 && this.range) {
-        const bufferSize = Math.max(
-          this.options.overscan,
-          Math.ceil((this.range.endIndex - this.range.startIndex) / 2)
-        );
-        const minIndex = Math.max(0, scrollIndex - bufferSize);
-        const maxIndex = Math.min(
-          this.options.count - 1,
-          scrollIndex + bufferSize
-        );
-        return index >= minIndex && index <= maxIndex;
-      }
-      return true;
-    };
-    this._measureElement = (node, entry) => {
-      if (!node.isConnected) {
-        this.observer.unobserve(node);
-        return;
-      }
-      const index = this.indexFromElement(node);
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return;
-      }
-      const key = item.key;
-      const prevNode = this.elementsCache.get(key);
-      if (prevNode !== node) {
-        if (prevNode) {
-          this.observer.unobserve(prevNode);
-        }
-        this.observer.observe(node);
-        this.elementsCache.set(key, node);
-      }
-      if (this.shouldMeasureDuringScroll(index)) {
-        this.resizeItem(index, this.options.measureElement(node, entry, this));
-      }
-    };
-    this.resizeItem = (index, size) => {
-      var _a;
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return;
-      }
-      const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
-      const delta = size - itemSize;
-      if (delta !== 0) {
-        if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.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(item.index);
-        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
-        this.notify(false);
-      }
-    };
-    this.measureElement = (node) => {
-      if (!node) {
-        this.elementsCache.forEach((cached, key) => {
-          if (!cached.isConnected) {
-            this.observer.unobserve(cached);
-            this.elementsCache.delete(key);
-          }
-        });
-        return;
-      }
-      this._measureElement(node, void 0);
-    };
-    this.getVirtualItems = memo(
-      () => [this.getVirtualIndexes(), this.getMeasurements()],
-      (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k = 0, len = indexes.length; k < len; k++) {
-          const i = indexes[k];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
+    if (scrollContainer) {
+      scrollContainer.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, []);
+  const pagesLength = table.getPageCount() || 1;
+  const currentPage = table.getState().pagination.pageIndex + 1;
+  const pages = useMemo(() => Array.from({ length: pagesLength }, (_, index) => index + 1), [pagesLength]);
+  const pageSize = table.getState().pagination.pageSize;
+  const amountOfRowsOptions = useMemo(() => {
+    const optionsSet = /* @__PURE__ */ new Set([...amountOfRows, pageSize]);
+    return Array.from(optionsSet).sort((a, b) => a - b);
+  }, []);
+  const handlePageChange = useCallback(
+    (page) => {
+      table.setPageIndex(page - 1);
+      handleClose();
+      scrollToTop();
+    },
+    [table, handleClose, scrollToTop]
+  );
+  const handleRowsChange = useCallback(
+    (size) => {
+      table.setPageSize(size);
+      handleCloseRows();
+    },
+    [table, handleCloseRows]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: tablePaginationRef, className: style["table-pagination"], children: [
+    showRowSelect && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        StyledButton,
+        {
+          dataTest: "table-rows-count-button",
+          variant: "outlined",
+          size: "large",
+          onClick: handleOpenRows,
+          endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ChevronDownIcon,
+            {
+              className: `${openRows ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+              height: 24,
+              width: 24
+            }
+          ),
+          children: [
+            pageSize,
+            " ",
+            isNo ? "rader" : "rows"
+          ]
         }
-        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,
-          (index) => notUndefined(measurements[index]).start,
-          offset
-        )]
-      );
-    };
-    this.getMaxScrollOffset = () => {
-      if (!this.scrollElement)
-        return 0;
-      if ("scrollHeight" in this.scrollElement) {
-        return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
-      } else {
-        const doc = this.scrollElement.document.documentElement;
-        return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
-      }
-    };
-    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
-      if (!this.scrollElement)
-        return 0;
-      const size = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        align = toOffset >= scrollOffset + size ? "end" : "start";
-      }
-      if (align === "center") {
-        toOffset += (itemSize - size) / 2;
-      } else if (align === "end") {
-        toOffset -= size;
-      }
-      const maxOffset = this.getMaxScrollOffset();
-      return Math.max(Math.min(maxOffset, toOffset), 0);
-    };
-    this.getOffsetForIndex = (index, align = "auto") => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      const size = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      const item = this.measurementsCache[index];
-      if (!item)
-        return;
-      if (align === "auto") {
-        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
-          align = "end";
-        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
-          align = "start";
-        } else {
-          return [scrollOffset, align];
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Popover,
+        {
+          open: openRows,
+          anchorEl: anchorElRows,
+          slotProps: {
+            paper: {
+              sx: {
+                width: anchorElRows ? anchorElRows.clientWidth : void 0,
+                maxHeight: 288,
+                overflowY: "auto"
+              }
+            }
+          },
+          onClose: handleCloseRows,
+          anchorOrigin: popoverOrigin.anchorOrigin,
+          transformOrigin: popoverOrigin.transformOrigin,
+          classes: { paper: "border border-solid border-delta-200 py-2" },
+          children: amountOfRowsOptions.map((size) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledMenuItem,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                handleRowsChange(size);
+              },
+              selected: pageSize === size,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-delta-700 text-sm font-normal", children: [
+                size,
+                " ",
+                isNo ? "rader" : "rows"
+              ] })
+            },
+            size
+          ))
         }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: isNo ? "Nåværende side" : "Current Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      StyledButton,
+      {
+        dataTest: "current-page-button",
+        variant: "outlined",
+        size: "large",
+        onClick: handleOpen,
+        endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ChevronDownIcon,
+          {
+            className: `${open ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+            height: 24,
+            width: 24
+          }
+        ),
+        children: [
+          isNo ? "Side" : "Page",
+          " ",
+          currentPage,
+          " ",
+          isNo ? "av" : "of",
+          " ",
+          pagesLength
+        ]
       }
-      if (align === "end" && index === this.options.count - 1) {
-        return [this.getMaxScrollOffset(), align];
+    ) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Popover,
+      {
+        open,
+        anchorEl,
+        slotProps: {
+          paper: {
+            sx: {
+              width: anchorEl ? anchorEl.clientWidth : void 0,
+              maxHeight: 288,
+              overflowY: "auto"
+            }
+          }
+        },
+        onClose: handleClose,
+        anchorOrigin: popoverOrigin.anchorOrigin,
+        transformOrigin: popoverOrigin.transformOrigin,
+        classes: { paper: "border border-solid border-delta-200 py-2" },
+        children: pages.map((page) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          StyledMenuItem,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handlePageChange(page);
+            },
+            selected: page === currentPage,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-delta-700 text-sm font-normal", children: [
+              isNo ? "Side" : "Page",
+              " ",
+              page
+            ] })
+          },
+          page
+        ))
       }
-      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
-      return [
-        this.getOffsetForAlignment(toOffset, align, item.size),
-        align
-      ];
-    };
-    this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
-      const offset = this.getOffsetForAlignment(toOffset, align);
-      const now = this.now();
-      this.scrollState = {
-        index: null,
-        align,
-        behavior,
-        startedAt: now,
-        lastTargetOffset: offset,
-        stableFrames: 0
-      };
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      this.scheduleScrollReconcile();
-    };
-    this.scrollToIndex = (index, {
-      align: initialAlign = "auto",
-      behavior = "auto"
-    } = {}) => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      const offsetInfo = this.getOffsetForIndex(index, initialAlign);
-      if (!offsetInfo) {
-        return;
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: currentPage === 1 ? "" : isNo ? "Forrige side" : "Previous Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      StyledButton,
+      {
+        dataTest: "prev-page-button",
+        variant: "outlined",
+        onClick: () => {
+          table.previousPage();
+          scrollToTop();
+        },
+        size: "large",
+        disabled: !table.getCanPreviousPage(),
+        startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeftIcon, { height: 24, width: 24 })
       }
-      const [offset, align] = offsetInfo;
-      const now = this.now();
-      this.scrollState = {
-        index,
-        align,
-        behavior,
-        startedAt: now,
-        lastTargetOffset: offset,
-        stableFrames: 0
-      };
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      this.scheduleScrollReconcile();
-    };
-    this.scrollBy = (delta, { behavior = "auto" } = {}) => {
-      const offset = this.getScrollOffset() + delta;
-      const now = this.now();
-      this.scrollState = {
-        index: null,
-        align: "start",
-        behavior,
-        startedAt: now,
-        lastTargetOffset: offset,
-        stableFrames: 0
-      };
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      this.scheduleScrollReconcile();
-    };
-    this.getTotalSize = () => {
-      var _a;
-      const measurements = this.getMeasurements();
-      let end;
-      if (measurements.length === 0) {
-        end = this.options.paddingStart;
-      } else if (this.options.lanes === 1) {
-        end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
-      } else {
-        const endByLane = Array(this.options.lanes).fill(null);
-        let endIndex = measurements.length - 1;
-        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
-          const item = measurements[endIndex];
-          if (endByLane[item.lane] === null) {
-            endByLane[item.lane] = item.end;
-          }
-          endIndex--;
-        }
-        end = Math.max(...endByLane.filter((val) => val !== null));
+    ) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: currentPage === pagesLength ? "" : isNo ? "Neste side" : "Next Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      StyledButton,
+      {
+        dataTest: "next-page-button",
+        variant: "outlined",
+        onClick: () => {
+          table.nextPage();
+          scrollToTop();
+        },
+        size: "large",
+        disabled: !table.getCanNextPage(),
+        startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRightIcon, { height: 24, width: 24 })
       }
-      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.laneAssignments = /* @__PURE__ */ new Map();
-      this.notify(false);
-    };
-    this.setOptions(opts);
-  }
-  scheduleScrollReconcile() {
-    if (!this.targetWindow) {
-      this.scrollState = null;
-      return;
+    ) }) })
+  ] });
+}
+function TableFooter({
+  table,
+  styledTableProps,
+  canShowStickyFooter
+}) {
+  var _a, _b, _c;
+  if (styledTableProps.hideFooter || styledTableProps.data.length === 0)
+    return null;
+  const paginationAlignLeft = styledTableProps.paginationAlignLeft;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const isManualPagination = !!table.options.manualPagination;
+  const pagesLength = table.getPageCount() || 1;
+  const shouldShowPagination = isManualPagination ? pagesLength > 1 : totalRows > pageSize;
+  const footerNode = (_a = styledTableProps.footer) == null ? void 0 : _a.call(styledTableProps, table);
+  const hasFooterNode = footerNode !== null && footerNode !== void 0 && footerNode !== false;
+  const hasAnythingToRender = hasFooterNode || shouldShowPagination;
+  if (!hasAnythingToRender)
+    return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: canShowStickyFooter ? style$1["table-footer--sticky"] : style$1["table-footer--inline"],
+      style: paginationAlignLeft && {
+        justifyContent: "flex-start"
+      } || {},
+      children: [
+        !paginationAlignLeft && ((_b = styledTableProps.footer) == null ? void 0 : _b.call(styledTableProps, table)),
+        shouldShowPagination && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TablePagination,
+          {
+            table,
+            showRowSelect: !!styledTableProps.showRowCountSelect,
+            locale: styledTableProps.locale || "en"
+          }
+        ),
+        paginationAlignLeft && ((_c = styledTableProps.footer) == null ? void 0 : _c.call(styledTableProps, table))
+      ]
     }
-    if (this.rafId != null)
+  );
+}
+function useProxyHorizontalScrollSync(enabled) {
+  const tableScrollRef = useRef(null);
+  const tableXRef = useRef(null);
+  const hScrollRef = useRef(null);
+  const hScrollContentRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!enabled)
       return;
-    this.rafId = this.targetWindow.requestAnimationFrame(() => {
-      this.rafId = null;
-      this.reconcileScroll();
-    });
-  }
-  reconcileScroll() {
-    if (!this.scrollState)
+    const tableScrollEl = tableScrollRef.current;
+    const tableXEl = tableXRef.current;
+    const hScrollEl = hScrollRef.current;
+    const hScrollContentEl = hScrollContentRef.current;
+    if (!tableScrollEl || !tableXEl || !hScrollEl || !hScrollContentEl)
       return;
-    const el = this.scrollElement;
+    let syncing = false;
+    const syncWidth = () => {
+      hScrollContentEl.style.width = `${tableXEl.scrollWidth}px`;
+    };
+    const syncProxyFromTable = () => {
+      if (syncing)
+        return;
+      syncing = true;
+      hScrollEl.scrollLeft = tableXEl.scrollLeft;
+      syncing = false;
+    };
+    const syncTableFromProxy = () => {
+      if (syncing)
+        return;
+      syncing = true;
+      tableXEl.scrollLeft = hScrollEl.scrollLeft;
+      syncing = false;
+    };
+    syncWidth();
+    syncProxyFromTable();
+    tableXEl.addEventListener("scroll", syncProxyFromTable, { passive: true });
+    hScrollEl.addEventListener("scroll", syncTableFromProxy, { passive: true });
+    const ro = new ResizeObserver(syncWidth);
+    ro.observe(tableXEl);
+    return () => {
+      tableXEl.removeEventListener("scroll", syncProxyFromTable);
+      hScrollEl.removeEventListener("scroll", syncTableFromProxy);
+      ro.disconnect();
+    };
+  }, [enabled]);
+  return { tableScrollRef, tableXRef, hScrollRef, hScrollContentRef };
+}
+function useElementHeightPx() {
+  const ref = useRef(null);
+  const [heightPx, setHeightPx] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
     if (!el)
       return;
-    const MAX_RECONCILE_MS = 5e3;
-    if (this.now() - this.scrollState.startedAt > MAX_RECONCILE_MS) {
-      this.scrollState = null;
-      return;
+    let rafId = 0;
+    const commit = () => {
+      const next = Math.round(el.getBoundingClientRect().height);
+      setHeightPx((prev) => prev === next ? prev : next);
+    };
+    const measure = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(commit);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+    };
+  }, []);
+  return { ref, heightPx };
+}
+function memo(getDeps, fn, opts) {
+  let deps = opts.initialDeps ?? [];
+  let result;
+  let isInitial = true;
+  function memoizedFunction() {
+    var _a, _b, _c;
+    let depTime;
+    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts)))
+      depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
     }
-    const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
-    const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
-    const STABLE_FRAMES = 1;
-    const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
-    if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
-      this.scrollState.stableFrames++;
-      if (this.scrollState.stableFrames >= STABLE_FRAMES) {
-        this.scrollState = null;
-        return;
-      }
-    } else {
-      this.scrollState.stableFrames = 0;
-      if (targetChanged) {
-        this.scrollState.lastTargetOffset = targetOffset;
-        this.scrollState.behavior = "auto";
-        this._scrollToOffset(targetOffset, {
-          adjustments: void 0,
-          behavior: "auto"
-        });
-      }
+    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
+      );
     }
-    this.scheduleScrollReconcile();
-  }
-}
-const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
-  while (low <= high) {
-    const middle = (low + high) / 2 | 0;
-    const currentValue = getCurrentValue(middle);
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
+    if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) {
+      opts.onChange(result);
     }
+    isInitial = false;
+    return result;
   }
-  if (low > 0) {
-    return low - 1;
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
+  };
+  return memoizedFunction;
+}
+function notUndefined(value, msg) {
+  if (value === void 0) {
+    throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
   } else {
-    return 0;
+    return value;
   }
+}
+const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
+const debounce = (targetWindow, fn, ms) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  };
 };
-function calculateRange({
-  measurements,
-  outerSize,
-  scrollOffset,
-  lanes
-}) {
-  const lastIndex = measurements.length - 1;
-  const getOffset = (index) => measurements[index].start;
-  if (measurements.length <= lanes) {
-    return {
-      startIndex: 0,
-      endIndex: lastIndex
+const getRect = (element) => {
+  const { offsetWidth, offsetHeight } = element;
+  return { width: offsetWidth, height: offsetHeight };
+};
+const defaultKeyExtractor = (index) => index;
+const defaultRangeExtractor = (range) => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width: width2, height: height2 } = rect;
+    cb({ width: Math.round(width2), height: Math.round(height2) });
+  };
+  handler(getRect(element));
+  if (!targetWindow.ResizeObserver) {
+    return () => {
+    };
+  }
+  const observer = new targetWindow.ResizeObserver((entries) => {
+    const run = () => {
+      const entry = entries[0];
+      if (entry == null ? void 0 : entry.borderBoxSize) {
+        const box = entry.borderBoxSize[0];
+        if (box) {
+          handler({ width: box.inlineSize, height: box.blockSize });
+          return;
+        }
+      }
+      handler(getRect(element));
     };
+    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+  });
+  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, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
   }
-  let startIndex = findNearestBinarySearch(
-    0,
-    lastIndex,
-    getOffset,
-    scrollOffset
+  let offset = 0;
+  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
+    targetWindow,
+    () => {
+      cb(offset, false);
+    },
+    instance.options.isScrollingResetDelay
   );
-  let endIndex = startIndex;
-  if (lanes === 1) {
-    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
-      endIndex++;
-    }
-  } else if (lanes > 1) {
-    const endPerLane = Array(lanes).fill(0);
-    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
-      const item = measurements[endIndex];
-      endPerLane[item.lane] = item.end;
-      endIndex++;
-    }
-    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
-    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
-      const item = measurements[startIndex];
-      startPerLane[item.lane] = item.start;
-      startIndex--;
-    }
-    startIndex = Math.max(0, startIndex - startIndex % lanes);
-    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+  const createHandler = (isScrolling) => () => {
+    const { horizontal, isRtl } = instance.options;
+    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+    fallback();
+    cb(offset, isScrolling);
+  };
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
+  if (registerScrollendEvent) {
+    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
   }
-  return { startIndex, endIndex };
-}
-const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function useVirtualizerBase({
-  useFlushSync = true,
-  ...options
-}) {
-  const rerender = React.useReducer(() => ({}), {})[1];
-  const resolvedOptions = {
-    ...options,
-    onChange: (instance2, sync) => {
-      var _a;
-      if (useFlushSync && sync) {
-        flushSync(rerender);
-      } else {
-        rerender();
-      }
-      (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
+  return () => {
+    element.removeEventListener("scroll", handler);
+    if (registerScrollendEvent) {
+      element.removeEventListener("scrollend", endHandler);
     }
   };
-  const [instance] = React.useState(
-    () => new Virtualizer(resolvedOptions)
-  );
-  instance.setOptions(resolvedOptions);
-  useIsomorphicLayoutEffect(() => {
-    return instance._didMount();
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    return instance._willUpdate();
-  });
-  return instance;
-}
-function useVirtualizer(options) {
-  return useVirtualizerBase({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options
-  });
-}
-function useRowVirtualizer({
-  rows,
-  rowHeight,
-  scrollRef
-}) {
-  var _a, _b;
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    getScrollElement: () => (scrollRef == null ? void 0 : scrollRef.current) || null,
-    estimateSize: () => rowHeight,
-    measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element == null ? void 0 : element.getBoundingClientRect().height : void 0,
-    overscan: 10
-  });
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  const totalSize = rowVirtualizer.getTotalSize();
-  return {
-    rowWindow: {
-      indexes: virtualRows.map((item) => item.index),
-      paddingTop: ((_a = virtualRows[0]) == null ? void 0 : _a.start) ?? 0,
-      paddingBottom: virtualRows.length ? Math.max(0, totalSize - (((_b = virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) ?? 0)) : 0
+};
+const measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size;
     }
-  };
-}
-function TableRows({
-  styledTableProps,
-  table,
-  scrollRef,
-  columnWindow
-}) {
-  const rows = styledTableProps.hideFooter ? table.getExpandedRowModel().rows : table.getRowModel().rows;
-  const rowHeight = styledTableProps.rowHeight || 48;
-  const {
-    rowWindow: { indexes, paddingBottom, paddingTop }
-  } = useRowVirtualizer({
-    rows,
-    rowHeight,
-    scrollRef
+  }
+  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
+};
+const elementScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
   });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    paddingTop > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { style: { height: `${paddingTop}px` } }),
-    indexes.map((index) => {
-      const row = rows[index];
-      if (!row)
-        return null;
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TableRow,
-        {
-          styledTableProps,
-          row,
-          index,
-          columnWindow
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.scrollState = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.laneAssignments = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.prevLanes = void 0;
+    this.lanesChangedFlag = false;
+    this.lanesSettling = false;
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.elementsCache = /* @__PURE__ */ new Map();
+    this.now = () => {
+      var _a, _b, _c;
+      return ((_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) ?? Date.now();
+    };
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const run = () => {
+              this._measureElement(entry.target, entry);
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          (_a = get()) == null ? void 0 : _a.disconnect();
+          _ro = null;
         },
-        row.id
-      );
-    }),
-    paddingBottom > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { style: { height: `${paddingBottom}px` } })
-  ] });
-}
-function TableBody({
-  table,
-  styledTableProps,
-  scrollRef,
-  columnWindow
-}) {
-  const { columns, data, loading, enableDnd, rowHeight } = styledTableProps;
-  const colSpan = table.getAllLeafColumns().length || columns.length || 1;
-  if (loading && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style$1["tbody"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableSkeleton, { colSpan, rowHeight }) });
-  }
-  if (data.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style$1["tbody"], children: enableDnd ? /* @__PURE__ */ jsxRuntimeExports.jsx(SortableContext, { items: data, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TableRows,
-    {
-      table,
-      styledTableProps,
-      scrollRef,
-      columnWindow
-    }
-  ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TableRows,
-    {
-      table,
-      styledTableProps,
-      scrollRef,
-      columnWindow
-    }
-  ) });
-}
-function LoadingIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
+        observe: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      Object.entries(opts2).forEach(([key, value]) => {
+        if (typeof value === "undefined")
+          delete opts2[key];
+      });
+      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: false,
+        useAnimationFrameWithResizeObserver: false,
+        ...opts2
+      };
+    };
+    this.notify = (sync) => {
+      var _a, _b;
+      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
+    };
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
       {
-        fill: "currentColor",
-        d: "M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z",
-        opacity: 0.5
+        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
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        dur: "1s",
-        from: "0 12 12",
-        repeatCount: "indefinite",
-        to: "360 12 12",
-        type: "rotate"
+    );
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d) => d());
+      this.unsubs = [];
+      this.observer.disconnect();
+      if (this.rafId != null && this.targetWindow) {
+        this.targetWindow.cancelAnimationFrame(this.rafId);
+        this.rafId = null;
       }
-    ) })
-  ] });
-}
-const Fetching = ({ fetching = false }) => {
-  return fetching ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-10 bg-white/40 left-0 top-0 right-0 bottom-0 flex items-center justify-center ", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIcon, { className: style$1["loading-icon"], width: 50, height: 50 }) }) : null;
-};
-function ChevronRightIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z" }) });
-}
-const style = {
-  "table-pagination": "_table-pagination_pu6mb_1",
-  "table-pagination__pages-list": "_table-pagination__pages-list_pu6mb_11",
-  "table-pagination__pages-list__page": "_table-pagination__pages-list__page_pu6mb_16",
-  "page-selected": "_page-selected_pu6mb_27",
-  "check-icon": "_check-icon_pu6mb_30"
-};
-function ChevronLeftIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z" }) });
-}
-function CheckIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z" }) });
-}
-const StyledMenuItem = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-  MenuItem,
-  {
-    classes: { root: "flex gap-x-1" },
-    sx: {
-      padding: "8px",
-      "&.Mui-selected": {
-        backgroundColor: "var(--colors-gama-50)",
-        "&:hover": { backgroundColor: "var(--colors-gama-50)" }
+      this.scrollState = null;
+      this.scrollElement = null;
+      this.targetWindow = null;
+    };
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _a;
+      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 = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
+        }
+        this.elementsCache.forEach((cached) => {
+          this.observer.observe(cached);
+        });
+        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;
+            if (this.scrollState) {
+              this.scheduleScrollReconcile();
+            }
+            this.maybeNotify();
+          })
+        );
+        this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        });
       }
-    },
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        CheckIcon,
-        {
-          width: 24,
-          height: 24,
-          color: props.selected ? "var(--colors-gama-500)" : "transparent",
-          style: { transition: "color 0.2s ease" }
+    };
+    this.rafId = null;
+    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, index) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
+      const furthestMeasurements = /* @__PURE__ */ new Map();
+      for (let m = index - 1; m >= 0; m--) {
+        const measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
         }
-      ),
-      props.children
-    ]
-  }
-);
-const amountOfRows = [10, 20, 50];
-function TablePagination({
-  table,
-  showRowSelect,
-  locale
-}) {
-  const { anchorEl, open, handleClose, handleOpen } = useToggleMenuVisibility();
-  const {
-    anchorEl: anchorElRows,
-    open: openRows,
-    handleClose: handleCloseRows,
-    handleOpen: handleOpenRows
-  } = useToggleMenuVisibility();
-  const tablePaginationRef = useRef(null);
-  const isNo = locale === "no";
-  const popoverOrigin = useMemo(
-    () => ({
-      anchorOrigin: { vertical: -5, horizontal: "center" },
-      transformOrigin: { vertical: "bottom", horizontal: "center" }
-    }),
-    []
-  );
-  const scrollToTop = useCallback(() => {
-    var _a;
-    const asmaTableClass = style$1["asma-ui-table-styled-table"];
-    const tableContainer = (_a = tablePaginationRef.current) == null ? void 0 : _a.closest(`.${asmaTableClass}`);
-    const scrollContainer = tableContainer == null ? void 0 : tableContainer.querySelector(
-      `.${style$1["table-scroll"]}, .${style$1["table-wrapper"]}`
-    );
-    if (scrollContainer) {
-      scrollContainer.scrollTo({ top: 0, behavior: "smooth" });
-    }
-  }, []);
-  const pagesLength = table.getPageCount() || 1;
-  const currentPage = table.getState().pagination.pageIndex + 1;
-  const pages = useMemo(() => Array.from({ length: pagesLength }, (_, index) => index + 1), [pagesLength]);
-  const pageSize = table.getState().pagination.pageSize;
-  const amountOfRowsOptions = useMemo(() => {
-    const optionsSet = /* @__PURE__ */ new Set([...amountOfRows, pageSize]);
-    return Array.from(optionsSet).sort((a, b) => a - b);
-  }, []);
-  const handlePageChange = useCallback(
-    (page) => {
-      table.setPageIndex(page - 1);
-      handleClose();
-      scrollToTop();
-    },
-    [table, handleClose, scrollToTop]
-  );
-  const handleRowsChange = useCallback(
-    (size) => {
-      table.setPageSize(size);
-      handleCloseRows();
-    },
-    [table, handleCloseRows]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: tablePaginationRef, className: style["table-pagination"], children: [
-    showRowSelect && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        StyledButton,
-        {
-          dataTest: "table-rows-count-button",
-          variant: "outlined",
-          size: "large",
-          onClick: handleOpenRows,
-          endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ChevronDownIcon,
-            {
-              className: `${openRows ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
-              height: 24,
-              width: 24
+        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((a, b) => {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
+        return a.end - b.end;
+      })[0] : void 0;
+    };
+    this.getMeasurementOptions = memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled,
+        this.options.lanes
+      ],
+      (count2, paddingStart, scrollMargin, getItemKey, enabled, lanes) => {
+        const lanesChanged = this.prevLanes !== void 0 && this.prevLanes !== lanes;
+        if (lanesChanged) {
+          this.lanesChangedFlag = true;
+        }
+        this.prevLanes = lanes;
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count: count2,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled,
+          lanes
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getMeasurements = memo(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count: count2, paddingStart, scrollMargin, getItemKey, enabled, lanes }, itemSizeCache) => {
+        if (!enabled) {
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          this.laneAssignments.clear();
+          return [];
+        }
+        if (this.laneAssignments.size > count2) {
+          for (const index of this.laneAssignments.keys()) {
+            if (index >= count2) {
+              this.laneAssignments.delete(index);
             }
-          ),
-          children: [
-            pageSize,
-            " ",
-            isNo ? "rader" : "rows"
-          ]
+          }
         }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Popover,
-        {
-          open: openRows,
-          anchorEl: anchorElRows,
-          slotProps: {
-            paper: {
-              sx: {
-                width: anchorElRows ? anchorElRows.clientWidth : void 0,
-                maxHeight: 288,
-                overflowY: "auto"
-              }
+        if (this.lanesChangedFlag) {
+          this.lanesChangedFlag = false;
+          this.lanesSettling = true;
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          this.laneAssignments.clear();
+          this.pendingMeasuredCacheIndexes = [];
+        }
+        if (this.measurementsCache.length === 0 && !this.lanesSettling) {
+          this.measurementsCache = this.options.initialMeasurementsCache;
+          this.measurementsCache.forEach((item) => {
+            this.itemSizeCache.set(item.key, item.size);
+          });
+        }
+        const min2 = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        if (this.lanesSettling && this.measurementsCache.length === count2) {
+          this.lanesSettling = false;
+        }
+        const measurements = this.measurementsCache.slice(0, min2);
+        const laneLastIndex = new Array(lanes).fill(
+          void 0
+        );
+        for (let m = 0; m < min2; m++) {
+          const item = measurements[m];
+          if (item) {
+            laneLastIndex[item.lane] = m;
+          }
+        }
+        for (let i = min2; i < count2; i++) {
+          const key = getItemKey(i);
+          const cachedLane = this.laneAssignments.get(i);
+          let lane;
+          let start;
+          if (cachedLane !== void 0 && this.options.lanes > 1) {
+            lane = cachedLane;
+            const prevIndex = laneLastIndex[lane];
+            const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
+            start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
+          } else {
+            const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+            start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+            lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+            if (this.options.lanes > 1) {
+              this.laneAssignments.set(i, lane);
             }
-          },
-          onClose: handleCloseRows,
-          anchorOrigin: popoverOrigin.anchorOrigin,
-          transformOrigin: popoverOrigin.transformOrigin,
-          classes: { paper: "border border-solid border-delta-200 py-2" },
-          children: amountOfRowsOptions.map((size) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledMenuItem,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                handleRowsChange(size);
-              },
-              selected: pageSize === size,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-delta-700 text-sm font-normal", children: [
-                size,
-                " ",
-                isNo ? "rader" : "rows"
-              ] })
-            },
-            size
-          ))
+          }
+          const measuredSize = itemSizeCache.get(key);
+          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end = start + size;
+          measurements[i] = {
+            index: i,
+            start,
+            size,
+            end,
+            key,
+            lane
+          };
+          laneLastIndex[lane] = i;
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: isNo ? "Nåværende side" : "Current Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      StyledButton,
+        this.measurementsCache = measurements;
+        return measurements;
+      },
       {
-        dataTest: "current-page-button",
-        variant: "outlined",
-        size: "large",
-        onClick: handleOpen,
-        endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ChevronDownIcon,
-          {
-            className: `${open ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
-            height: 24,
-            width: 24
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (measurements, outerSize, scrollOffset, lanes) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset,
+          lanes
+        }) : null;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualIndexes = memo(
+      () => {
+        let startIndex = null;
+        let endIndex = null;
+        const range = this.calculateRange();
+        if (range) {
+          startIndex = range.startIndex;
+          endIndex = range.endIndex;
+        }
+        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
+        return [
+          this.options.rangeExtractor,
+          this.options.overscan,
+          this.options.count,
+          startIndex,
+          endIndex
+        ];
+      },
+      (rangeExtractor, overscan, count2, startIndex, endIndex) => {
+        return startIndex === null || endIndex === null ? [] : rangeExtractor({
+          startIndex,
+          endIndex,
+          overscan,
+          count: count2
+        });
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
+        debug: () => this.options.debug
+      }
+    );
+    this.indexFromElement = (node) => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(
+          `Missing attribute name '${attributeName}={index}' on measured element.`
+        );
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this.shouldMeasureDuringScroll = (index) => {
+      var _a;
+      if (!this.scrollState || this.scrollState.behavior !== "smooth") {
+        return true;
+      }
+      const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index);
+      if (scrollIndex !== void 0 && this.range) {
+        const bufferSize = Math.max(
+          this.options.overscan,
+          Math.ceil((this.range.endIndex - this.range.startIndex) / 2)
+        );
+        const minIndex = Math.max(0, scrollIndex - bufferSize);
+        const maxIndex = Math.min(
+          this.options.count - 1,
+          scrollIndex + bufferSize
+        );
+        return index >= minIndex && index <= maxIndex;
+      }
+      return true;
+    };
+    this._measureElement = (node, entry) => {
+      if (!node.isConnected) {
+        this.observer.unobserve(node);
+        return;
+      }
+      const index = this.indexFromElement(node);
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const key = item.key;
+      const prevNode = this.elementsCache.get(key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node);
+        this.elementsCache.set(key, node);
+      }
+      if (this.shouldMeasureDuringScroll(index)) {
+        this.resizeItem(index, this.options.measureElement(node, entry, this));
+      }
+    };
+    this.resizeItem = (index, size) => {
+      var _a;
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
+      const delta = size - itemSize;
+      if (delta !== 0) {
+        if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments)) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("correction", delta);
           }
-        ),
-        children: [
-          isNo ? "Side" : "Page",
-          " ",
-          currentPage,
-          " ",
-          isNo ? "av" : "of",
-          " ",
-          pagesLength
-        ]
+          this._scrollToOffset(this.getScrollOffset(), {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: void 0
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(item.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
+        this.notify(false);
       }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Popover,
-      {
-        open,
-        anchorEl,
-        slotProps: {
-          paper: {
-            sx: {
-              width: anchorEl ? anchorEl.clientWidth : void 0,
-              maxHeight: 288,
-              overflowY: "auto"
-            }
+    };
+    this.measureElement = (node) => {
+      if (!node) {
+        this.elementsCache.forEach((cached, key) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key);
           }
-        },
-        onClose: handleClose,
-        anchorOrigin: popoverOrigin.anchorOrigin,
-        transformOrigin: popoverOrigin.transformOrigin,
-        classes: { paper: "border border-solid border-delta-200 py-2" },
-        children: pages.map((page) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          StyledMenuItem,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              handlePageChange(page);
-            },
-            selected: page === currentPage,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-delta-700 text-sm font-normal", children: [
-              isNo ? "Side" : "Page",
-              " ",
-              page
-            ] })
-          },
-          page
-        ))
+        });
+        return;
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: currentPage === 1 ? "" : isNo ? "Forrige side" : "Previous Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      StyledButton,
+      this._measureElement(node, void 0);
+    };
+    this.getVirtualItems = memo(
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
+      (indexes, measurements) => {
+        const virtualItems = [];
+        for (let k = 0, len = indexes.length; k < len; k++) {
+          const i = indexes[k];
+          const measurement = measurements[i];
+          virtualItems.push(measurement);
+        }
+        return virtualItems;
+      },
       {
-        dataTest: "prev-page-button",
-        variant: "outlined",
-        onClick: () => {
-          table.previousPage();
-          scrollToTop();
-        },
-        size: "large",
-        disabled: !table.getCanPreviousPage(),
-        startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeftIcon, { height: 24, width: 24 })
+        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
+        debug: () => this.options.debug
       }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: currentPage === pagesLength ? "" : isNo ? "Neste side" : "Next Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      StyledButton,
-      {
-        dataTest: "next-page-button",
-        variant: "outlined",
-        onClick: () => {
-          table.nextPage();
-          scrollToTop();
-        },
-        size: "large",
-        disabled: !table.getCanNextPage(),
-        startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRightIcon, { height: 24, width: 24 })
+    );
+    this.getVirtualItemForOffset = (offset) => {
+      const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return void 0;
       }
-    ) }) })
-  ] });
-}
-function TableFooter({
-  table,
-  styledTableProps,
-  canShowStickyFooter
-}) {
-  var _a, _b, _c;
-  if (styledTableProps.hideFooter || styledTableProps.data.length === 0)
-    return null;
-  const paginationAlignLeft = styledTableProps.paginationAlignLeft;
-  const pageSize = table.getState().pagination.pageSize;
-  const totalRows = table.getFilteredRowModel().rows.length;
-  const isManualPagination = !!table.options.manualPagination;
-  const pagesLength = table.getPageCount() || 1;
-  const shouldShowPagination = isManualPagination ? pagesLength > 1 : totalRows > pageSize;
-  const footerNode = (_a = styledTableProps.footer) == null ? void 0 : _a.call(styledTableProps, table);
-  const hasFooterNode = footerNode !== null && footerNode !== void 0 && footerNode !== false;
-  const hasAnythingToRender = hasFooterNode || shouldShowPagination;
-  if (!hasAnythingToRender)
-    return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: canShowStickyFooter ? style$1["table-footer--sticky"] : style$1["table-footer--inline"],
-      style: paginationAlignLeft && {
-        justifyContent: "flex-start"
-      } || {},
-      children: [
-        !paginationAlignLeft && ((_b = styledTableProps.footer) == null ? void 0 : _b.call(styledTableProps, table)),
-        shouldShowPagination && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TablePagination,
-          {
-            table,
-            showRowSelect: !!styledTableProps.showRowCountSelect,
-            locale: styledTableProps.locale || "en"
-          }
-        ),
-        paginationAlignLeft && ((_c = styledTableProps.footer) == null ? void 0 : _c.call(styledTableProps, table))
-      ]
-    }
-  );
-}
-function useProxyHorizontalScrollSync(enabled) {
-  const tableScrollRef = useRef(null);
-  const tableXRef = useRef(null);
-  const hScrollRef = useRef(null);
-  const hScrollContentRef = useRef(null);
-  useLayoutEffect(() => {
-    if (!enabled)
-      return;
-    const tableScrollEl = tableScrollRef.current;
-    const tableXEl = tableXRef.current;
-    const hScrollEl = hScrollRef.current;
-    const hScrollContentEl = hScrollContentRef.current;
-    if (!tableScrollEl || !tableXEl || !hScrollEl || !hScrollContentEl)
-      return;
-    let syncing = false;
-    const syncWidth = () => {
-      hScrollContentEl.style.width = `${tableXEl.scrollWidth}px`;
+      return notUndefined(
+        measurements[findNearestBinarySearch(
+          0,
+          measurements.length - 1,
+          (index) => notUndefined(measurements[index]).start,
+          offset
+        )]
+      );
+    };
+    this.getMaxScrollOffset = () => {
+      if (!this.scrollElement)
+        return 0;
+      if ("scrollHeight" in this.scrollElement) {
+        return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
+      } else {
+        const doc = this.scrollElement.document.documentElement;
+        return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
+      }
+    };
+    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
+      if (!this.scrollElement)
+        return 0;
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        align = toOffset >= scrollOffset + size ? "end" : "start";
+      }
+      if (align === "center") {
+        toOffset += (itemSize - size) / 2;
+      } else if (align === "end") {
+        toOffset -= size;
+      }
+      const maxOffset = this.getMaxScrollOffset();
+      return Math.max(Math.min(maxOffset, toOffset), 0);
+    };
+    this.getOffsetForIndex = (index, align = "auto") => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      const item = this.measurementsCache[index];
+      if (!item)
+        return;
+      if (align === "auto") {
+        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
+          align = "end";
+        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
+          align = "start";
+        } else {
+          return [scrollOffset, align];
+        }
+      }
+      if (align === "end" && index === this.options.count - 1) {
+        return [this.getMaxScrollOffset(), align];
+      }
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(toOffset, align, item.size),
+        align
+      ];
+    };
+    this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
+      const offset = this.getOffsetForAlignment(toOffset, align);
+      const now = this.now();
+      this.scrollState = {
+        index: null,
+        align,
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      this.scheduleScrollReconcile();
     };
-    const syncProxyFromTable = () => {
-      if (syncing)
+    this.scrollToIndex = (index, {
+      align: initialAlign = "auto",
+      behavior = "auto"
+    } = {}) => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const offsetInfo = this.getOffsetForIndex(index, initialAlign);
+      if (!offsetInfo) {
         return;
-      syncing = true;
-      hScrollEl.scrollLeft = tableXEl.scrollLeft;
-      syncing = false;
+      }
+      const [offset, align] = offsetInfo;
+      const now = this.now();
+      this.scrollState = {
+        index,
+        align,
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      this.scheduleScrollReconcile();
     };
-    const syncTableFromProxy = () => {
-      if (syncing)
-        return;
-      syncing = true;
-      tableXEl.scrollLeft = hScrollEl.scrollLeft;
-      syncing = false;
+    this.scrollBy = (delta, { behavior = "auto" } = {}) => {
+      const offset = this.getScrollOffset() + delta;
+      const now = this.now();
+      this.scrollState = {
+        index: null,
+        align: "start",
+        behavior,
+        startedAt: now,
+        lastTargetOffset: offset,
+        stableFrames: 0
+      };
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      this.scheduleScrollReconcile();
     };
-    syncWidth();
-    syncProxyFromTable();
-    tableXEl.addEventListener("scroll", syncProxyFromTable, { passive: true });
-    hScrollEl.addEventListener("scroll", syncTableFromProxy, { passive: true });
-    const ro = new ResizeObserver(syncWidth);
-    ro.observe(tableXEl);
-    return () => {
-      tableXEl.removeEventListener("scroll", syncProxyFromTable);
-      hScrollEl.removeEventListener("scroll", syncTableFromProxy);
-      ro.disconnect();
+    this.getTotalSize = () => {
+      var _a;
+      const measurements = this.getMeasurements();
+      let end;
+      if (measurements.length === 0) {
+        end = this.options.paddingStart;
+      } else if (this.options.lanes === 1) {
+        end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
+      } else {
+        const endByLane = Array(this.options.lanes).fill(null);
+        let endIndex = measurements.length - 1;
+        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+          const item = measurements[endIndex];
+          if (endByLane[item.lane] === null) {
+            endByLane[item.lane] = item.end;
+          }
+          endIndex--;
+        }
+        end = Math.max(...endByLane.filter((val) => val !== null));
+      }
+      return Math.max(
+        end - this.options.scrollMargin + this.options.paddingEnd,
+        0
+      );
     };
-  }, [enabled]);
-  return { tableScrollRef, tableXRef, hScrollRef, hScrollContentRef };
-}
-function useElementHeightPx() {
-  const ref = useRef(null);
-  const [heightPx, setHeightPx] = useState(0);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el)
-      return;
-    let rafId = 0;
-    const commit = () => {
-      const next = Math.round(el.getBoundingClientRect().height);
-      setHeightPx((prev) => prev === next ? prev : next);
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
     };
-    const measure = () => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(commit);
+    this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map();
+      this.laneAssignments = /* @__PURE__ */ new Map();
+      this.notify(false);
     };
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    return () => {
-      cancelAnimationFrame(rafId);
-      ro.disconnect();
+    this.setOptions(opts);
+  }
+  scheduleScrollReconcile() {
+    if (!this.targetWindow) {
+      this.scrollState = null;
+      return;
+    }
+    if (this.rafId != null)
+      return;
+    this.rafId = this.targetWindow.requestAnimationFrame(() => {
+      this.rafId = null;
+      this.reconcileScroll();
+    });
+  }
+  reconcileScroll() {
+    if (!this.scrollState)
+      return;
+    const el = this.scrollElement;
+    if (!el)
+      return;
+    const MAX_RECONCILE_MS = 5e3;
+    if (this.now() - this.scrollState.startedAt > MAX_RECONCILE_MS) {
+      this.scrollState = null;
+      return;
+    }
+    const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
+    const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
+    const STABLE_FRAMES = 1;
+    const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
+    if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
+      this.scrollState.stableFrames++;
+      if (this.scrollState.stableFrames >= STABLE_FRAMES) {
+        this.scrollState = null;
+        return;
+      }
+    } else {
+      this.scrollState.stableFrames = 0;
+      if (targetChanged) {
+        this.scrollState.lastTargetOffset = targetOffset;
+        this.scrollState.behavior = "auto";
+        this._scrollToOffset(targetOffset, {
+          adjustments: void 0,
+          behavior: "auto"
+        });
+      }
+    }
+    this.scheduleScrollReconcile();
+  }
+}
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange({
+  measurements,
+  outerSize,
+  scrollOffset,
+  lanes
+}) {
+  const lastIndex = measurements.length - 1;
+  const getOffset = (index) => measurements[index].start;
+  if (measurements.length <= lanes) {
+    return {
+      startIndex: 0,
+      endIndex: lastIndex
     };
+  }
+  let startIndex = findNearestBinarySearch(
+    0,
+    lastIndex,
+    getOffset,
+    scrollOffset
+  );
+  let endIndex = startIndex;
+  if (lanes === 1) {
+    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
+      endIndex++;
+    }
+  } else if (lanes > 1) {
+    const endPerLane = Array(lanes).fill(0);
+    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+      const item = measurements[endIndex];
+      endPerLane[item.lane] = item.end;
+      endIndex++;
+    }
+    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+      const item = measurements[startIndex];
+      startPerLane[item.lane] = item.start;
+      startIndex--;
+    }
+    startIndex = Math.max(0, startIndex - startIndex % lanes);
+    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+  }
+  return { startIndex, endIndex };
+}
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase({
+  useFlushSync = true,
+  ...options
+}) {
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: (instance2, sync) => {
+      var _a;
+      if (useFlushSync && sync) {
+        flushSync(rerender);
+      } else {
+        rerender();
+      }
+      (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
+    }
+  };
+  const [instance] = React.useState(
+    () => new Virtualizer(resolvedOptions)
+  );
+  instance.setOptions(resolvedOptions);
+  useIsomorphicLayoutEffect(() => {
+    return instance._didMount();
   }, []);
-  return { ref, heightPx };
+  useIsomorphicLayoutEffect(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
 }
 function useColumnVirtualizer({
   table,
@@ -15254,7 +15198,7 @@ const StyledTable = (props) => {
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Fetching, { fetching: !!fetching }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { table, styledTableProps: options, scrollRef, columnWindow })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { table, styledTableProps: options, columnWindow })
   ] });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(RootContextProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DndProvider, { enabled: !!enableDnd, data, setData, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",