schummar-table 0.5.3 → 0.6.0

package/dist/es/index.js

@@ -5,18 +5,18 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a2, b) => {
+var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a2, prop, b[prop]);
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp(a2, prop, b[prop]);
+        __defNormalProp(a, prop, b[prop]);
     }
-  return a2;
+  return a;
 };
-var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -29,473 +29,177 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useRef, useContext, useLayoutEffect, useState, useMemo, useEffect, createContext, useCallback, memo } from "react";
-import { P as PopoverContext, g as gray, u as useTableTheme, d as defaultClasses } from "./tableTheme.js";
-export { T as TableThemeContext, a as TableThemeProvider, c as configureTableTheme, m as mergeThemes } from "./tableTheme.js";
+import { useState, useEffect, useMemo, useRef, createContext, useCallback, memo, useContext, cloneElement, useLayoutEffect, Fragment as Fragment$1 } from "react";
+import { Store, StoreScope } from "schummar-state/react";
+import { d as defaultClasses, a as darkGray, l as lightGray, P as Popover, m as mergeThemes, g as globalTableTheme, T as TableThemeContext, b as PopoverContext, c as gray } from "./tableTheme.js";
+export { T as TableThemeContext, f as TableThemeProvider, e as configureTableTheme, m as mergeThemes } from "./tableTheme.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { useDayzed } from "dayzed";
 import { castDraft } from "immer";
-import { Store, StoreScope } from "schummar-state/react";
-import "@emotion/react";
+import { css, ClassNames } from "@emotion/react";
 import "react-dom";
-function useTheme() {
-  const table = useTableContext();
-  return table.useState("theme");
+class Queue {
+  constructor() {
+    this.q = new Array();
+    this.isRunning = false;
+  }
+  run(job, replace) {
+    return new Promise((resolve, reject) => {
+      if (replace) {
+        this.q = [];
+      }
+      this.q.push({ job, resolve, reject });
+      if (!this.isRunning)
+        this.start();
+    });
+  }
+  async start() {
+    this.isRunning = true;
+    let next;
+    while (next = this.q.shift()) {
+      try {
+        const result = await next.job();
+        next.resolve(result);
+      } catch (e2) {
+        next.reject(e2);
+      }
+    }
+    this.isRunning = false;
+  }
 }
-function AutoFocusTextField(props) {
-  const {
-    components: {
-      TextField
+const KEYS = ["sort", "selection", "expanded", "hiddenColumns", "filterValues", "columnWidths", "columnOrder"];
+const storageName = (id) => `schummar-table_state-v1_${id}`;
+function stringify(value) {
+  function prepare(value2) {
+    if (value2 instanceof Date) {
+      return { __date: value2.toJSON() };
     }
-  } = useTheme();
-  const ref = useRef(null);
-  const {
-    visible
-  } = useContext(PopoverContext);
-  useLayoutEffect(() => {
-    if (visible && ref.current) {
-      ref.current.focus();
+    if (value2 instanceof Set) {
+      return { __set: Array.from(value2).map(prepare) };
     }
-  }, [visible]);
-  return jsx(TextField, __spreadProps(__spreadValues({}, props), {
-    inputRef: ref
-  }));
-}
-function useCssVariables() {
-  const table = useTableContext();
-  return table.useState((state) => ({
-    "--spacing": state.theme.spacing,
-    "--primaryMain": state.theme.colors.primary.main,
-    "--primaryLight": state.theme.colors.primary.light,
-    "--primaryContrastText": state.theme.colors.primary.contrastText,
-    "--secondaryMain": state.theme.colors.secondary.main,
-    "--secondaryLight": state.theme.colors.secondary.light,
-    "--secondaryContrastText": state.theme.colors.secondary.contrastText
-  }));
-}
-const weekDays = [0, 1, 2, 3, 4, 5, 6];
-const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
-const endOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, -1);
-function dateIntersect(a2, b) {
-  if (a2 instanceof Date) {
-    a2 = {
-      min: a2,
-      max: a2
-    };
-  }
-  if (b instanceof Date) {
-    b = {
-      min: b,
-      max: b
-    };
-  }
-  if (!(a2 == null ? void 0 : a2.min) || !a2.max || !(b == null ? void 0 : b.min) || !b.max) {
-    return false;
+    if (value2 instanceof Map) {
+      return { __map: Array.from(value2.entries()).map((entry) => entry.map(prepare)) };
+    }
+    if (value2 instanceof Array) {
+      return value2.map(prepare);
+    }
+    if (value2 instanceof Object) {
+      return Object.fromEntries(Object.entries(value2).map(([k, v]) => [k, prepare(v)]));
+    }
+    return value2;
   }
-  return !(endOfDay(a2.max) < startOfDay(b.min) || startOfDay(a2.min) > endOfDay(b.max));
+  return JSON.stringify(prepare(value));
 }
-function DatePicker({
-  value,
-  onChange,
-  rangeSelect,
-  locale,
-  firstDayOfWeek = 0
-}) {
-  const {
-    components: {
-      IconButton
-    },
-    icons: {
-      ChevronRight
+function parse(value) {
+  return JSON.parse(value, (_key, value2) => {
+    if (value2 instanceof Object && "__date" in value2) {
+      return new Date(value2.__date);
     }
-  } = useTheme();
-  const [baseDate] = useState(new Date());
-  const [dateInView, setDateInView] = useState(baseDate);
-  const [currentMin, setCurrentMin] = useState();
-  const [hovered, setHovered] = useState();
-  const min = currentMin != null ? currentMin : value instanceof Date ? value : value == null ? void 0 : value.min;
-  const max = currentMin ? void 0 : value instanceof Date ? value : value == null ? void 0 : value.max;
-  const {
-    calendars,
-    getBackProps,
-    getForwardProps,
-    getDateProps
-  } = useDayzed({
-    onDateSelected: () => void 0,
-    firstDayOfWeek,
-    showOutsideDays: true,
-    date: dateInView,
-    onOffsetChanged: (offset) => setDateInView(new Date(dateInView.getFullYear(), dateInView.getMonth() + offset)),
-    offset: 0
+    if (value2 instanceof Object && "__set" in value2) {
+      return new Set(value2.__set);
+    }
+    if (value2 instanceof Object && "__map" in value2) {
+      return new Map(value2.__map);
+    }
+    return value2;
   });
-  const formatWeekday = useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      weekday: "short"
-    });
-    return (weekDay) => format(new Date(Date.UTC(2021, 5, weekDay)));
-  }, [locale]);
-  useEffect(() => setDateInView(value === null ? new Date() : value instanceof Date ? value : value.max), [value]);
-  return jsx("div", {
-    children: calendars.map(({
-      month,
-      year,
-      weeks
-    }) => jsxs("div", {
-      children: [jsxs("div", {
-        css: {
-          margin: "calc(var(--spacing) * 4) 0",
-          display: "grid",
-          gridAutoFlow: "column",
-          justifyContent: "space-between",
-          alignItems: "center"
-        },
-        children: [jsx(IconButton, __spreadProps(__spreadValues({}, getBackProps({
-          calendars
-        })), {
-          children: jsx(ChevronRight, {
-            css: {
-              transform: "rotate3d(0, 0, 1, 180deg)"
-            }
-          })
-        })), jsxs("div", {
-          css: {
-            display: "flex"
-          },
-          children: [jsx(MonthSelector, {
-            value: month,
-            onChange: (month2) => setDateInView(new Date(year, month2)),
-            locale
-          }), jsx(YearSelector, {
-            value: year,
-            onChange: (year2) => setDateInView(new Date(year2, month))
-          })]
-        }), jsx(IconButton, __spreadProps(__spreadValues({}, getForwardProps({
-          calendars
-        })), {
-          children: jsx(ChevronRight, {})
-        }))]
-      }), jsxs("div", {
-        css: {
-          display: "grid",
-          gridTemplateColumns: "repeat(7, max-content)",
-          fontWeight: "bold"
-        },
-        children: [weekDays.map((_v, weekDay) => jsx("div", {
-          css: {
-            justifySelf: "center",
-            marginBottom: "var(--spacing)"
-          },
-          children: formatWeekday(weekDay)
-        }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
-          if (!dateObj) {
-            return jsx("div", {});
-          }
-          const {
-            prevMonth,
-            nextMonth,
-            date,
-            today: today2
-          } = dateObj;
-          const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, {
-            min,
-            max
-          });
-          const preSelected = !selected && (date.getTime() === (hovered == null ? void 0 : hovered.getTime()) || min && !max && hovered && dateIntersect(date, min <= hovered ? {
-            min,
-            max: hovered
-          } : {
-            min: hovered,
-            max: min
-          }));
-          return jsx("button", __spreadProps(__spreadValues({
-            css: [{
-              padding: 10,
-              border: "1px solid transparent",
-              background: "transparent",
-              cursor: "pointer"
-            }, (prevMonth || nextMonth) && {
-              color: gray
-            }, today2 && {
-              border: "1px solid var(--secondaryMain)"
-            }, selected && {
-              background: "var(--primaryMain)",
-              color: "var(--primaryContrastText)"
-            }, preSelected && {
-              background: "var(--primaryLight)",
-              color: "var(--primaryContrastText)"
-            }]
-          }, getDateProps({
-            dateObj
-          })), {
-            onClick: () => {
-              if (!rangeSelect) {
-                setCurrentMin(void 0);
-                onChange(date);
-              } else if (min && !max) {
-                setCurrentMin(void 0);
-                if (date > min) {
-                  onChange({
-                    min,
-                    max: date
-                  });
-                } else {
-                  onChange({
-                    min: date,
-                    max: min
-                  });
+}
+function useTableStateStorage() {
+  const table = useTableContext();
+  const [isHydrated, setIsHydrated] = useState(false);
+  useEffect(() => {
+    const { persist } = table.getState().props;
+    if (!persist) {
+      setIsHydrated(true);
+      return;
+    }
+    let isCanceled = false;
+    (async () => {
+      var _a, _b;
+      try {
+        const { storage, id, include, exclude } = persist;
+        const json = await storage.getItem(storageName(id));
+        if (isCanceled || !json)
+          return;
+        const data = parse(json);
+        (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "load", json, data);
+        table.update((state) => {
+          var _a2, _b2, _c, _d;
+          for (const key of KEYS) {
+            if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key)) && key in data) {
+              if (key === "filterValues") {
+                for (const [id2, value] of data[key]) {
+                  if ((_b2 = (_a2 = state.filters.get(id2)) == null ? void 0 : _a2.persist) != null ? _b2 : true) {
+                    state.filterValues.set(id2, value);
+                  }
                 }
               } else {
-                setCurrentMin(date);
+                state[key] = data[key];
+                if (key === "expanded" || key === "hiddenColumns" || key === "selection" || key === "sort") {
+                  (_d = (_c = state.props)[`on${key.slice(0, 1).toUpperCase() + key.slice(1)}Change`]) == null ? void 0 : _d.call(_c, data[key]);
+                }
               }
-            },
-            onPointerOver: () => setHovered(date),
-            onPointerOut: () => setHovered(void 0),
-            children: date.getDate()
-          }), `${index}-${dayIndex}`);
-        }))]
-      })]
-    }, `${month}${year}`))
-  });
-}
-function MonthSelector({
-  value,
-  onChange,
-  locale
-}) {
-  const {
-    components: {
-      Popover
-    }
-  } = useTheme();
-  const cssVariables = useCssVariables();
-  const [anchor, setAnchor] = useState();
-  const formatMonth = useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      month: "long"
-    });
-    return (month) => format(new Date(2021, month));
-  }, [locale]);
-  return jsxs(Fragment, {
-    children: [jsx("button", {
-      css: {
-        border: "none",
-        background: "transparent",
-        fontSize: "inherit",
-        cursor: "pointer"
-      },
-      onClick: (e) => setAnchor(e.currentTarget),
-      children: formatMonth(value)
-    }), jsx(Popover, {
-      open: !!anchor,
-      anchorEl: anchor != null ? anchor : null,
-      onClose: () => setAnchor(void 0),
-      align: "center",
-      css: cssVariables,
-      children: jsx("div", {
-        css: {
-          display: "grid"
-        },
-        children: months.map((month) => jsx("button", {
-          css: [{
-            padding: "var(--spacing)",
-            border: "none",
-            background: "transparent",
-            "&:hover": {
-              background: "var(--primaryLight)"
             }
-          }, month === value && {
-            background: "var(--primaryMain)"
-          }],
-          onClick: () => onChange(month),
-          children: formatMonth(month)
-        }, month))
-      })
-    })]
-  });
-}
-function YearSelector({
-  value,
-  onChange,
-  locale
-}) {
-  const [input, setInput] = useState();
-  const ref = useRef(null);
-  function apply() {
-    onChange(Number(input));
-    setInput(void 0);
-  }
-  const formatYear = useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      year: "numeric"
-    });
-    return (year) => format(new Date(year, 0, 1));
-  }, [locale]);
-  useLayoutEffect(() => {
-    var _a;
-    return (_a = ref.current) == null ? void 0 : _a.focus();
-  }, [ref.current]);
-  if (input === void 0) {
-    return jsx("div", {
-      onClick: () => setInput(String(value)),
-      children: formatYear(value)
-    });
-  }
-  return jsx("input", {
-    ref,
-    css: {
-      width: "4ch"
-    },
-    value: input,
-    onChange: (e) => {
-      if (e.target.value.match(/^\d{0,4}$/)) {
-        setInput(e.target.value);
+          }
+        });
+      } catch (e2) {
+        console.error("Failed to load table state:", e2);
+      } finally {
+        setIsHydrated(true);
       }
-    },
-    onBlur: apply,
-    onKeyPress: (e) => e.key === "Enter" && apply()
-  });
-}
-function convertDate(x) {
-  if (x instanceof Date)
-    return x;
-  if (typeof x === "number" || typeof x === "string")
-    return new Date(x);
-  return null;
-}
-function convertDateOrRange(x) {
-  if (x instanceof Object && "min" in x && "max" in x) {
-    const range = {
-      min: convertDate(x.min),
-      max: convertDate(x.max)
+    })();
+    return () => {
+      isCanceled = true;
     };
-    return range.min && range.max ? range : null;
-  }
-  return convertDate(x);
-}
-function convertDateOrArray(x) {
-  if (x instanceof Array)
-    return x.map(convertDateOrRange).filter(Boolean);
-  return convertDateOrRange(x);
-}
-function DateFilter(_a) {
-  var _b = _a, {
-    locale,
-    firstDayOfWeek,
-    singleSelect,
-    filterBy = convertDateOrArray
-  } = _b, props = __objRest(_b, [
-    "locale",
-    "firstDayOfWeek",
-    "singleSelect",
-    "filterBy"
-  ]);
-  const {
-    components: {
-      Button
-    },
-    text
-  } = useTheme();
-  const {
-    value = null,
-    onChange
-  } = useFilter(__spreadProps(__spreadValues({}, props), {
-    filterBy,
-    id: "dateFilter",
-    isActive(filterValue) {
-      return !!filterValue;
-    },
-    test(filterValue, value2) {
-      return dateIntersect(filterValue, value2);
-    }
-  }));
-  const formatDate = useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      dateStyle: "medium"
-    });
-    return format;
-  }, [locale]);
-  return jsxs("div", {
-    css: {
-      padding: "calc(var(--spacing) * 2)",
-      display: "grid"
-    },
-    children: [!singleSelect && jsxs("div", {
-      css: {
-        marginBottom: "var(--spacing)",
-        display: "flex",
-        justifyContent: "center"
-      },
-      children: [value ? formatDate(value instanceof Date ? value : value.min) : "", " -", " ", value ? formatDate(value instanceof Date ? value : value.max) : ""]
-    }), jsx(DatePicker, {
-      rangeSelect: !singleSelect,
-      value,
-      onChange,
-      locale,
-      firstDayOfWeek
-    }), jsxs("div", {
-      css: {
-        marginTop: "var(--spacing)",
-        display: "grid",
-        gridAutoFlow: "column",
-        justifyContent: "center"
-      },
-      children: [jsx(Button, {
-        variant: "text",
-        onClick: () => onChange(today()),
-        children: text.today
-      }), jsx(Button, {
-        variant: "text",
-        onClick: () => onChange(thisWeek(firstDayOfWeek)),
-        children: text.thisWeek
-      }), jsx(Button, {
-        variant: "text",
-        onClick: () => onChange(null),
-        children: text.reset
-      })]
-    })]
-  });
+  }, []);
+  useEffect(() => {
+    if (!isHydrated)
+      return;
+    const q = new Queue();
+    return table.subscribe((state) => {
+      var _a, _b;
+      if (!state.props.persist)
+        return;
+      const { storage, id, include, exclude } = state.props.persist;
+      const data = {};
+      for (const key of KEYS) {
+        if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key))) {
+          if (key === "filterValues") {
+            data[key] = /* @__PURE__ */ new Map();
+            for (const [id2, value] of state.filterValues) {
+              if ((_b = (_a = state.filters.get(id2)) == null ? void 0 : _a.persist) != null ? _b : true) {
+                data.filterValues.set(id2, value);
+              }
+            }
+          } else {
+            data[key] = state[key];
+          }
+        }
+      }
+      return { storage, id, data };
+    }, (props) => {
+      var _a, _b;
+      if (!props)
+        return;
+      const { storage, id, data } = props;
+      (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "save", data, stringify(data));
+      q.run(async () => {
+        await storage.setItem(storageName(id), stringify(data));
+      }, true);
+    }, { throttle: 1e3 });
+  }, [isHydrated]);
+  return isHydrated;
 }
-const today = () => {
-  const today2 = startOfDay(new Date());
-  return {
-    min: today2,
-    max: today2
-  };
-};
-const thisWeek = (firstDayOfWeek = 0) => {
-  const now = new Date();
-  const min = new Date(now);
-  let diff = min.getDay() - firstDayOfWeek;
-  if (diff < 0) {
-    diff += 7;
-  }
-  min.setDate(min.getDate() - diff);
-  const max = new Date(min);
-  max.setDate(max.getDate() + 6);
-  return {
-    min: startOfDay(min),
-    max: endOfDay(max)
-  };
-};
 const flatMap = (arr, flatMap2) => {
   return [...arr].reduce((out, cur) => out.concat(flatMap2(cur)), []);
 };
 const orderBy = (arr, selectors = [], direction = []) => {
   if (selectors.length === 0)
     selectors = [(t) => t];
-  return [...arr].sort((a2, b) => {
+  return [...arr].sort((a, b) => {
     var _a, _b;
     for (let i = 0; i < selectors.length; i++) {
-      const _a2 = (_a = selectors[i]) == null ? void 0 : _a.call(selectors, a2);
+      const _a2 = (_a = selectors[i]) == null ? void 0 : _a.call(selectors, a);
       const _b2 = (_b = selectors[i]) == null ? void 0 : _b.call(selectors, b);
       const dir = direction[i] === "desc" ? -1 : 1;
       if (_a2 > _b2)
@@ -512,9 +216,9 @@ const uniq = (arr) => {
     set.add(t);
   return Array.from(set);
 };
-const intersect = (a2, b) => {
+const intersect = (a, b) => {
   const result = /* @__PURE__ */ new Set();
-  for (const x of a2)
+  for (const x of a)
     if (b.has(x))
       result.add(x);
   return result;
@@ -556,235 +260,59 @@ const asStringOrArray = (x) => {
     return x.map(asString);
   return asString(x);
 };
-const castArray = (a2) => a2 instanceof Array ? a2 : [a2];
+const castArray = (a) => a instanceof Array ? a : [a];
 const cx = (...classNames) => classNames.flatMap((entry) => {
   if (!entry)
     return [];
   if (typeof entry === "string")
     return [entry];
-  return Object.entries(entry).filter(([, predicate]) => predicate).map(([className]) => className);
+  return Object.entries(entry).filter(([, predicate]) => predicate).map(([className2]) => className2);
 }).join(" ");
-function FormControlLabel({
-  control,
-  label,
-  disabled
-}) {
-  return jsxs("label", {
-    css: [{
-      display: "flex",
-      alignItems: "center",
-      cursor: "pointer",
-      userSelect: "none",
-      "& > *": {
-        cursor: "pointer"
-      }
-    }, disabled && {
-      color: "rgba(0, 0, 0, 0.26)"
-    }],
-    children: [control, jsx("span", {
-      css: {
-        marginLeft: "var(--spacing)"
-      },
-      children: label
-    })]
-  });
-}
-class Queue {
-  constructor() {
-    this.q = new Array();
-    this.isRunning = false;
-  }
-  run(job, replace) {
-    return new Promise((resolve, reject) => {
-      if (replace) {
-        this.q = [];
-      }
-      this.q.push({ job, resolve, reject });
-      if (!this.isRunning)
-        this.start();
-    });
-  }
-  async start() {
-    this.isRunning = true;
-    let next;
-    while (next = this.q.shift()) {
-      try {
-        const result = await next.job();
-        next.resolve(result);
-      } catch (e) {
-        next.reject(e);
-      }
-    }
-    this.isRunning = false;
-  }
-}
-const KEYS = ["sort", "selection", "expanded", "hiddenColumns", "filterValues", "columnWidths", "columnOrder"];
-function stringify(value) {
-  function prepare(value2) {
-    if (value2 instanceof Date) {
-      return { __date: value2.toJSON() };
-    }
-    if (value2 instanceof Set) {
-      return { __set: Array.from(value2).map(prepare) };
-    }
-    if (value2 instanceof Map) {
-      return { __map: Array.from(value2.entries()).map((entry) => entry.map(prepare)) };
-    }
-    if (value2 instanceof Array) {
-      return value2.map(prepare);
-    }
-    if (value2 instanceof Object) {
-      return Object.fromEntries(Object.entries(value2).map(([k, v]) => [k, prepare(v)]));
-    }
-    return value2;
-  }
-  return JSON.stringify(prepare(value));
-}
-function parse(value) {
-  return JSON.parse(value, (_key, value2) => {
-    if (value2 instanceof Object && "__date" in value2) {
-      return new Date(value2.__date);
-    }
-    if (value2 instanceof Object && "__set" in value2) {
-      return new Set(value2.__set);
-    }
-    if (value2 instanceof Object && "__map" in value2) {
-      return new Map(value2.__map);
-    }
-    return value2;
-  });
-}
-function useTableStateStorage() {
-  const table = useTableContext();
-  const [isHydrated, setIsHydrated] = useState(false);
-  useEffect(() => {
-    const { persist } = table.getState().props;
-    if (!persist) {
-      setIsHydrated(true);
-      return;
-    }
-    let isCanceled = false;
-    (async () => {
-      var _a, _b;
-      try {
-        const { storage, id = "table", include, exclude } = persist;
-        const json = await storage.getItem(`${id}_state`);
-        if (isCanceled || !json)
-          return;
-        const data = parse(json);
-        (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "load", json, data);
-        table.update((state) => {
-          var _a2, _b2, _c, _d;
-          for (const key of KEYS) {
-            if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key)) && key in data) {
-              if (key === "filterValues") {
-                for (const [id2, value] of data[key]) {
-                  if ((_b2 = (_a2 = state.filters.get(id2)) == null ? void 0 : _a2.persist) != null ? _b2 : true) {
-                    state.filterValues.set(id2, value);
-                  }
-                }
-              } else {
-                state[key] = data[key];
-                if (key === "expanded" || key === "hiddenColumns" || key === "selection" || key === "sort") {
-                  (_d = (_c = state.props)[`on${key.slice(0, 1).toUpperCase() + key.slice(1)}Change`]) == null ? void 0 : _d.call(_c, data[key]);
-                }
-              }
-            }
-          }
-        });
-      } catch (e) {
-        console.error("Failed to load table state:", e);
-      } finally {
-        setIsHydrated(true);
-      }
-    })();
-    return () => {
-      isCanceled = true;
-    };
-  }, []);
-  useEffect(() => {
-    if (!isHydrated)
-      return;
-    const q = new Queue();
-    return table.subscribe((state) => {
-      var _a, _b;
-      if (!state.props.persist)
-        return;
-      const { storage, id = "table", include, exclude } = state.props.persist;
-      const data = {};
-      for (const key of KEYS) {
-        if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key))) {
-          if (key === "filterValues") {
-            data[key] = /* @__PURE__ */ new Map();
-            for (const [id2, value] of state.filterValues) {
-              if ((_b = (_a = state.filters.get(id2)) == null ? void 0 : _a.persist) != null ? _b : true) {
-                data.filterValues.set(id2, value);
-              }
-            }
-          } else {
-            data[key] = state[key];
-          }
-        }
-      }
-      return { storage, id, data };
-    }, (props) => {
-      var _a, _b;
-      if (!props)
-        return;
-      const { storage, id, data } = props;
-      (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "save", data, stringify(data));
-      q.run(async () => {
-        await storage.setItem(`${id}_state`, stringify(data));
-      }, true);
-    }, { throttle: 1e3 });
-  }, [isHydrated]);
-  return isHydrated;
-}
-function calcItems(state) {
-  useEffect(() => state.addReaction((state2) => [
-    state2.props.items,
-    state2.props.id,
-    state2.props.parentId,
-    state2.props.revealFiltered,
-    state2.sort,
-    state2.filters,
-    state2.filterValues,
-    state2.activeColumns,
-    state2.expanded
-  ], ([items = [], id, parentId, revealFiltered, sort, filters, filterValues, activeColumns], draft) => {
-    const tableItems = items.map((item) => __spreadProps(__spreadValues({}, item), {
-      id: id(item),
-      parentId: parentId == null ? void 0 : parentId(item),
-      children: []
-    }));
-    let sorted;
-    if (sort.length === 0) {
-      sorted = tableItems;
-    } else {
-      const selectors = flatMap(sort, (sort2) => {
-        const column = activeColumns.find((column2) => column2.id === sort2.columnId);
-        if (!column)
-          return [];
-        const sortBy = column.sortBy instanceof Array ? column.sortBy : [column.sortBy];
-        return sortBy.map((sortBy2) => ({ selector: (item) => sortBy2(column.value(item), item), direction: sort2.direction }));
-      }).filter(Boolean);
-      sorted = orderBy(tableItems, selectors.map((x) => x.selector), selectors.map((x) => x.direction));
-    }
-    const lookup = /* @__PURE__ */ new Map();
-    for (const item of sorted) {
-      lookup.set(item.id, item);
-    }
-    for (const item of sorted) {
-      const parent = item.parentId !== void 0 ? lookup.get(item.parentId) : void 0;
-      parent == null ? void 0 : parent.children.push(item);
-    }
-    const allItems = new Array();
-    const allItemsById = /* @__PURE__ */ new Map();
-    const traverse = (items2) => {
-      for (const item of items2) {
-        allItems.push(item);
-        allItemsById.set(item.id, item);
-        traverse(item.children);
+function calcItems(state) {
+  useEffect(() => state.addReaction((state2) => [
+    state2.props.items,
+    state2.props.id,
+    state2.props.parentId,
+    state2.props.revealFiltered,
+    state2.sort,
+    state2.filters,
+    state2.filterValues,
+    state2.activeColumns,
+    state2.expanded
+  ], ([items = [], id, parentId, revealFiltered, sort, filters, filterValues, activeColumns], draft) => {
+    const tableItems = items.map((item) => __spreadProps(__spreadValues({}, item), {
+      id: id(item),
+      parentId: parentId == null ? void 0 : parentId(item),
+      children: []
+    }));
+    let sorted;
+    if (sort.length === 0) {
+      sorted = tableItems;
+    } else {
+      const selectors = flatMap(sort, (sort2) => {
+        const column = activeColumns.find((column2) => column2.id === sort2.columnId);
+        if (!column)
+          return [];
+        const sortBy = column.sortBy instanceof Array ? column.sortBy : [column.sortBy];
+        return sortBy.map((sortBy2) => ({ selector: (item) => sortBy2(column.value(item), item), direction: sort2.direction }));
+      }).filter(Boolean);
+      sorted = orderBy(tableItems, selectors.map((x) => x.selector), selectors.map((x) => x.direction));
+    }
+    const lookup = /* @__PURE__ */ new Map();
+    for (const item of sorted) {
+      lookup.set(item.id, item);
+    }
+    for (const item of sorted) {
+      const parent = item.parentId !== void 0 ? lookup.get(item.parentId) : void 0;
+      parent == null ? void 0 : parent.children.push(item);
+    }
+    const allItems = new Array();
+    const allItemsById = /* @__PURE__ */ new Map();
+    const traverse = (items2) => {
+      for (const item of items2) {
+        allItems.push(item);
+        allItemsById.set(item.id, item);
+        traverse(item.children);
       }
     };
     traverse(sorted.filter((item) => item.parentId === void 0));
@@ -1002,12 +530,10 @@ function syncSelections(table) {
 }
 function useTableState(_props) {
   const props = calcProps(_props);
-  const theme = useTableTheme(props);
   const state = useMemo(() => {
     var _a, _b, _c, _d;
     return new Store({
       props,
-      theme,
       sort: (_a = props.defaultSort) != null ? _a : [],
       selection: (_b = props.defaultSelection) != null ? _b : /* @__PURE__ */ new Set(),
       expanded: (_c = props.defaultExpanded) != null ? _c : /* @__PURE__ */ new Set(),
@@ -1046,1022 +572,1977 @@ function useTableState(_props) {
           const index = props.columns.indexOf(column);
           state2.columnOrder.splice(index, 0, column.id);
         }
-      }
-      state2.theme = theme;
-    });
-  }, [state, props]);
-  return state;
+      }
+    });
+  }, [state, props]);
+  return state;
+}
+function useCssVariables() {
+  const theme = useTheme();
+  return {
+    "--spacing": theme.spacing,
+    "--primaryMain": theme.colors.primary.main,
+    "--primaryLight": theme.colors.primary.light,
+    "--primaryContrastText": theme.colors.primary.contrastText,
+    "--secondaryMain": theme.colors.secondary.main,
+    "--secondaryLight": theme.colors.secondary.light,
+    "--secondaryContrastText": theme.colors.secondary.contrastText
+  };
+}
+const ColumnHeaderContext = new StoreScope({
+  items: /* @__PURE__ */ new Map()
+});
+function ColumnHeader(props) {
+  const ref = useRef(null);
+  const columnId = useColumnContext();
+  const table = useTableContext();
+  const enabled = table.useState("props.enableColumnReorder");
+  const store = ColumnHeaderContext.useStore();
+  const draggingStart = useRef();
+  const clone = useRef();
+  useEffect(() => {
+    const div = ref.current;
+    if (!div)
+      return;
+    store.update((state) => {
+      state.items.set(columnId, castDraft(div));
+    });
+    return () => {
+      store.update((state) => {
+        state.items.delete(columnId);
+      });
+    };
+  }, [ref.current, store, columnId]);
+  function calcTargetIndex(offsetLeft) {
+    var _a, _b, _c;
+    const cols = table.getState().columnOrder.map((id) => ({
+      id,
+      div: store.getState().items.get(id)
+    }));
+    const otherCols = cols.filter((col) => col.id !== columnId);
+    const firstOffsetleft = (_c = (_b = (_a = cols.find((col) => col.div)) == null ? void 0 : _a.div) == null ? void 0 : _b.offsetLeft) != null ? _c : 0;
+    let sum = 0;
+    const targetIndex = otherCols.findIndex((col) => {
+      var _a2, _b2;
+      const width = (_b2 = (_a2 = col.div) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0;
+      if (sum + width / 2 > offsetLeft - firstOffsetleft)
+        return true;
+      sum += width;
+      return false;
+    });
+    return targetIndex === -1 ? otherCols.length : targetIndex;
+  }
+  function onPointerDown(e2) {
+    const div = ref.current;
+    if (!div)
+      return;
+    draggingStart.current = {
+      mouseX: e2.clientX,
+      bounds: div.getBoundingClientRect()
+    };
+  }
+  function onPointerMove(e2) {
+    table.update((state) => {
+      const div = ref.current;
+      if (!div || draggingStart.current === void 0 || Math.abs(e2.clientX - draggingStart.current.mouseX) < 5)
+        return;
+      e2.stopPropagation();
+      div.setPointerCapture(e2.pointerId);
+      if (!clone.current) {
+        clone.current = div.cloneNode(true);
+        document.body.append(clone.current);
+        for (const [key, value] of Object.entries(getComputedStyle(div))) {
+          try {
+            clone.current.style[key] = value;
+          } catch {
+          }
+        }
+        Object.assign(clone.current.style, {
+          pointerEvents: "none",
+          position: "fixed",
+          boxShadow: "0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)",
+          left: `${draggingStart.current.bounds.left}px`,
+          top: `${draggingStart.current.bounds.top}px`
+        });
+        div.style.color = "rgba(0, 0, 0, 0.2)";
+      }
+      clone.current.style.left = `${draggingStart.current.bounds.left + e2.clientX - draggingStart.current.mouseX}px`;
+      const index = state.columnOrder.indexOf(columnId);
+      const targetIndex = calcTargetIndex(div.offsetLeft + e2.clientX - draggingStart.current.mouseX);
+      const columns = table.getState().columnOrder.map((id, index2) => {
+        var _a, _b;
+        return {
+          id,
+          index: index2,
+          width: (_b = (_a = store.getState().items.get(id)) == null ? void 0 : _a.offsetWidth) != null ? _b : 0
+        };
+      });
+      state.columnOrder.forEach((id, i) => {
+        let offset = 0;
+        if (i === index) {
+          if (targetIndex > index) {
+            offset = columns.slice(index + 1, targetIndex + 1).reduce((sum, col) => sum + col.width, 0);
+          } else if (targetIndex < index) {
+            offset = -columns.slice(targetIndex, index).reduce((sum, col) => sum + col.width, 0);
+          }
+        } else if (i >= targetIndex && i < index) {
+          offset = div.offsetWidth;
+        } else if (i > index && i <= targetIndex) {
+          offset = -div.offsetWidth;
+        }
+        state.columnStyleOverride.set(id, {
+          transition: "transform 500ms",
+          transform: `translate3d(${offset}px, 0, 0)`,
+          zIndex: i === index ? 1 : void 0
+        });
+      });
+    });
+  }
+  function onPointerUp(e2) {
+    table.update((state) => {
+      var _a;
+      const div = ref.current;
+      if (!div || draggingStart.current === void 0)
+        return;
+      const index = state.columnOrder.indexOf(columnId);
+      const targetIndex = calcTargetIndex(div.offsetLeft + e2.clientX - draggingStart.current.mouseX);
+      state.columnOrder.splice(index, 1);
+      state.columnOrder.splice(targetIndex, 0, columnId);
+      (_a = clone.current) == null ? void 0 : _a.remove();
+      div.style.color = "";
+      state.columnStyleOverride.clear();
+      draggingStart.current = void 0;
+      clone.current = void 0;
+    });
+  }
+  return jsx("div", __spreadProps(__spreadValues({}, props), {
+    css: {
+      position: "relative",
+      userSelect: "none"
+    },
+    ref,
+    onPointerDown: enabled ? onPointerDown : void 0,
+    onPointerMove: enabled ? onPointerMove : void 0,
+    onPointerUp: enabled ? onPointerUp : void 0,
+    children: props.children
+  }));
+}
+function FormControlLabel({
+  control,
+  label,
+  disabled
+}) {
+  return jsxs("label", {
+    css: [{
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      userSelect: "none",
+      "& > *": {
+        cursor: "pointer"
+      }
+    }, disabled && {
+      color: "rgba(0, 0, 0, 0.26)"
+    }],
+    children: [control, jsx("span", {
+      css: {
+        marginLeft: "var(--spacing)"
+      },
+      children: label
+    })]
+  });
+}
+function ColumnSelection() {
+  const {
+    components: {
+      IconButton: IconButton2,
+      Popover: Popover2,
+      Checkbox: Checkbox2
+    },
+    icons: {
+      Settings: Settings2
+    },
+    text
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const table = useTableContext();
+  const columns = table.useState("props.columns");
+  const hiddenColumns = table.useState("hiddenColumns");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const toggle2 = (column) => {
+    const {
+      props: {
+        hiddenColumns: controlledHiddenColumns,
+        onHiddenColumnsChange
+      }
+    } = table.getState();
+    const newValue = new Set(hiddenColumns);
+    if (hiddenColumns.has(column.id))
+      newValue.delete(column.id);
+    else
+      newValue.add(column.id);
+    if (!controlledHiddenColumns) {
+      table.update((state) => {
+        state.hiddenColumns = newValue;
+      });
+    }
+    onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
+  };
+  return jsxs(Fragment, {
+    children: [jsx(IconButton2, {
+      onClick: (e2) => setAnchorEl(anchorEl ? null : e2.currentTarget),
+      children: jsx(Settings2, {})
+    }), jsx(Popover2, {
+      anchorEl,
+      open: !!anchorEl,
+      onClose: () => setAnchorEl(null),
+      css: cssVariables,
+      children: jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid"
+        },
+        children: [jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: text.selectColumns
+        }), columns.map((column) => jsx(FormControlLabel, {
+          control: jsx(Checkbox2, {
+            checked: !hiddenColumns.has(column.id),
+            onChange: () => toggle2(column),
+            disabled: column.cannotHide
+          }),
+          label: column.header
+        }, column.id))]
+      })
+    })]
+  });
+}
+function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" } = {}) {
+  const cells = data.map((line) => line.map((value) => {
+    if (typeof value === "number")
+      return String(value);
+    if (![separator, quote, eol].some((c) => value.includes(c)))
+      return value;
+    const clean = value.replace(new RegExp(quote, "g"), `${quote}${quote}`);
+    return `${quote}${clean}${quote}`;
+  }));
+  return (sepPrefix ? `SEP=${separator}
+` : "") + cells.map((line) => line.join(separator)).join(eol);
+}
+function Export$1() {
+  const table = useTableContext();
+  const {
+    components: {
+      Button: Button2,
+      IconButton: IconButton2,
+      Popover: Popover2
+    },
+    icons: {
+      Export: Export2,
+      Clipboard: Clipboard2
+    },
+    text
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const [anchor, setAnchor] = useState(null);
+  const generate = (options) => {
+    const {
+      activeColumns,
+      activeItems
+    } = table.getState();
+    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item)))];
+    return csvExport(data, options);
+  };
+  const copy = () => {
+    navigator.clipboard.writeText(generate(table.getState().props.enableExport.copy));
+  };
+  const download = () => {
+    const a = document.createElement("a");
+    a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(generate(table.getState().props.enableExport.download));
+    a.download = "export.csv";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  return jsxs(Fragment, {
+    children: [jsx(IconButton2, {
+      onClick: (e2) => setAnchor(anchor ? null : e2.currentTarget),
+      children: jsx(Export2, {
+        css: !!anchor && {
+          color: "var(--primaryMain)"
+        }
+      })
+    }), jsx(Popover2, {
+      open: !!anchor,
+      onClose: () => setAnchor(null),
+      anchorEl: anchor,
+      css: cssVariables,
+      children: jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid",
+          justifyItems: "stretch",
+          gap: "var(--spacing)",
+          "& > *": {
+            justifyContent: "start"
+          }
+        },
+        children: [jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: text.exportTitle
+        }), jsx(Button2, {
+          startIcon: jsx(Clipboard2, {}),
+          onClick: copy,
+          children: text.exportCopy
+        }), jsx(Button2, {
+          startIcon: jsx(Export2, {}),
+          onClick: download,
+          children: text.exportDownload
+        })]
+      })
+    })]
+  });
 }
-const ColumnHeaderContext = new StoreScope({
-  items: /* @__PURE__ */ new Map()
-});
-function ColumnHeader(props) {
-  const ref = useRef(null);
-  const columnId = useColumnContext();
+const FilterControlContext = createContext(() => void 0);
+function FilterControl() {
   const table = useTableContext();
-  const enabled = table.useState("props.enableColumnReorder");
-  const store = ColumnHeaderContext.useStore();
-  const draggingStart = useRef();
-  const clone = useRef();
-  useEffect(() => {
-    const div = ref.current;
-    if (!div)
-      return;
-    store.update((state) => {
-      state.items.set(columnId, castDraft(div));
-    });
-    return () => {
-      store.update((state) => {
-        state.items.delete(columnId);
-      });
-    };
-  }, [ref.current, store, columnId]);
-  function calcTargetIndex(offsetLeft) {
-    var _a, _b, _c;
-    const cols = table.getState().columnOrder.map((id) => ({
-      id,
-      div: store.getState().items.get(id)
-    }));
-    const otherCols = cols.filter((col) => col.id !== columnId);
-    const firstOffsetleft = (_c = (_b = (_a = cols.find((col) => col.div)) == null ? void 0 : _a.div) == null ? void 0 : _b.offsetLeft) != null ? _c : 0;
-    let sum = 0;
-    const targetIndex = otherCols.findIndex((col) => {
-      var _a2, _b2;
-      const width = (_b2 = (_a2 = col.div) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0;
-      if (sum + width / 2 > offsetLeft - firstOffsetleft)
-        return true;
-      sum += width;
-      return false;
+  const columnId = useColumnContext();
+  const {
+    components: {
+      IconButton: IconButton2,
+      Popover: Popover2
+    },
+    icons: {
+      FilterList: FilterList2,
+      ArrowDropDown: ArrowDropDown2
+    }
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const [anchor, setAnchor] = useState(null);
+  const isActive = table.useState((state) => {
+    const filter2 = state.filters.get(columnId);
+    const filterValue = state.filterValues.get(columnId);
+    return filter2 !== void 0 && filterValue !== void 0 && filter2.isActive(filterValue);
+  });
+  const filter = table.useState((state) => {
+    var _a;
+    return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
+  });
+  function reset() {
+    table.update((state) => {
+      state.filterValues.delete(columnId);
     });
-    return targetIndex === -1 ? otherCols.length : targetIndex;
   }
-  function onPointerDown(e) {
-    const div = ref.current;
-    if (!div)
-      return;
-    draggingStart.current = {
-      mouseX: e.clientX,
-      bounds: div.getBoundingClientRect()
-    };
+  const close = useCallback(function() {
+    setAnchor(null);
+  }, []);
+  if (!filter)
+    return null;
+  return jsxs(FilterControlContext.Provider, {
+    value: close,
+    children: [jsx("div", {
+      onClick: (e2) => setAnchor(e2.currentTarget),
+      onContextMenu: (e2) => {
+        reset();
+        e2.preventDefault();
+        return false;
+      },
+      children: jsx(IconButton2, {
+        css: [{
+          color: "#b0bac9"
+        }, isActive && {
+          color: "var(--primaryMain) !important"
+        }],
+        children: isActive ? jsx(FilterList2, {}) : jsx(ArrowDropDown2, {})
+      })
+    }), jsx("div", {
+      onPointerDown: (e2) => {
+        e2.stopPropagation();
+      },
+      onPointerMove: (e2) => {
+        e2.stopPropagation();
+      },
+      children: jsx(Popover2, {
+        open: true,
+        hidden: !anchor,
+        onClose: () => setAnchor(null),
+        anchorEl: anchor != null ? anchor : document.body,
+        css: cssVariables,
+        children: filter
+      })
+    })]
+  });
+}
+function ResizeHandle() {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const enabled = table.useState("props.enableColumnResize");
+  function onPointerDown(e2) {
+    e2.stopPropagation();
+    const div = e2.target;
+    div.setPointerCapture(e2.pointerId);
   }
-  function onPointerMove(e) {
+  function onPointerMove(e2) {
+    e2.stopPropagation();
+    const div = e2.target;
+    if (!div.hasPointerCapture(e2.pointerId))
+      return;
+    const parent = div.parentElement;
+    const width = Math.max(e2.clientX - parent.getBoundingClientRect().left + 5, 50);
     table.update((state) => {
-      const div = ref.current;
-      if (!div || draggingStart.current === void 0 || Math.abs(e.clientX - draggingStart.current.mouseX) < 5)
-        return;
-      e.stopPropagation();
-      div.setPointerCapture(e.pointerId);
-      if (!clone.current) {
-        clone.current = div.cloneNode(true);
-        document.body.append(clone.current);
-        for (const [key, value] of Object.entries(getComputedStyle(div))) {
-          try {
-            clone.current.style[key] = value;
-          } catch {
-          }
-        }
-        Object.assign(clone.current.style, {
-          pointerEvents: "none",
-          position: "fixed",
-          boxShadow: "0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)",
-          left: `${draggingStart.current.bounds.left}px`,
-          top: `${draggingStart.current.bounds.top}px`
-        });
-        div.style.color = "rgba(0, 0, 0, 0.2)";
-      }
-      clone.current.style.left = `${draggingStart.current.bounds.left + e.clientX - draggingStart.current.mouseX}px`;
-      const index = state.columnOrder.indexOf(columnId);
-      const targetIndex = calcTargetIndex(div.offsetLeft + e.clientX - draggingStart.current.mouseX);
-      const columns = table.getState().columnOrder.map((id, index2) => {
-        var _a, _b;
-        return {
-          id,
-          index: index2,
-          width: (_b = (_a = store.getState().items.get(id)) == null ? void 0 : _a.offsetWidth) != null ? _b : 0
-        };
-      });
-      state.columnOrder.forEach((id, i) => {
-        let offset = 0;
-        if (i === index) {
-          if (targetIndex > index) {
-            offset = columns.slice(index + 1, targetIndex + 1).reduce((sum, col) => sum + col.width, 0);
-          } else if (targetIndex < index) {
-            offset = -columns.slice(targetIndex, index).reduce((sum, col) => sum + col.width, 0);
-          }
-        } else if (i >= targetIndex && i < index) {
-          offset = div.offsetWidth;
-        } else if (i > index && i <= targetIndex) {
-          offset = -div.offsetWidth;
-        }
-        state.columnStyleOverride.set(id, {
-          transition: "transform 500ms",
-          transform: `translate3d(${offset}px, 0, 0)`,
-          zIndex: i === index ? 1 : void 0
-        });
-      });
+      state.columnWidths.set(columnId, `${width}px`);
     });
   }
-  function onPointerUp(e) {
+  function onPointerUp(e2) {
+    e2.stopPropagation();
+    const div = e2.target;
+    div.releasePointerCapture(e2.pointerId);
+  }
+  function onDoubleClick(e2) {
     table.update((state) => {
-      var _a;
-      const div = ref.current;
-      if (!div || draggingStart.current === void 0)
-        return;
-      const index = state.columnOrder.indexOf(columnId);
-      const targetIndex = calcTargetIndex(div.offsetLeft + e.clientX - draggingStart.current.mouseX);
-      state.columnOrder.splice(index, 1);
-      state.columnOrder.splice(targetIndex, 0, columnId);
-      (_a = clone.current) == null ? void 0 : _a.remove();
-      div.style.color = "";
-      state.columnStyleOverride.clear();
-      draggingStart.current = void 0;
-      clone.current = void 0;
+      if (e2.getModifierState("Control")) {
+        state.columnWidths.delete(columnId);
+      } else {
+        state.columnWidths.set(columnId, "max-content");
+      }
     });
   }
-  return jsx("div", __spreadProps(__spreadValues({}, props), {
-    css: {
-      position: "relative",
-      userSelect: "none"
-    },
-    ref,
+  return jsx(ResizeHandleView, {
+    enabled,
     onPointerDown: enabled ? onPointerDown : void 0,
     onPointerMove: enabled ? onPointerMove : void 0,
     onPointerUp: enabled ? onPointerUp : void 0,
-    children: props.children
-  }));
+    onDoubleClick: enabled ? onDoubleClick : void 0
+  });
 }
-function ColumnSelection() {
+function ResizeHandleView(_a) {
+  var _b = _a, {
+    enabled
+  } = _b, props = __objRest(_b, [
+    "enabled"
+  ]);
+  return jsx("div", __spreadValues({
+    css: {
+      alignSelf: "stretch",
+      padding: "0 5px",
+      cursor: enabled ? "col-resize" : "initial",
+      display: "flex",
+      alignItems: "center",
+      "&:after": {
+        content: '""',
+        width: 1,
+        height: "1.5em",
+        background: "#c9cfda",
+        transition: "transform 300ms"
+      }
+    }
+  }, props));
+}
+const Cell = memo(function Cell2({
+  itemId,
+  rowIndex
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const {
+    classes
+  } = useTheme();
+  const column = table.useState((state) => state.activeColumns.find((column2) => column2.id === columnId));
+  const item = table.useState((state) => state.activeItemsById.get(itemId));
+  const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
+    throttle: 16
+  });
+  if (!column || !item)
+    return null;
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render cell", itemId, columnId);
+  const classNames = [...calcClassNames(classes, item, rowIndex), ...calcClassNames(column == null ? void 0 : column.classes, item, rowIndex)];
+  const content = column.renderCell(column.value(item), item);
+  return jsx("div", {
+    className: cx(...classNames),
+    css: [defaultClasses.cell, classNames, columnStyleOverride],
+    children: typeof content === "string" ? jsx("span", {
+      css: defaultClasses.text,
+      title: content,
+      children: content
+    }) : content
+  });
+});
+function ExpandControl({
+  itemId,
+  hasDeferredChildren
+}) {
   const {
     components: {
-      IconButton,
-      Popover,
-      Checkbox
+      IconButton: IconButton2,
+      Spinner: Spinner2
     },
     icons: {
-      Settings
-    },
-    text
+      ChevronRight: ChevronRight2
+    }
   } = useTheme();
-  const cssVariables = useCssVariables();
   const table = useTableContext();
-  const columns = table.useState("props.columns");
-  const hiddenColumns = table.useState("hiddenColumns");
-  const [anchorEl, setAnchorEl] = useState(null);
-  const toggle2 = (column) => {
+  const isExpanded = table.useState((state) => state.expanded.has(itemId));
+  const hasChildren = table.useState((state) => {
+    var _a;
+    return !!((_a = state.activeItemsById.get(itemId)) == null ? void 0 : _a.children.length);
+  });
+  function toggle2() {
     const {
       props: {
-        hiddenColumns: controlledHiddenColumns,
-        onHiddenColumnsChange
-      }
+        expanded: controlledExpanded,
+        expandOnlyOne,
+        onExpandedChange
+      },
+      expanded,
+      activeItemsById
     } = table.getState();
-    const newValue = new Set(hiddenColumns);
-    if (hiddenColumns.has(column.id))
-      newValue.delete(column.id);
-    else
-      newValue.add(column.id);
-    if (!controlledHiddenColumns) {
+    const newExpanded = new Set(expanded);
+    if (expandOnlyOne)
+      newExpanded.clear();
+    if (isExpanded)
+      newExpanded.delete(itemId);
+    else {
+      newExpanded.add(itemId);
+      const item = activeItemsById.get(itemId);
+      for (const ancestor of item ? getAncestors(activeItemsById, item) : []) {
+        newExpanded.add(ancestor);
+      }
+    }
+    onExpandedChange == null ? void 0 : onExpandedChange(newExpanded);
+    if (!controlledExpanded) {
       table.update((state) => {
-        state.hiddenColumns = newValue;
+        state.expanded = newExpanded;
       });
     }
-    onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
-  };
-  return jsxs(Fragment, {
-    children: [jsx(IconButton, {
-      onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
-      children: jsx(Settings, {})
-    }), jsx(Popover, {
-      anchorEl,
-      open: !!anchorEl,
-      onClose: () => setAnchorEl(null),
-      css: cssVariables,
-      children: jsxs("div", {
-        css: {
-          padding: `calc(var(--spacing) * 2)`,
-          display: "grid"
-        },
-        children: [jsx("div", {
-          css: {
-            marginBottom: "var(--spacing)"
-          },
-          children: text.selectColumns
-        }), columns.map((column) => jsx(FormControlLabel, {
-          control: jsx(Checkbox, {
-            checked: !hiddenColumns.has(column.id),
-            onChange: () => toggle2(column),
-            disabled: column.cannotHide
-          }),
-          label: column.header
-        }, column.id))]
-      })
-    })]
+  }
+  if (isExpanded && hasDeferredChildren && !hasChildren) {
+    return jsx(Spinner2, {
+      css: {
+        margin: "0 var(--spacing)"
+      }
+    });
+  }
+  return jsx(IconButton2, {
+    onClick: toggle2,
+    children: jsx("span", {
+      css: {
+        display: "inline-flex",
+        transition: "all 300ms",
+        transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
+      },
+      children: jsx(ChevronRight2, {})
+    })
   });
 }
-function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" } = {}) {
-  const cells = data.map((line) => line.map((value) => {
-    if (typeof value === "number")
-      return String(value);
-    if (![separator, quote, eol].some((c2) => value.includes(c2)))
-      return value;
-    const clean = value.replace(new RegExp(quote, "g"), `${quote}${quote}`);
-    return `${quote}${clean}${quote}`;
-  }));
-  return (sepPrefix ? `SEP=${separator}
-` : "") + cells.map((line) => line.join(separator)).join(eol);
-}
-function Export() {
+function SelectComponent({
+  itemId
+}) {
   const table = useTableContext();
   const {
     components: {
-      Button,
-      IconButton,
-      Popover
-    },
-    icons: {
-      Export: Export2,
-      Clipboard
-    },
-    text
+      Checkbox: Checkbox2
+    }
   } = useTheme();
-  const cssVariables = useCssVariables();
-  const [anchor, setAnchor] = useState(null);
-  const generate = (options) => {
+  const isSelected = table.useState((state) => {
+    const itemIds = itemId ? [itemId] : Array.from(state.activeItemsById.keys());
+    return state.activeItemsById.size > 0 && itemIds.every((itemId2) => state.selection.has(itemId2));
+  });
+  function toggle2(e2) {
+    const mouseEvent = e2.nativeEvent;
     const {
-      activeColumns,
-      activeItems
+      activeItems,
+      activeItemsById,
+      lastSelectedId,
+      selection,
+      props: {
+        selectSyncChildren,
+        selection: controlledSelection,
+        onSelectionChange
+      }
     } = table.getState();
-    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item)))];
-    return csvExport(data, options);
-  };
-  const copy = () => {
-    navigator.clipboard.writeText(generate(table.getState().props.enableExport.copy));
-  };
-  const download = () => {
-    const a2 = document.createElement("a");
-    a2.href = "data:text/csv;charset=utf-8," + encodeURIComponent(generate(table.getState().props.enableExport.download));
-    a2.download = "export.csv";
-    document.body.appendChild(a2);
-    a2.click();
-    document.body.removeChild(a2);
-  };
-  return jsxs(Fragment, {
-    children: [jsx(IconButton, {
-      onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
-      children: jsx(Export2, {
-        css: !!anchor && {
-          color: "var(--primaryMain)"
-        }
-      })
-    }), jsx(Popover, {
-      open: !!anchor,
-      onClose: () => setAnchor(null),
-      anchorEl: anchor,
-      css: cssVariables,
-      children: jsxs("div", {
-        css: {
-          padding: `calc(var(--spacing) * 2)`,
-          display: "grid",
-          justifyItems: "stretch",
-          gap: "var(--spacing)",
-          "& > *": {
-            justifyContent: "start"
-          }
-        },
-        children: [jsx("div", {
-          css: {
-            marginBottom: "var(--spacing)"
-          },
-          children: text.exportTitle
-        }), jsx(Button, {
-          startIcon: jsx(Clipboard, {}),
-          onClick: copy,
-          children: text.exportCopy
-        }), jsx(Button, {
-          startIcon: jsx(Export2, {}),
-          onClick: download,
-          children: text.exportDownload
-        })]
+    let range;
+    if (mouseEvent.shiftKey && itemId) {
+      const a = lastSelectedId ? activeItems.findIndex((i) => lastSelectedId === i.id) : 0;
+      const b = activeItems.findIndex((item) => item.id === itemId);
+      range = activeItems.slice(Math.min(a, b), Math.max(a, b) + 1);
+    } else {
+      const item = itemId ? activeItemsById.get(itemId) : void 0;
+      range = item ? [item] : activeItems;
+    }
+    const newSelection = new Set(selection);
+    for (const item of range) {
+      if (isSelected)
+        newSelection.delete(item.id);
+      else
+        newSelection.add(item.id);
+    }
+    if (selectSyncChildren && isSelected) {
+      for (const ancestor of getAncestors(activeItemsById, ...range)) {
+        newSelection.delete(ancestor);
+      }
+      for (const descendant of getDescendants(...range)) {
+        newSelection.delete(descendant);
+      }
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
+    if (!controlledSelection) {
+      table.update((state) => {
+        state.selection = newSelection;
+      });
+    }
+    table.update((state) => {
+      state.lastSelectedId = itemId;
+    });
+  }
+  return jsx(Checkbox2, {
+    css: {
+      justifySelf: "start",
+      color: "#c9cfda"
+    },
+    checked: isSelected,
+    onChange: toggle2
+  });
+}
+function calcClassNames(classes, item, index) {
+  return [(classes == null ? void 0 : classes.cell) instanceof Function ? classes.cell(item, index) : classes == null ? void 0 : classes.cell, index % 2 === 0 && (classes == null ? void 0 : classes.evenCell), index % 2 === 1 && (classes == null ? void 0 : classes.oddCell)];
+}
+const Row = memo(function Row2({
+  itemId,
+  rowIndex
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const divRef = useRef(null);
+  const {
+    className: className2,
+    indent,
+    hasChildren,
+    hasDeferredChildren,
+    columnIds,
+    enableSelection,
+    rowAction
+  } = table.useState((state) => {
+    var _a2, _b2;
+    const item = state.activeItemsById.get(itemId);
+    const index = !item ? -1 : state.activeItems.indexOf(item);
+    return {
+      className: cx(...calcClassNames(state.props.classes, item, index)),
+      indent: item ? getAncestors(state.activeItemsById, item).size : 0,
+      hasChildren: !!(item == null ? void 0 : item.children.length),
+      hasDeferredChildren: item && ((_b2 = (_a2 = state.props).hasDeferredChildren) == null ? void 0 : _b2.call(_a2, item)),
+      columnIds: state.activeColumns.map((column) => column.id),
+      enableSelection: state.props.enableSelection,
+      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item, index) : null : state.props.rowAction
+    };
+  });
+  useEffect(() => {
+    const div = divRef.current;
+    if (!div)
+      return;
+    const o = new ResizeObserver(() => {
+      if (!document.contains(div))
+        return;
+      table.update((state) => {
+        state.rowHeights.set(itemId, div.offsetHeight);
+      });
+    });
+    o.observe(div);
+    return () => o.disconnect();
+  }, [divRef.current]);
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      className: className2,
+      css: [defaultClasses.cellFill],
+      ref: divRef
+    }), jsxs("div", {
+      className: className2,
+      css: [defaultClasses.cell, defaultClasses.firstCell],
+      children: [jsx("div", {
+        css: {
+          width: indent * 20
+        }
+      }), enableSelection && jsx(SelectComponent, {
+        itemId
+      }), (hasChildren || hasDeferredChildren) && jsx(ExpandControl, {
+        itemId,
+        hasDeferredChildren
+      }), rowAction]
+    }), columnIds.map((columnId) => jsx(ColumnContext.Provider, {
+      value: columnId,
+      children: jsx(Cell, {
+        itemId,
+        rowIndex
       })
+    }, columnId)), jsx("div", {
+      className: className2,
+      css: [defaultClasses.cellFill]
     })]
   });
-}
-const FilterControlContext = createContext(() => void 0);
-function FilterControl() {
+});
+function SortComponent({
+  children
+}) {
   const table = useTableContext();
   const columnId = useColumnContext();
   const {
     components: {
-      IconButton,
-      Popover
+      Badge: Badge2
     },
     icons: {
-      FilterList,
-      ArrowDropDown
+      ArrowUpward: ArrowUpward2
     }
   } = useTheme();
-  const cssVariables = useCssVariables();
-  const [anchor, setAnchor] = useState(null);
-  const isActive = table.useState((state) => {
-    const filter2 = state.filters.get(columnId);
-    const filterValue = state.filterValues.get(columnId);
-    return filter2 !== void 0 && filterValue !== void 0 && filter2.isActive(filterValue);
-  });
-  const filter = table.useState((state) => {
-    var _a;
-    return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
+  const {
+    direction,
+    index
+  } = table.useState((state) => {
+    var _a, _b;
+    const index2 = (_a = state.sort.findIndex((s) => s.columnId === columnId)) != null ? _a : -1;
+    return {
+      direction: (_b = state.sort[index2]) == null ? void 0 : _b.direction,
+      index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
+    };
   });
-  function reset() {
-    table.update((state) => {
-      state.filterValues.delete(columnId);
-    });
+  function toggle2(e2, off) {
+    const {
+      props: {
+        sort: controlledSort,
+        onSortChange
+      }
+    } = table.getState();
+    const newDirection = direction === "asc" ? "desc" : "asc";
+    const newSort = e2.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
+    if (!off) {
+      newSort.push({
+        columnId,
+        direction: newDirection
+      });
+    }
+    onSortChange == null ? void 0 : onSortChange(newSort);
+    if (!controlledSort) {
+      table.update((state) => {
+        state.sort = newSort;
+      });
+    }
+    e2.preventDefault();
+    return false;
   }
-  const close = useCallback(function() {
-    setAnchor(null);
-  }, []);
-  if (!filter)
-    return null;
-  return jsxs(FilterControlContext.Provider, {
-    value: close,
+  return jsxs("div", {
+    css: {
+      userSelect: "none",
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr) max-content",
+      alignItems: "center",
+      cursor: "pointer",
+      "& > div": {
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    onClick: (e2) => toggle2(e2),
+    onContextMenu: (e2) => toggle2(e2, true),
     children: [jsx("div", {
-      onClick: (e) => setAnchor(e.currentTarget),
-      onContextMenu: (e) => {
-        reset();
-        e.preventDefault();
-        return false;
-      },
-      children: jsx(IconButton, {
+      children
+    }), jsx(Badge2, {
+      badgeContent: index,
+      children: jsx("span", {
         css: [{
-          color: "#b0bac9"
-        }, isActive && {
-          color: "var(--primaryMain) !important"
+          transition: "all 300ms",
+          fontSize: "0.8em"
+        }, !direction && {
+          opacity: 0
+        }, direction === "desc" && {
+          transform: "rotate3d(0, 0, 1, 180deg)"
         }],
-        children: isActive ? jsx(FilterList, {}) : jsx(ArrowDropDown, {})
-      })
-    }), jsx("div", {
-      onPointerDown: (e) => {
-        e.stopPropagation();
-      },
-      onPointerMove: (e) => {
-        e.stopPropagation();
-      },
-      children: jsx(Popover, {
-        open: true,
-        hidden: !anchor,
-        onClose: () => setAnchor(null),
-        anchorEl: anchor != null ? anchor : document.body,
-        css: cssVariables,
-        children: filter
+        children: jsx(ArrowUpward2, {})
       })
     })]
-  });
+  });
+}
+function throttle(fn, ms) {
+  let last = 0;
+  let lastArgs;
+  let timeout;
+  function run() {
+    const args = lastArgs;
+    last = Date.now();
+    lastArgs = void 0;
+    timeout = void 0;
+    fn(...args);
+  }
+  return Object.assign(function(...args) {
+    const now = Date.now();
+    lastArgs = args;
+    if (timeout)
+      ;
+    else if (now < last + ms) {
+      timeout = setTimeout(run, last + ms - now);
+    } else {
+      run();
+    }
+  }, {
+    flush() {
+      if (lastArgs) {
+        run();
+      }
+    }
+  });
+}
+const findScrollRoot = (x) => {
+  const parent = x.parentElement;
+  if (!parent)
+    return document.documentElement;
+  if (parent.scrollHeight > parent.clientHeight && getComputedStyle(parent).overflowY !== "visible")
+    return parent;
+  return findScrollRoot(parent);
+};
+const relativeOffset = (x, y) => {
+  if (x.offsetParent === y.offsetParent || !x.offsetParent)
+    return x.offsetTop - y.offsetTop;
+  if (x.offsetParent instanceof HTMLElement)
+    return relativeOffset(x.offsetParent, y) + x.offsetTop;
+  return 0;
+};
+function Virtualized(_c) {
+  var _d = _c, {
+    header,
+    children
+  } = _d, props = __objRest(_d, [
+    "header",
+    "children"
+  ]);
+  var _a, _b, _c2, _d2;
+  const table = useTableContext();
+  const virtual = table.useState("props.virtual");
+  const probeRef = useRef(null);
+  const [, setCounter] = useState(0);
+  const {
+    itemIds = [],
+    from = 0,
+    to,
+    before = 0,
+    after = 0
+  } = table.useState((state) => {
+    var _a2;
+    const itemIds2 = state.activeItems.map((item) => item.id);
+    const root = probeRef.current && findScrollRoot(probeRef.current);
+    if (!state.props.virtual)
+      return {
+        itemIds: itemIds2
+      };
+    if (!probeRef.current || !root || !document.contains(root))
+      return {};
+    const {
+      rowHeight,
+      initalRowHeight,
+      overscan = 100,
+      overscanTop,
+      overscanBottom
+    } = (_a2 = state.props.virtual instanceof Object ? state.props.virtual : void 0) != null ? _a2 : {};
+    let totalHeight = 0;
+    const rowHeights = itemIds2.map((itemId, index) => {
+      var _a3, _b2;
+      const h = (_b2 = (_a3 = rowHeight != null ? rowHeight : state.rowHeights.get(itemId)) != null ? _a3 : initalRowHeight) != null ? _b2 : index === 0 ? 100 : totalHeight / index;
+      totalHeight += h;
+      return h;
+    });
+    const probeOffset = relativeOffset(probeRef.current, root);
+    const headerHeight = probeRef.current.offsetTop;
+    const topOfTable = root.scrollTop - probeOffset + headerHeight;
+    const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
+    let from2 = 0, to2 = itemIds2.length, before2 = 0, after2 = 0;
+    for (const h of rowHeights) {
+      if (before2 + h > topOfTable - (overscanTop != null ? overscanTop : overscan))
+        break;
+      from2++;
+      before2 += h;
+    }
+    for (const h of rowHeights.reverse()) {
+      if (after2 + h > totalHeight - bottomOfTable - (overscanBottom != null ? overscanBottom : overscan))
+        break;
+      to2--;
+      after2 += h;
+    }
+    return {
+      itemIds: itemIds2.slice(from2, to2),
+      from: from2,
+      to: to2,
+      before: before2,
+      after: after2
+    };
+  }, {
+    throttle: 16
+  });
+  const throttleScroll = (_b = (_a = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a.throttleScroll) != null ? _b : 16;
+  const incCounter = useMemo(() => throttle(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
+  useEffect(() => {
+    if (!virtual || !probeRef.current)
+      return;
+    window.addEventListener("scroll", incCounter, true);
+    window.addEventListener("resize", incCounter, true);
+    return () => {
+      window.removeEventListener("scroll", incCounter, true);
+      window.removeEventListener("resize", incCounter, true);
+    };
+  }, [probeRef.current, incCounter]);
+  (_d2 = (_c2 = table.getState().props).debugRender) == null ? void 0 : _d2.call(_c2, `Virtualalized render ${from} to ${to}`);
+  return jsxs("div", __spreadProps(__spreadValues({}, props), {
+    children: [header, virtual && jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: before
+      },
+      ref: probeRef
+    }), children(itemIds, from), virtual && jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: after
+      }
+    })]
+  }));
 }
-function ResizeHandle() {
-  const table = useTableContext();
-  const columnId = useColumnContext();
-  const enabled = table.useState("props.enableColumnResize");
-  function onPointerDown(e) {
-    e.stopPropagation();
-    const div = e.target;
-    div.setPointerCapture(e.pointerId);
-  }
-  function onPointerMove(e) {
-    e.stopPropagation();
-    const div = e.target;
-    if (!div.hasPointerCapture(e.pointerId))
-      return;
-    const parent = div.parentElement;
-    const width = Math.max(e.clientX - parent.getBoundingClientRect().left + 5, 50);
-    table.update((state) => {
-      state.columnWidths.set(columnId, `${width}px`);
-    });
-  }
-  function onPointerUp(e) {
-    e.stopPropagation();
-    const div = e.target;
-    div.releasePointerCapture(e.pointerId);
-  }
-  function onDoubleClick(e) {
-    table.update((state) => {
-      if (e.getModifierState("Control")) {
-        state.columnWidths.delete(columnId);
-      } else {
-        state.columnWidths.set(columnId, "max-content");
-      }
-    });
-  }
-  return jsx(ResizeHandleView, {
-    enabled,
-    onPointerDown: enabled ? onPointerDown : void 0,
-    onPointerMove: enabled ? onPointerMove : void 0,
-    onPointerUp: enabled ? onPointerUp : void 0,
-    onDoubleClick: enabled ? onDoubleClick : void 0
+const TableContext = createContext(null);
+const ColumnContext = createContext(null);
+function useTableContext() {
+  const value = useContext(TableContext);
+  if (!value)
+    throw Error("No table context available");
+  return value;
+}
+function useColumnContext() {
+  const value = useContext(ColumnContext);
+  if (value === null)
+    throw Error("No column context available");
+  return value;
+}
+function Table(props) {
+  var _a, _b;
+  const table = useTableState(props);
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
+  return jsx(TableContext.Provider, {
+    value: table,
+    children: jsx(TableLoadingState, {})
   });
 }
-function ResizeHandleView(_c) {
-  var _d = _c, {
-    enabled
-  } = _d, props = __objRest(_d, [
-    "enabled"
-  ]);
-  return jsx("div", __spreadValues({
-    css: {
-      alignSelf: "stretch",
-      padding: "0 5px",
-      cursor: enabled ? "col-resize" : "initial",
-      display: "flex",
-      alignItems: "center",
-      "&:after": {
-        content: '""',
-        width: 1,
-        height: "1.5em",
-        background: "#c9cfda",
-        transition: "transform 300ms"
-      }
-    }
-  }, props));
+function TableLoadingState() {
+  const {
+    text
+  } = useTheme();
+  const isHydrated = useTableStateStorage();
+  const [showLoading, setShowLoading] = useState(false);
+  useEffect(() => {
+    const handle = setTimeout(() => setShowLoading(true), 500);
+    return () => clearTimeout(handle);
+  });
+  return jsxs(Fragment, {
+    children: [!isHydrated && showLoading && jsx("div", {
+      children: text.loading
+    }), jsx(TableInner, {
+      hidden: !isHydrated
+    })]
+  });
 }
-const Cell = memo(function Cell2({
-  itemId,
-  rowIndex
+const TableInner = memo(function TableInner2({
+  hidden
 }) {
   var _a, _b;
   const table = useTableContext();
-  const columnId = useColumnContext();
-  const {
-    classes
-  } = useTheme();
-  const column = table.useState((state) => state.activeColumns.find((column2) => column2.id === columnId));
-  const item = table.useState((state) => state.activeItemsById.get(itemId));
-  const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
+  const fullWidth = table.useState("props.fullWidth");
+  const activeColumns = table.useState((state) => state.activeColumns.map((column) => ({
+    id: column.id,
+    width: column.width,
+    classes: column.classes,
+    header: column.header
+  })));
+  const columnWidths = table.useState("columnWidths", {
     throttle: 16
   });
-  if (!column || !item)
-    return null;
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render cell", itemId, columnId);
-  const classNames = [...calcClassNames(classes, item, rowIndex), ...calcClassNames(column == null ? void 0 : column.classes, item, rowIndex)];
-  const content = column.renderCell(column.value(item), item);
-  return jsx("div", {
-    className: cx(...classNames),
-    css: [defaultClasses.cell, classNames, columnStyleOverride],
-    children: typeof content === "string" ? jsx("span", {
-      css: defaultClasses.text,
-      title: content,
-      children: content
-    }) : content
+  const columnStyleOverride = table.useState("columnStyleOverride", {
+    throttle: 16
+  });
+  const defaultWidth = table.useState("props.defaultWidth");
+  const classes = table.useState("props.classes");
+  const stickyHeader = table.useState("props.stickyHeader");
+  const enableSelection = table.useState("props.enableSelection");
+  const enableColumnSelection = table.useState("props.enableColumnSelection");
+  const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
+  const cssVariables = useCssVariables();
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
+  return jsx(Virtualized, {
+    className: classes == null ? void 0 : classes.table,
+    css: [cssVariables, defaultClasses.table, {
+      gridTemplateColumns: [
+        fullWidth === "right" || fullWidth === true ? "auto" : "0",
+        "max-content",
+        ...activeColumns.map((column) => {
+          var _a2, _b2, _c;
+          return (_c = (_b2 = (_a2 = columnWidths.get(column.id)) != null ? _a2 : column.width) != null ? _b2 : defaultWidth) != null ? _c : "max-content";
+        }),
+        fullWidth === "left" || fullWidth === true ? "auto" : "0"
+      ].join(" ")
+    }, hidden && {
+      visibility: "hidden"
+    }],
+    header: jsxs(Fragment, {
+      children: [jsx("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
+      }), jsxs("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [defaultClasses.headerCell, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
+        children: [enableSelection && jsx(SelectComponent, {}), enableColumnSelection && jsx(ColumnSelection, {}), enableExport && jsx(Export$1, {}), jsx(ResizeHandleView, {})]
+      }), jsx(ColumnHeaderContext.Provider, {
+        children: activeColumns.map((column) => {
+          var _a2;
+          return jsx(ColumnContext.Provider, {
+            value: column.id,
+            children: jsxs(ColumnHeader, {
+              className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
+              css: [defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
+              children: [jsx(SortComponent, {
+                children: column.header
+              }), jsx("div", {
+                css: {
+                  flex: 1
+                }
+              }), jsx(FilterControl, {}), jsx(ResizeHandle, {})]
+            }, column.id)
+          }, column.id);
+        })
+      }), jsx("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
+      })]
+    }),
+    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsx(Row, {
+      itemId,
+      rowIndex: startIndex + index
+    }, itemId))
   });
 });
-function ExpandControl({
-  itemId,
-  hasDeferredChildren
+const defaultColors = {
+  primary: { main: "#1976d2", light: "#42a5f5", contrastText: "#fff" },
+  secondary: { main: "#9c27b0", light: "#ba68c8", contrastText: "#fff" }
+};
+function Spinner({
+  className: className2
 }) {
-  const {
-    components: {
-      IconButton,
-      Spinner
+  return jsxs("div", {
+    className: className2,
+    css: css`
+        display: inline-block;
+        position: relative;
+        width: 1em;
+        height: 1em;
+
+        div {
+          box-sizing: border-box;
+          display: block;
+          position: absolute;
+          width: 0.8em;
+          height: 0.8em;
+          margin: 0.1em;
+          border: 0.1em solid #fff;
+          border-radius: 50%;
+          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+          border-color: currentColor transparent transparent transparent;
+        }
+        div:nth-of-type(1) {
+          animation-delay: -0.45s;
+        }
+        div:nth-of-type(2) {
+          animation-delay: -0.3s;
+        }
+        div:nth-of-type(3) {
+          animation-delay: -0.15s;
+        }
+        @keyframes lds-ring {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      `,
+    children: [jsx("div", {}), jsx("div", {}), jsx("div", {})]
+  });
+}
+const Badge = ({
+  badgeContent,
+  children
+}) => {
+  if (!open)
+    return null;
+  return jsxs("span", {
+    css: {
+      display: "inline-flex",
+      position: "relative",
+      flexShrink: 0,
+      verticalAlign: "middle"
     },
-    icons: {
-      ChevronRight
-    }
-  } = useTheme();
-  const table = useTableContext();
-  const isExpanded = table.useState((state) => state.expanded.has(itemId));
-  const hasChildren = table.useState((state) => {
-    var _a;
-    return !!((_a = state.activeItemsById.get(itemId)) == null ? void 0 : _a.children.length);
+    children: [children, jsx("span", {
+      css: [{
+        top: 0,
+        right: 0,
+        transform: "scale(1) translate(50%, -50%)",
+        transformOrigin: "100% 0%",
+        height: 20,
+        display: "flex",
+        padding: "0 6px",
+        zIndex: 1,
+        position: "absolute",
+        flexWrap: "wrap",
+        minWidth: 20,
+        transition: "transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        alignItems: "center",
+        lineHeight: 1,
+        alignContent: "center",
+        borderRadius: 10,
+        justifyContent: "center",
+        fontSize: "0.8em"
+      }, !badgeContent && {
+        transform: "scale(0) translate(50%, -50%)",
+        transition: "transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
+      }],
+      children: badgeContent
+    })]
   });
-  function toggle2() {
-    const {
-      props: {
-        expanded: controlledExpanded,
-        expandOnlyOne,
-        onExpandedChange
-      },
-      expanded,
-      activeItemsById
-    } = table.getState();
-    const newExpanded = new Set(expanded);
-    if (expandOnlyOne)
-      newExpanded.clear();
-    if (isExpanded)
-      newExpanded.delete(itemId);
-    else {
-      newExpanded.add(itemId);
-      const item = activeItemsById.get(itemId);
-      for (const ancestor of item ? getAncestors(activeItemsById, item) : []) {
-        newExpanded.add(ancestor);
+};
+const Button = (_e) => {
+  var _f = _e, {
+    startIcon,
+    children,
+    variant = "text"
+  } = _f, props = __objRest(_f, [
+    "startIcon",
+    "children",
+    "variant"
+  ]);
+  return jsxs("button", __spreadProps(__spreadValues({
+    css: [{
+      padding: `var(--spacing) calc(var(--spacing) * 2)`,
+      display: "inline-flex",
+      alignItems: "center",
+      transition: "background-color 150ms",
+      border: "none",
+      cursor: "pointer",
+      background: "transparent",
+      borderRadius: 4,
+      "&:active:not(:disabled)": {
+        transform: "scale3d(0.95, 0.95, 1)"
       }
-    }
-    onExpandedChange == null ? void 0 : onExpandedChange(newExpanded);
-    if (!controlledExpanded) {
-      table.update((state) => {
-        state.expanded = newExpanded;
-      });
-    }
-  }
-  if (isExpanded && hasDeferredChildren && !hasChildren) {
-    return jsx(Spinner, {
+    }, variant === "text" && {
+      "&:hover": {
+        background: "rgba(0, 0, 0, 0.1)"
+      }
+    }, variant === "outlined" && {
+      border: `1px solid ${darkGray}`,
+      "&:disabled": {
+        borderColor: lightGray
+      }
+    }, variant === "contained" && {
+      color: "var(--primaryContrastText)",
+      backgroundColor: "var(--primaryMain)",
+      boxShadow: "0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)",
+      "&:hover": {
+        filter: "brightness(0.9)"
+      },
+      "&:disabled": {
+        filter: "grayscale()",
+        opacity: 0.5
+      }
+    }]
+  }, props), {
+    children: [startIcon && jsx("span", {
       css: {
-        margin: "0 var(--spacing)"
+        marginRight: `calc(var(--spacing) * 2)`
+      },
+      children: startIcon
+    }), jsx("span", {
+      children
+    })]
+  }));
+};
+const Checkbox = (_g) => {
+  var _h = _g, {
+    className: className2
+  } = _h, props = __objRest(_h, [
+    "className"
+  ]);
+  return jsxs("label", {
+    css: [{
+      padding: "calc(var(--spacing) * 1.8)",
+      display: "flex",
+      color: "currentcolor",
+      userSelect: "none",
+      "& input": {
+        appearance: "none",
+        margin: 0
       }
-    });
-  }
-  return jsx(IconButton, {
-    onClick: toggle2,
-    children: jsx("span", {
+    }, props.disabled && {
+      color: "rgba(0, 0, 0, 0.26)"
+    }],
+    className: className2,
+    children: [jsx("input", __spreadValues({
+      type: "checkbox"
+    }, props)), props.checked ? jsx("svg", {
       css: {
-        display: "inline-flex",
-        transition: "all 300ms",
-        transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
+        fontSize: "1.25rem",
+        width: "1em",
+        height: "1em",
+        fill: "var(--primaryMain)"
+      },
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: jsx("path", {
+        d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+      })
+    }) : jsx("svg", {
+      css: {
+        fontSize: "1.25rem",
+        width: "1em",
+        height: "1em",
+        fill: "currentColor"
+      },
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: jsx("path", {
+        d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+      })
+    })]
+  });
+};
+const IconButton = (props) => {
+  return jsx("button", __spreadValues({
+    css: {
+      padding: "var(--spacing)",
+      borderRadius: "50%",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      transition: "background-color 150ms",
+      border: "none",
+      cursor: "pointer",
+      color: "inherit",
+      background: "transparent",
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.04)"
       },
-      children: jsx(ChevronRight, {})
+      "&:active": {
+        transformColor: "scale3d(0.95, 0.95, 1)"
+      }
+    }
+  }, props));
+};
+const TextField = (_i) => {
+  var _j = _i, {
+    endIcon,
+    className: className2,
+    inputRef
+  } = _j, props = __objRest(_j, [
+    "endIcon",
+    "className",
+    "inputRef"
+  ]);
+  var _a;
+  const [focus, setFocus] = useState(false);
+  return jsx("div", {
+    className: className2,
+    css: {
+      display: "flex"
+    },
+    children: jsxs("span", {
+      css: [{
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        border: `1px solid ${darkGray}`,
+        borderRadius: 4
+      }, focus && {
+        border: "2px solid var(--primaryMain)",
+        margin: -1
+      }],
+      children: [jsx("input", __spreadProps(__spreadValues({
+        ref: inputRef
+      }, props), {
+        value: (_a = props.value) != null ? _a : "",
+        onFocus: () => setFocus(true),
+        onBlur: () => setFocus(false),
+        css: {
+          flex: 1,
+          border: "none",
+          outline: "none",
+          borderRadius: 4,
+          padding: "calc(var(--spacing) * 2)",
+          paddingRight: 0,
+          transition: "outline 500ms"
+        }
+      })), endIcon]
     })
   });
+};
+const defaultComponents = {
+  IconButton,
+  Checkbox,
+  Popover,
+  Button,
+  Badge,
+  TextField,
+  Spinner
+};
+const IconDefaultStyle = css({
+  width: "1.5em",
+  height: "1.5em",
+  color: "inherit"
+});
+function Icon(svg) {
+  return (props) => jsx(ClassNames, {
+    children: ({
+      css: css2
+    }) => cloneElement(svg, __spreadProps(__spreadValues({}, props), {
+      className: css2(IconDefaultStyle, props.className)
+    }))
+  });
 }
-function SelectComponent({
-  itemId
-}) {
-  const table = useTableContext();
+const Settings = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+  })]
+}));
+const Export = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  enableBackground: "new 0 0 24 24",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("g", {
+    children: jsx("rect", {
+      fill: "none",
+      height: "24",
+      width: "24"
+    })
+  }), jsx("g", {
+    children: jsx("path", {
+      d: "M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"
+    })
+  })]
+}));
+const Clipboard = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"
+  })]
+}));
+const ChevronRight = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
+  })]
+}));
+const Search = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+  })]
+}));
+const Clear = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+  })]
+}));
+const ArrowDropDown = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M7 10l5 5 5-5H7z"
+  })]
+}));
+const FilterList = Icon(jsx("svg", {
+  viewBox: "0 0 24 24",
+  children: jsx("path", {
+    fill: "currentColor",
+    d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
+  })
+}));
+const ArrowUpward = Icon(jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsx("path", {
+    d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+  })]
+}));
+const defaultIcons = {
+  Settings,
+  Export,
+  Clipboard,
+  ChevronRight,
+  Search,
+  Clear,
+  ArrowDropDown,
+  FilterList,
+  ArrowUpward
+};
+const defaultTexts = {
+  selectColumns: "Select visible columns",
+  noResults: "No results",
+  exportTitle: "Export",
+  exportCopy: "To clipboard",
+  exportDownload: "Download",
+  today: "Today",
+  thisWeek: "This week",
+  reset: "Reset",
+  loading: "Loading",
+  selected: (count) => `${count} selected`
+};
+const defaultTableTheme = {
+  text: defaultTexts,
+  components: defaultComponents,
+  icons: defaultIcons,
+  colors: defaultColors,
+  spacing: "5px"
+};
+const emptyStore = new Store(void 0);
+function useTheme() {
+  var _a, _b;
+  const table = useContext(TableContext);
+  const localTheme = (_b = (_a = table == null ? void 0 : table.useState((state) => ({
+    text: state.props.text,
+    classes: state.props.classes,
+    components: state.props.components,
+    icons: state.props.icons,
+    colors: state.props.colors,
+    spacing: state.props.spacing
+  }))) != null ? _a : emptyStore.useState()) != null ? _b : {};
+  const contextTableTheme = useContext(TableThemeContext);
+  return mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme, localTheme);
+}
+function AutoFocusTextField(props) {
   const {
     components: {
-      Checkbox
+      TextField: TextField2
     }
   } = useTheme();
-  const isSelected = table.useState((state) => {
-    const itemIds = itemId ? [itemId] : Array.from(state.activeItemsById.keys());
-    return state.activeItemsById.size > 0 && itemIds.every((itemId2) => state.selection.has(itemId2));
-  });
-  function toggle2(e) {
-    const mouseEvent = e.nativeEvent;
-    const {
-      activeItems,
-      activeItemsById,
-      lastSelectedId,
-      selection,
-      props: {
-        selectSyncChildren,
-        selection: controlledSelection,
-        onSelectionChange
-      }
-    } = table.getState();
-    let range;
-    if (mouseEvent.shiftKey && itemId) {
-      const a2 = lastSelectedId ? activeItems.findIndex((i) => lastSelectedId === i.id) : 0;
-      const b = activeItems.findIndex((item) => item.id === itemId);
-      range = activeItems.slice(Math.min(a2, b), Math.max(a2, b) + 1);
-    } else {
-      const item = itemId ? activeItemsById.get(itemId) : void 0;
-      range = item ? [item] : activeItems;
+  const ref = useRef(null);
+  const {
+    visible
+  } = useContext(PopoverContext);
+  useLayoutEffect(() => {
+    if (visible && ref.current) {
+      ref.current.focus();
     }
-    const newSelection = new Set(selection);
-    for (const item of range) {
-      if (isSelected)
-        newSelection.delete(item.id);
-      else
-        newSelection.add(item.id);
+  }, [visible]);
+  return jsx(TextField2, __spreadProps(__spreadValues({}, props), {
+    inputRef: ref
+  }));
+}
+const className = "schummar-table-date-input";
+const defaultDate = new Date(1970, 0, 1);
+const isIncludedType = (type) => type === "day" || type === "month" || type === "year";
+const defaultLengths = {
+  day: 2,
+  month: 2,
+  year: 4
+};
+const maxLengths = {
+  day: 2,
+  month: 2,
+  year: Infinity
+};
+const length = (type, value) => Math.max(value.length, defaultLengths[type]);
+const tabNext = (e2) => {
+  const all = Array.from(document.querySelectorAll(`.${className}`));
+  const index = all.indexOf(e2);
+  const next = all[(index + 1) % all.length];
+  if (next instanceof HTMLElement) {
+    next.focus();
+  }
+};
+function DateInput({
+  value,
+  onChange,
+  locale
+}) {
+  const [override, setOverride] = useState();
+  const commit = () => {
+    if (!override) {
+      return;
     }
-    if (selectSyncChildren && isSelected) {
-      for (const ancestor of getAncestors(activeItemsById, ...range)) {
-        newSelection.delete(ancestor);
-      }
-      for (const descendant of getDescendants(...range)) {
-        newSelection.delete(descendant);
-      }
+    setOverride(void 0);
+    if (!override.value) {
+      onChange(null);
+      return;
     }
-    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
-    if (!controlledSelection) {
-      table.update((state) => {
-        state.selection = newSelection;
-      });
+    const newValue = value ? new Date(value) : new Date();
+    if (override.type === "day") {
+      newValue.setDate(Number(override.value));
+    } else if (override.type === "month") {
+      newValue.setMonth(Number(override.value) - 1);
+    } else if (override.type === "year") {
+      newValue.setFullYear(Number(override.value));
     }
-    table.update((state) => {
-      state.lastSelectedId = itemId;
-    });
-  }
-  return jsx(Checkbox, {
+    onChange(newValue);
+  };
+  const format = useMemo(() => new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }), [locale]);
+  const parts = format.formatToParts(value != null ? value : defaultDate);
+  const isEmpty = !value;
+  return jsx("div", {
     css: {
-      justifySelf: "start",
-      color: "#c9cfda"
+      display: "flex",
+      alignItems: "baseline"
     },
-    checked: isSelected,
-    onChange: toggle2
+    children: parts.map(({
+      type,
+      value: value2
+    }, index) => jsx(Fragment$1, {
+      children: isIncludedType(type) ? jsx("input", {
+        className,
+        css: {
+          width: `${length(type, value2)}ch`,
+          boxSizing: "content-box",
+          overflow: "visible",
+          border: "none",
+          borderBottom: "2px solid transparent",
+          outline: "none",
+          fontSize: "inherit",
+          "&:focus": {
+            borderBottom: "2px solid var(--primaryMain)"
+          }
+        },
+        placeholder: "".padEnd(length(type, value2), "0"),
+        value: (override == null ? void 0 : override.type) === type ? override.value : !isEmpty ? value2 : "",
+        onChange: (e2) => {
+          setOverride({
+            type,
+            value: e2.target.value
+          });
+          if (e2.target.value.length >= maxLengths[type]) {
+            setTimeout(() => tabNext(e2.target));
+          }
+        },
+        onFocus: (e2) => e2.target.select(),
+        onBlur: commit
+      }) : type === "literal" ? jsx("span", {
+        children: value2
+      }) : null
+    }, index))
   });
 }
-function calcClassNames(classes, item, index) {
-  return [(classes == null ? void 0 : classes.cell) instanceof Function ? classes.cell(item, index) : classes == null ? void 0 : classes.cell, index % 2 === 0 && (classes == null ? void 0 : classes.evenCell), index % 2 === 1 && (classes == null ? void 0 : classes.oddCell)];
-}
-const Row = memo(function Row2({
-  itemId,
-  rowIndex
-}) {
-  var _a, _b;
-  const table = useTableContext();
-  const divRef = useRef(null);
-  const {
-    className,
-    indent,
-    hasChildren,
-    hasDeferredChildren,
-    columnIds,
-    enableSelection,
-    rowAction
-  } = table.useState((state) => {
-    var _a2, _b2;
-    const item = state.activeItemsById.get(itemId);
-    const index = !item ? -1 : state.activeItems.indexOf(item);
-    return {
-      className: cx(...calcClassNames(state.props.classes, item, index)),
-      indent: item ? getAncestors(state.activeItemsById, item).size : 0,
-      hasChildren: !!(item == null ? void 0 : item.children.length),
-      hasDeferredChildren: item && ((_b2 = (_a2 = state.props).hasDeferredChildren) == null ? void 0 : _b2.call(_a2, item)),
-      columnIds: state.activeColumns.map((column) => column.id),
-      enableSelection: state.props.enableSelection,
-      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item, index) : null : state.props.rowAction
+const weekDays = [0, 1, 2, 3, 4, 5, 6];
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const endOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, -1);
+const today = () => {
+  const today2 = startOfDay(new Date());
+  return {
+    min: today2,
+    max: today2
+  };
+};
+const thisWeek = (firstDayOfWeek = 0) => {
+  const now = new Date();
+  const min = new Date(now);
+  let diff = min.getDay() - firstDayOfWeek;
+  if (diff < 0) {
+    diff += 7;
+  }
+  min.setDate(min.getDate() - diff);
+  const max = new Date(min);
+  max.setDate(max.getDate() + 6);
+  return {
+    min: startOfDay(min),
+    max: endOfDay(max)
+  };
+};
+function dateIntersect(a, b) {
+  if (a instanceof Date) {
+    a = {
+      min: a,
+      max: a
     };
-  });
-  useEffect(() => {
-    const div = divRef.current;
-    if (!div)
-      return;
-    const o = new ResizeObserver(() => {
-      if (!document.contains(div))
-        return;
-      table.update((state) => {
-        state.rowHeights.set(itemId, div.offsetHeight);
-      });
-    });
-    o.observe(div);
-    return () => o.disconnect();
-  }, [divRef.current]);
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      className,
-      css: [defaultClasses.cellFill],
-      ref: divRef
-    }), jsxs("div", {
-      className,
-      css: [defaultClasses.cell, defaultClasses.firstCell],
-      children: [jsx("div", {
-        css: {
-          width: indent * 20
-        }
-      }), enableSelection && jsx(SelectComponent, {
-        itemId
-      }), (hasChildren || hasDeferredChildren) && jsx(ExpandControl, {
-        itemId,
-        hasDeferredChildren
-      }), rowAction]
-    }), columnIds.map((columnId) => jsx(ColumnContext.Provider, {
-      value: columnId,
-      children: jsx(Cell, {
-        itemId,
-        rowIndex
-      })
-    }, columnId)), jsx("div", {
-      className,
-      css: [defaultClasses.cellFill]
-    })]
-  });
-});
-function SortComponent({
-  children
+  }
+  if (b instanceof Date) {
+    b = {
+      min: b,
+      max: b
+    };
+  }
+  if (!(a == null ? void 0 : a.min) || !a.max || !(b == null ? void 0 : b.min) || !b.max) {
+    return false;
+  }
+  return !(endOfDay(a.max) < startOfDay(b.min) || startOfDay(a.min) > endOfDay(b.max));
+}
+function DatePicker({
+  value,
+  onChange,
+  rangeSelect,
+  locale,
+  firstDayOfWeek = 0
 }) {
-  const table = useTableContext();
-  const columnId = useColumnContext();
   const {
     components: {
-      Badge
+      Button: Button2,
+      IconButton: IconButton2
     },
     icons: {
-      ArrowUpward
-    }
+      ChevronRight: ChevronRight2
+    },
+    text
   } = useTheme();
+  const [baseDate] = useState(new Date());
+  const [dateInView, setDateInView] = useState(baseDate);
+  const [dirty, setDirty] = useState();
+  const [hovered, setHovered] = useState();
+  const min = dirty ? dirty.min : value instanceof Date ? value : value == null ? void 0 : value.min;
+  const max = dirty ? dirty.max : value instanceof Date ? value : value == null ? void 0 : value.max;
   const {
-    direction,
-    index
-  } = table.useState((state) => {
-    var _a, _b;
-    const index2 = (_a = state.sort.findIndex((s) => s.columnId === columnId)) != null ? _a : -1;
-    return {
-      direction: (_b = state.sort[index2]) == null ? void 0 : _b.direction,
-      index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
-    };
+    calendars,
+    getBackProps,
+    getForwardProps,
+    getDateProps
+  } = useDayzed({
+    onDateSelected: () => void 0,
+    firstDayOfWeek,
+    showOutsideDays: true,
+    date: dateInView,
+    onOffsetChanged: (offset) => setDateInView(new Date(dateInView.getFullYear(), dateInView.getMonth() + offset)),
+    offset: 0
   });
-  function toggle2(e, off) {
+  const formatWeekday = useMemo(() => {
     const {
-      props: {
-        sort: controlledSort,
-        onSortChange
-      }
-    } = table.getState();
-    const newDirection = direction === "asc" ? "desc" : "asc";
-    const newSort = e.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
-    if (!off) {
-      newSort.push({
-        columnId,
-        direction: newDirection
-      });
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      weekday: "short"
+    });
+    return (weekDay) => format(new Date(Date.UTC(2021, 5, weekDay)));
+  }, [locale]);
+  useEffect(() => setDateInView(value === null ? new Date() : value instanceof Date ? value : value.max), [value]);
+  useEffect(() => {
+    if (!rangeSelect) {
+      setDirty(void 0);
     }
-    onSortChange == null ? void 0 : onSortChange(newSort);
-    if (!controlledSort) {
-      table.update((state) => {
-        state.sort = newSort;
-      });
+  }, [rangeSelect]);
+  function set(min2, max2, edit) {
+    if (!rangeSelect) {
+      onChange(min2 != null ? min2 : null);
+      return;
     }
-    e.preventDefault();
-    return false;
-  }
-  return jsxs("div", {
-    css: {
-      userSelect: "none",
-      display: "grid",
-      gridTemplateColumns: "minmax(0, 1fr) max-content",
-      alignItems: "center",
-      cursor: "pointer",
-      "& > div": {
-        overflow: "hidden",
-        textOverflow: "ellipsis"
+    if (min2 && max2 && min2 > max2) {
+      if (edit === "min") {
+        max2 = min2;
+      } else if (edit === "max") {
+        min2 = max2;
+      } else {
+        [min2, max2] = [max2, min2];
       }
-    },
-    onClick: (e) => toggle2(e),
-    onContextMenu: (e) => toggle2(e, true),
-    children: [jsx("div", {
-      children
-    }), jsx(Badge, {
-      badgeContent: index,
-      children: jsx("span", {
-        css: [{
-          transition: "all 300ms",
-          fontSize: "0.8em"
-        }, !direction && {
-          opacity: 0
-        }, direction === "desc" && {
-          transform: "rotate3d(0, 0, 1, 180deg)"
-        }],
-        children: jsx(ArrowUpward, {})
-      })
-    })]
-  });
-}
-function throttle(fn, ms) {
-  let last = 0;
-  let lastArgs;
-  let timeout;
-  function run() {
-    const args = lastArgs;
-    last = Date.now();
-    lastArgs = void 0;
-    timeout = void 0;
-    fn(...args);
-  }
-  return Object.assign(function(...args) {
-    const now = Date.now();
-    lastArgs = args;
-    if (timeout)
-      ;
-    else if (now < last + ms) {
-      timeout = setTimeout(run, last + ms - now);
-    } else {
-      run();
     }
-  }, {
-    flush() {
-      if (lastArgs) {
-        run();
-      }
+    if (!min2 === !max2) {
+      setDirty(void 0);
+      onChange(min2 && max2 ? {
+        min: min2,
+        max: max2
+      } : null);
+    } else {
+      setDirty({
+        min: min2,
+        max: max2
+      });
     }
-  });
-}
-const findScrollRoot = (x) => {
-  const parent = x.parentElement;
-  if (!parent)
-    return document.documentElement;
-  if (parent.scrollHeight > parent.clientHeight && getComputedStyle(parent).overflowY !== "visible")
-    return parent;
-  return findScrollRoot(parent);
-};
-const relativeOffset = (x, y) => {
-  if (x.offsetParent === y.offsetParent || !x.offsetParent)
-    return x.offsetTop - y.offsetTop;
-  if (x.offsetParent instanceof HTMLElement)
-    return relativeOffset(x.offsetParent, y) + x.offsetTop;
-  return 0;
-};
-function Virtualized(_e) {
-  var _f = _e, {
-    header,
-    children
-  } = _f, props = __objRest(_f, [
-    "header",
-    "children"
-  ]);
-  var _a, _b, _c, _d;
-  const table = useTableContext();
-  const virtual = table.useState("props.virtual");
-  const probeRef = useRef(null);
-  const [, setCounter] = useState(0);
-  const {
-    itemIds = [],
-    from = 0,
-    to,
-    before = 0,
-    after = 0
-  } = table.useState((state) => {
-    var _a2;
-    const itemIds2 = state.activeItems.map((item) => item.id);
-    const root = probeRef.current && findScrollRoot(probeRef.current);
-    if (!state.props.virtual)
-      return {
-        itemIds: itemIds2
-      };
-    if (!probeRef.current || !root || !document.contains(root))
-      return {};
+  }
+  const formatMonth = useMemo(() => {
     const {
-      rowHeight,
-      initalRowHeight,
-      overscan = 100,
-      overscanTop,
-      overscanBottom
-    } = (_a2 = state.props.virtual instanceof Object ? state.props.virtual : void 0) != null ? _a2 : {};
-    let totalHeight = 0;
-    const rowHeights = itemIds2.map((itemId, index) => {
-      var _a3, _b2;
-      const h = (_b2 = (_a3 = rowHeight != null ? rowHeight : state.rowHeights.get(itemId)) != null ? _a3 : initalRowHeight) != null ? _b2 : index === 0 ? 100 : totalHeight / index;
-      totalHeight += h;
-      return h;
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      month: "long"
     });
-    const probeOffset = relativeOffset(probeRef.current, root);
-    const headerHeight = probeRef.current.offsetTop;
-    const topOfTable = root.scrollTop - probeOffset + headerHeight;
-    const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
-    let from2 = 0, to2 = itemIds2.length, before2 = 0, after2 = 0;
-    for (const h of rowHeights) {
-      if (before2 + h > topOfTable - (overscanTop != null ? overscanTop : overscan))
-        break;
-      from2++;
-      before2 += h;
-    }
-    for (const h of rowHeights.reverse()) {
-      if (after2 + h > totalHeight - bottomOfTable - (overscanBottom != null ? overscanBottom : overscan))
-        break;
-      to2--;
-      after2 += h;
-    }
-    return {
-      itemIds: itemIds2.slice(from2, to2),
-      from: from2,
-      to: to2,
-      before: before2,
-      after: after2
-    };
-  }, {
-    throttle: 16
-  });
-  const throttleScroll = (_b = (_a = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a.throttleScroll) != null ? _b : 16;
-  const incCounter = useMemo(() => throttle(() => setCounter((c2) => c2 + 1), throttleScroll), [throttleScroll]);
-  useEffect(() => {
-    if (!virtual || !probeRef.current)
-      return;
-    window.addEventListener("scroll", incCounter, true);
-    return () => {
-      window.removeEventListener("scroll", incCounter, true);
-    };
-  }, [probeRef.current, incCounter]);
-  (_d = (_c = table.getState().props).debugRender) == null ? void 0 : _d.call(_c, `Virtualalized render ${from} to ${to}`);
-  return jsxs("div", __spreadProps(__spreadValues({}, props), {
-    children: [header, virtual && jsx("div", {
-      style: {
-        gridColumn: "1 / -1",
-        height: before
+    return (month) => format(new Date(2021, month));
+  }, [locale]);
+  const formatYear = useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      year: "numeric"
+    });
+    return (year) => format(new Date(year, 0, 1));
+  }, [locale]);
+  return jsxs("div", {
+    children: [jsxs("div", {
+      css: {
+        display: "grid",
+        gridAutoFlow: "column",
+        justifyContent: "center",
+        alignItems: "baseline",
+        gap: "var(--spacing)"
+      },
+      children: [jsx(DateInput, {
+        value: min != null ? min : null,
+        onChange: (date) => set(date != null ? date : void 0, max, "min"),
+        locale
+      }), rangeSelect && jsxs(Fragment, {
+        children: [" - ", jsx(DateInput, {
+          value: max != null ? max : null,
+          onChange: (date) => set(min, date != null ? date : void 0, "max"),
+          locale
+        })]
+      })]
+    }), calendars.map(({
+      month,
+      year,
+      weeks
+    }) => jsxs("div", {
+      css: {
+        display: "grid"
+      },
+      children: [jsxs("div", {
+        css: {
+          margin: "calc(var(--spacing) * 4) 0",
+          display: "grid",
+          gridAutoFlow: "column",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [jsx(IconButton2, __spreadProps(__spreadValues({}, getBackProps({
+          calendars
+        })), {
+          children: jsx(ChevronRight2, {
+            css: {
+              transform: "rotate3d(0, 0, 1, 180deg)"
+            }
+          })
+        })), jsxs("div", {
+          css: {
+            display: "flex"
+          },
+          children: [formatMonth(month), " ", formatYear(year)]
+        }), jsx(IconButton2, __spreadProps(__spreadValues({}, getForwardProps({
+          calendars
+        })), {
+          children: jsx(ChevronRight2, {})
+        }))]
+      }), jsxs("div", {
+        css: {
+          justifySelf: "center",
+          display: "grid",
+          gridTemplateColumns: "repeat(7, max-content)",
+          fontWeight: "bold"
+        },
+        children: [weekDays.map((_v, weekDay) => jsx("div", {
+          css: {
+            justifySelf: "center",
+            marginBottom: "var(--spacing)"
+          },
+          children: formatWeekday(weekDay)
+        }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
+          if (!dateObj) {
+            return jsx("div", {});
+          }
+          const {
+            prevMonth,
+            nextMonth,
+            date,
+            today: today2
+          } = dateObj;
+          const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, {
+            min,
+            max
+          });
+          const preSelected = !selected && (date.getTime() === (hovered == null ? void 0 : hovered.getTime()) || min && !max && hovered && dateIntersect(date, min <= hovered ? {
+            min,
+            max: hovered
+          } : {
+            min: hovered,
+            max: min
+          }));
+          return jsx("button", __spreadProps(__spreadValues({
+            css: [{
+              padding: 10,
+              border: "1px solid transparent",
+              background: "transparent",
+              cursor: "pointer"
+            }, (prevMonth || nextMonth) && {
+              color: gray
+            }, today2 && {
+              border: "1px solid var(--secondaryMain)"
+            }, selected && {
+              background: "var(--primaryMain)",
+              color: "var(--primaryContrastText)"
+            }, preSelected && {
+              background: "var(--primaryLight)",
+              color: "var(--primaryContrastText)"
+            }]
+          }, getDateProps({
+            dateObj
+          })), {
+            onClick: () => {
+              if (dirty) {
+                if (min)
+                  set(min, date);
+                else
+                  set(date, max);
+              } else {
+                set(date);
+              }
+            },
+            onPointerOver: () => setHovered(date),
+            onPointerOut: () => setHovered(void 0),
+            children: date.getDate()
+          }), `${index}-${dayIndex}`);
+        }))]
+      })]
+    }, `${month}${year}`)), jsxs("div", {
+      css: {
+        marginTop: "var(--spacing)",
+        display: "grid",
+        gridAutoFlow: "column",
+        justifyContent: "center"
       },
-      ref: probeRef
-    }), children(itemIds, from), virtual && jsx("div", {
-      style: {
-        gridColumn: "1 / -1",
-        height: after
-      }
+      children: [jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(today());
+        },
+        children: text.today
+      }), jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(thisWeek(firstDayOfWeek));
+        },
+        children: text.thisWeek
+      }), jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(null);
+        },
+        children: text.reset
+      })]
     })]
-  }));
+  });
 }
-const TableContext = createContext(null);
-const ColumnContext = createContext(null);
-function useTableContext() {
-  const value = useContext(TableContext);
-  if (!value)
-    throw Error("No table context available");
-  return value;
+function convertDate(x) {
+  if (x instanceof Date)
+    return x;
+  if (typeof x === "number" || typeof x === "string")
+    return new Date(x);
+  return null;
 }
-function useColumnContext() {
-  const value = useContext(ColumnContext);
-  if (value === null)
-    throw Error("No column context available");
-  return value;
+function convertDateOrRange(x) {
+  if (x instanceof Object && "min" in x && "max" in x) {
+    const range = {
+      min: convertDate(x.min),
+      max: convertDate(x.max)
+    };
+    return range.min && range.max ? range : null;
+  }
+  return convertDate(x);
 }
-function Table(props) {
-  var _a, _b;
-  const table = useTableState(props);
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
-  return jsx(TableContext.Provider, {
-    value: table,
-    children: jsx(TableLoadingState, {})
-  });
+function convertDateOrArray(x) {
+  if (x instanceof Array)
+    return x.map(convertDateOrRange).filter(Boolean);
+  return convertDateOrRange(x);
 }
-function TableLoadingState() {
+function DateFilter(_k) {
+  var _l = _k, {
+    locale,
+    firstDayOfWeek,
+    singleSelect,
+    filterBy = convertDateOrArray
+  } = _l, props = __objRest(_l, [
+    "locale",
+    "firstDayOfWeek",
+    "singleSelect",
+    "filterBy"
+  ]);
   const {
-    text
-  } = useTheme();
-  const isHydrated = useTableStateStorage();
-  const [showLoading, setShowLoading] = useState(false);
-  useEffect(() => {
-    const handle = setTimeout(() => setShowLoading(true), 500);
-    return () => clearTimeout(handle);
-  });
-  return jsxs(Fragment, {
-    children: [!isHydrated && showLoading && jsx("div", {
-      children: text.loading
-    }), jsx(TableInner, {
-      hidden: !isHydrated
-    })]
+    value = null,
+    onChange
+  } = useFilter(__spreadProps(__spreadValues({}, props), {
+    filterBy,
+    id: "dateFilter",
+    isActive(filterValue) {
+      return !!filterValue;
+    },
+    test(filterValue, value2) {
+      return dateIntersect(filterValue, value2);
+    }
+  }));
+  return jsx("div", {
+    css: {
+      padding: "calc(var(--spacing) * 2)",
+      display: "grid"
+    },
+    children: jsx(DatePicker, {
+      rangeSelect: !singleSelect,
+      value,
+      onChange,
+      locale,
+      firstDayOfWeek
+    })
   });
 }
-const TableInner = memo(function TableInner2({
-  hidden
-}) {
-  var _a, _b;
-  const table = useTableContext();
-  const fullWidth = table.useState("props.fullWidth");
-  const activeColumns = table.useState((state) => state.activeColumns.map((column) => ({
-    id: column.id,
-    width: column.width,
-    classes: column.classes,
-    header: column.header
-  })));
-  const columnWidths = table.useState("columnWidths", {
-    throttle: 16
-  });
-  const columnStyleOverride = table.useState("columnStyleOverride", {
-    throttle: 16
-  });
-  const defaultWidth = table.useState("props.defaultWidth");
-  const classes = table.useState("props.classes");
-  const stickyHeader = table.useState("props.stickyHeader");
-  const enableSelection = table.useState("props.enableSelection");
-  const enableColumnSelection = table.useState("props.enableColumnSelection");
-  const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
-  const cssVariables = useCssVariables();
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
-  return jsx(Virtualized, {
-    className: classes == null ? void 0 : classes.table,
-    css: [cssVariables, defaultClasses.table, {
-      gridTemplateColumns: [
-        fullWidth === "right" || fullWidth === true ? "auto" : "0",
-        "max-content",
-        ...activeColumns.map((column) => {
-          var _a2, _b2, _c;
-          return (_c = (_b2 = (_a2 = columnWidths.get(column.id)) != null ? _a2 : column.width) != null ? _b2 : defaultWidth) != null ? _c : "max-content";
-        }),
-        fullWidth === "left" || fullWidth === true ? "auto" : "0"
-      ].join(" ")
-    }, hidden && {
-      visibility: "hidden"
-    }],
-    header: jsxs(Fragment, {
-      children: [jsx("div", {
-        className: classes == null ? void 0 : classes.headerCell,
-        css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
-      }), jsxs("div", {
-        className: classes == null ? void 0 : classes.headerCell,
-        css: [defaultClasses.headerCell, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-        children: [enableSelection && jsx(SelectComponent, {}), enableColumnSelection && jsx(ColumnSelection, {}), enableExport && jsx(Export, {}), jsx(ResizeHandleView, {})]
-      }), jsx(ColumnHeaderContext.Provider, {
-        children: activeColumns.map((column) => {
-          var _a2;
-          return jsx(ColumnContext.Provider, {
-            value: column.id,
-            children: jsxs(ColumnHeader, {
-              className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
-              css: [defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-              children: [jsx(SortComponent, {
-                children: column.header
-              }), jsx("div", {
-                css: {
-                  flex: 1
-                }
-              }), jsx(FilterControl, {}), jsx(ResizeHandle, {})]
-            }, column.id)
-          }, column.id);
-        })
-      }), jsx("div", {
-        className: classes == null ? void 0 : classes.headerCell,
-        css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
-      })]
-    }),
-    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsx(Row, {
-      itemId,
-      rowIndex: startIndex + index
-    }, itemId))
-  });
-});
 function toggle(set, value, singleSelect) {
   const newSet = new Set(singleSelect ? [] : set);
   if (set.has(value)) {
@@ -2071,13 +2552,13 @@ function toggle(set, value, singleSelect) {
   }
   return newSet;
 }
-function SelectFilter(_g) {
-  var _h = _g, {
+function SelectFilter(_m) {
+  var _n = _m, {
     options: providedOptions,
     stringValue = asString,
     render = stringValue,
     singleSelect
-  } = _h, props = __objRest(_h, [
+  } = _n, props = __objRest(_n, [
     "options",
     "stringValue",
     "render",
@@ -2085,12 +2566,12 @@ function SelectFilter(_g) {
   ]);
   const {
     components: {
-      IconButton,
-      Checkbox
+      IconButton: IconButton2,
+      Checkbox: Checkbox2
     },
     icons: {
-      Search,
-      Clear
+      Search: Search2,
+      Clear: Clear2
     },
     text
   } = useTheme();
@@ -2128,10 +2609,10 @@ function SelectFilter(_g) {
     },
     children: [jsx(AutoFocusTextField, {
       value: query,
-      onChange: (e) => setQuery(e.target.value),
-      endIcon: jsx(IconButton, {
+      onChange: (e2) => setQuery(e2.target.value),
+      endIcon: jsx(IconButton2, {
         onClick: () => setQuery(""),
-        children: !query ? jsx(Search, {}) : jsx(Clear, {})
+        children: !query ? jsx(Search2, {}) : jsx(Clear2, {})
       }),
       css: {
         marginBottom: "var(--spacing)"
@@ -2143,7 +2624,7 @@ function SelectFilter(_g) {
       },
       children: [jsx(FormControlLabel, {
         disabled: value.size === 0,
-        control: jsx(Checkbox, {
+        control: jsx(Checkbox2, {
           disabled: value.size === 0,
           checked: value.size > 0,
           onChange: () => onChange(/* @__PURE__ */ new Set())
@@ -2152,7 +2633,7 @@ function SelectFilter(_g) {
           children: ["<", text.selected(value.size), ">"]
         })
       }), filtered.map((option, index) => jsx(FormControlLabel, {
-        control: jsx(Checkbox, {
+        control: jsx(Checkbox2, {
           checked: value.has(option),
           onChange: () => onChange(toggle(value, option, singleSelect))
         }),
@@ -2191,7 +2672,6 @@ function debounce(fn, ms) {
   });
 }
 function useFilter(impl) {
-  var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
   useEffect(() => {
@@ -2213,7 +2693,7 @@ function useFilter(impl) {
         state.filters.delete(columnId);
       });
     };
-  }, [table, columnId, ...(_a = impl.dependencies) != null ? _a : [impl]]);
+  }, [table, columnId, impl]);
   const value = table.useState((state) => state.filterValues.get(columnId));
   const [dirtyValue, setDirtyValue] = useState();
   const implRef = useRef(impl);
@@ -2260,21 +2740,21 @@ const termMatch = (text, query) => {
     }
   return true;
 };
-function TextFilter(_i) {
-  var _j = _i, {
+function TextFilter(_o) {
+  var _p = _o, {
     compare = textMatch,
     filterBy = asStringOrArray
-  } = _j, props = __objRest(_j, [
+  } = _p, props = __objRest(_p, [
     "compare",
     "filterBy"
   ]);
   const {
     components: {
-      IconButton
+      IconButton: IconButton2
     },
     icons: {
-      Search,
-      Clear
+      Search: Search2,
+      Clear: Clear2
     }
   } = useTheme();
   const {
@@ -2297,13 +2777,13 @@ function TextFilter(_i) {
     },
     children: jsx(AutoFocusTextField, {
       value,
-      onChange: (e) => onChange(e.target.value),
-      endIcon: jsx(IconButton, {
+      onChange: (e2) => onChange(e2.target.value),
+      endIcon: jsx(IconButton2, {
         onClick: () => onChange(""),
-        children: !value ? jsx(Search, {}) : jsx(Clear, {})
+        children: !value ? jsx(Search2, {}) : jsx(Clear2, {})
       })
     })
   });
 }
-export { AutoFocusTextField, ColumnContext, DateFilter, SelectFilter, Table, TableContext, TextFilter, termMatch, textMatch, useColumnContext, useFilter, useTableContext, useTheme };
+export { AutoFocusTextField, ColumnContext, DateFilter, DatePicker, SelectFilter, Table, TableContext, TextFilter, dateIntersect, endOfDay, startOfDay, termMatch, textMatch, useColumnContext, useFilter, useTableContext, useTheme };
 //# sourceMappingURL=index.js.map