schummar-table 0.5.4 → 0.7.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,205 @@ 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 { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, memo, useLayoutEffect, cloneElement, 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, T as TableThemeContext, m as mergeThemes, g as globalTableTheme, 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");
+const TableMemoContext = createContext(/* @__PURE__ */ new Map());
+function TableMemoContextProvider({
+  children
+}) {
+  return jsx(TableMemoContext.Provider, {
+    value: useMemo(() => /* @__PURE__ */ new Map(), []),
+    children
+  });
 }
-function AutoFocusTextField(props) {
-  const {
-    components: {
-      TextField
+function useTableMemo() {
+  const memoCache = useContext(TableMemoContext);
+  return (key, fn) => {
+    let deps;
+    if (Array.isArray(fn)) {
+      deps = fn.slice(1);
+      fn = fn[0];
+    } else {
+      deps = [fn.toString()];
     }
-  } = useTheme();
-  const ref = useRef(null);
-  const {
-    visible
-  } = useContext(PopoverContext);
-  useLayoutEffect(() => {
-    if (visible && ref.current) {
-      ref.current.focus();
+    let cachedValue = memoCache.get(key);
+    const hit = cachedValue && cachedValue[1].length === deps.length && cachedValue[1].every((x, i) => x === deps[i]);
+    if (!cachedValue || !hit) {
+      cachedValue = [fn, deps];
+      memoCache.set(key, cachedValue);
     }
-  }, [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
-  }));
+    return cachedValue[0];
+  };
 }
-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
-    };
+class Queue {
+  constructor() {
+    this.q = new Array();
+    this.isRunning = false;
   }
-  if (b instanceof Date) {
-    b = {
-      min: b,
-      max: b
-    };
+  run(job, replace) {
+    return new Promise((resolve, reject) => {
+      if (replace) {
+        this.q = [];
+      }
+      this.q.push({ job, resolve, reject });
+      if (!this.isRunning)
+        this.start();
+    });
   }
-  if (!(a2 == null ? void 0 : a2.min) || !a2.max || !(b == null ? void 0 : b.min) || !b.max) {
-    return false;
+  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;
   }
-  return !(endOfDay(a2.max) < startOfDay(b.min) || startOfDay(a2.min) > endOfDay(b.max));
 }
-function DatePicker({
-  value,
-  onChange,
-  rangeSelect,
-  locale,
-  firstDayOfWeek = 0
-}) {
-  const {
-    components: {
-      IconButton
-    },
-    icons: {
-      ChevronRight
+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 [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
-  });
-  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
-                  });
-                }
-              } else {
-                setCurrentMin(date);
-              }
-            },
-            onPointerOver: () => setHovered(date),
-            onPointerOut: () => setHovered(void 0),
-            children: date.getDate()
-          }), `${index}-${dayIndex}`);
-        }))]
-      })]
-    }, `${month}${year}`))
-  });
+    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 MonthSelector({
-  value,
-  onChange,
-  locale
-}) {
-  const {
-    components: {
-      Popover
+function parse(value) {
+  return JSON.parse(value, (_key, value2) => {
+    if (value2 instanceof Object && "__date" in value2) {
+      return new Date(value2.__date);
     }
-  } = 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))
-      })
-    })]
+    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 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);
+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 {
+                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 (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 +244,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,236 +288,61 @@ 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"];
-const storageName = (id) => `schummar-table_state-v1_${id}`;
-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, 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 {
-                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, 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;
-}
-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 [];
+        return column.sortBy.map((sortBy) => ({
+          selector: (item) => sortBy(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));
@@ -839,20 +396,20 @@ function calcItems(state) {
 }
 const noopParentId = () => void 0;
 function calcProps(props) {
-  const columnCache = useRef(/* @__PURE__ */ new Map());
+  const cache = useTableMemo();
   return useMemo(() => {
-    var _c, _d, _e, _f, _g, _h;
+    var _e, _f, _g, _h, _i, _j;
     let id;
-    if (props.id instanceof Function) {
-      id = props.id;
+    if (props.id instanceof Function || Array.isArray(props.id)) {
+      id = cache("id", props.id);
     } else {
-      id = (item) => item[props.id];
+      id = cache("id", [(item) => item[props.id], props.id]);
     }
     let parentId;
-    if (props.parentId instanceof Function) {
-      parentId = props.parentId;
-    } else if (typeof props.parentId === "string") {
-      parentId = (item) => item[props.parentId];
+    if (props.parentId instanceof Function || Array.isArray(props.parentId)) {
+      parentId = cache("parentId", props.parentId);
+    } else if (props.parentId !== void 0) {
+      parentId = cache("parentId", [(item) => item[props.parentId], props.parentId]);
     } else {
       parentId = noopParentId;
     }
@@ -862,42 +419,37 @@ function calcProps(props) {
     } else {
       inputColumns = props.columns.map((column) => __spreadProps(__spreadValues({}, column), { dependecies: void 0 }));
     }
-    const newColumnCache = /* @__PURE__ */ new Map();
-    const columns = inputColumns.map(function(_a, index) {
-      var _b = _a, {
+    const defCol = props.defaultColumnProps;
+    const mapColumn = ({
+      id: _id,
+      header = ((_a) => (_a = defCol == null ? void 0 : defCol.header) != null ? _a : null)(),
+      value,
+      renderCell = ((_b) => (_b = defCol == null ? void 0 : defCol.renderCell) != null ? _b : asString)(),
+      exportCell = ((_c) => (_c = defCol == null ? void 0 : defCol.exportCell) != null ? _c : asString)(),
+      sortBy = ((_d) => (_d = defCol == null ? void 0 : defCol.sortBy) != null ? _d : [(v) => typeof v === "number" || v instanceof Date ? v : String(v)])(),
+      cannotHide = defCol == null ? void 0 : defCol.cannotHide,
+      classes = defCol == null ? void 0 : defCol.classes,
+      filter = defCol == null ? void 0 : defCol.filter,
+      width = defCol == null ? void 0 : defCol.width
+    }, index) => {
+      const id2 = _id != null ? _id : index;
+      const cacheKey = typeof id2 === "string" ? `s${id2}` : `n${id2}`;
+      return {
         id: id2,
-        header = null,
-        renderCell = asString,
-        exportCell = asString,
-        sortBy = (v) => typeof v === "number" || v instanceof Date ? v : String(v),
-        dependencies = []
-      } = _b, props2 = __objRest(_b, [
-        "id",
-        "header",
-        "renderCell",
-        "exportCell",
-        "sortBy",
-        "dependencies"
-      ]);
-      var _a2;
-      const [depsInCache, columnInCache] = (_a2 = columnCache.current.get(id2 != null ? id2 : index)) != null ? _a2 : [];
-      let column;
-      if (depsInCache && columnInCache && depsInCache.length === dependencies.length && depsInCache.every((x, i) => dependencies[i] === x)) {
-        column = columnInCache;
-      } else {
-        column = __spreadValues({
-          id: id2 != null ? id2 : index,
-          header,
-          renderCell,
-          exportCell,
-          sortBy,
-          dependencies
-        }, props2);
-      }
-      newColumnCache.set(id2 != null ? id2 : index, [dependencies, column]);
-      return column;
-    });
-    columnCache.current = newColumnCache;
+        header,
+        value: cache(`columns.${cacheKey}.value`, value),
+        renderCell: cache(`columns.${cacheKey}.renderCell`, renderCell),
+        exportCell,
+        sortBy: sortBy.map((fn, i) => cache(`columns.${cacheKey}.sortBy.${i}`, fn)),
+        cannotHide,
+        classes,
+        filter,
+        width
+      };
+    };
+    const columns = inputColumns.map(mapColumn);
+    const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
+    const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
     let copy;
     if (props.enableExport === true || props.enableExport instanceof Object && props.enableExport.copy === true) {
       copy = { separator: "	" };
@@ -915,13 +467,15 @@ function calcProps(props) {
       id,
       parentId,
       columns,
-      enableSelection: (_c = props.enableSelection) != null ? _c : true,
-      selectSyncChildren: (_d = props.selectSyncChildren) != null ? _d : true,
-      stickyHeader: (_e = props.stickyHeader) != null ? _e : true,
+      wrapCell,
+      rowAction,
+      enableSelection: (_e = props.enableSelection) != null ? _e : true,
+      selectSyncChildren: (_f = props.selectSyncChildren) != null ? _f : true,
+      stickyHeader: (_g = props.stickyHeader) != null ? _g : true,
       enableExport,
-      enableColumnSelection: (_f = props.enableColumnSelection) != null ? _f : true,
-      enableColumnResize: (_g = props.enableColumnResize) != null ? _g : true,
-      enableColumnReorder: (_h = props.enableColumnReorder) != null ? _h : true
+      enableColumnSelection: (_h = props.enableColumnSelection) != null ? _h : true,
+      enableColumnResize: (_i = props.enableColumnResize) != null ? _i : true,
+      enableColumnReorder: (_j = props.enableColumnReorder) != null ? _j : true
     });
   }, [props]);
 }
@@ -1003,12 +557,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(),
@@ -1048,11 +600,21 @@ function useTableState(_props) {
           state2.columnOrder.splice(index, 0, column.id);
         }
       }
-      state2.theme = theme;
     });
   }, [state, props]);
   return state;
 }
+function useCssVariables() {
+  return useTheme(({ spacing, colors }) => ({
+    "--spacing": spacing,
+    "--primaryMain": colors.primary.main,
+    "--primaryLight": colors.primary.light,
+    "--primaryContrastText": colors.primary.contrastText,
+    "--secondaryMain": colors.secondary.main,
+    "--secondaryLight": colors.secondary.light,
+    "--secondaryContrastText": colors.secondary.contrastText
+  }));
+}
 const ColumnHeaderContext = new StoreScope({
   items: /* @__PURE__ */ new Map()
 });
@@ -1096,22 +658,22 @@ function ColumnHeader(props) {
     });
     return targetIndex === -1 ? otherCols.length : targetIndex;
   }
-  function onPointerDown(e) {
+  function onPointerDown(e2) {
     const div = ref.current;
     if (!div)
       return;
     draggingStart.current = {
-      mouseX: e.clientX,
+      mouseX: e2.clientX,
       bounds: div.getBoundingClientRect()
     };
   }
-  function onPointerMove(e) {
+  function onPointerMove(e2) {
     table.update((state) => {
       const div = ref.current;
-      if (!div || draggingStart.current === void 0 || Math.abs(e.clientX - draggingStart.current.mouseX) < 5)
+      if (!div || draggingStart.current === void 0 || Math.abs(e2.clientX - draggingStart.current.mouseX) < 5)
         return;
-      e.stopPropagation();
-      div.setPointerCapture(e.pointerId);
+      e2.stopPropagation();
+      div.setPointerCapture(e2.pointerId);
       if (!clone.current) {
         clone.current = div.cloneNode(true);
         document.body.append(clone.current);
@@ -1130,9 +692,9 @@ function ColumnHeader(props) {
         });
         div.style.color = "rgba(0, 0, 0, 0.2)";
       }
-      clone.current.style.left = `${draggingStart.current.bounds.left + e.clientX - draggingStart.current.mouseX}px`;
+      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 + e.clientX - draggingStart.current.mouseX);
+      const targetIndex = calcTargetIndex(div.offsetLeft + e2.clientX - draggingStart.current.mouseX);
       const columns = table.getState().columnOrder.map((id, index2) => {
         var _a, _b;
         return {
@@ -1162,14 +724,14 @@ function ColumnHeader(props) {
       });
     });
   }
-  function onPointerUp(e) {
+  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 + e.clientX - draggingStart.current.mouseX);
+      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();
@@ -1191,18 +753,37 @@ function ColumnHeader(props) {
     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,
-      Popover,
-      Checkbox
-    },
-    icons: {
-      Settings
-    },
-    text
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover2 = useTheme((t) => t.components.Popover);
+  const Checkbox2 = useTheme((t) => t.components.Checkbox);
+  const Settings2 = useTheme((t) => t.icons.Settings);
+  const selectColumns = useTheme((t) => t.text.selectColumns);
   const cssVariables = useCssVariables();
   const table = useTableContext();
   const columns = table.useState("props.columns");
@@ -1228,10 +809,10 @@ function ColumnSelection() {
     onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
   };
   return jsxs(Fragment, {
-    children: [jsx(IconButton, {
-      onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
-      children: jsx(Settings, {})
-    }), jsx(Popover, {
+    children: [jsx(IconButton2, {
+      onClick: (e2) => setAnchorEl(anchorEl ? null : e2.currentTarget),
+      children: jsx(Settings2, {})
+    }), jsx(Popover2, {
       anchorEl,
       open: !!anchorEl,
       onClose: () => setAnchorEl(null),
@@ -1245,9 +826,9 @@ function ColumnSelection() {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.selectColumns
+          children: selectColumns
         }), columns.map((column) => jsx(FormControlLabel, {
-          control: jsx(Checkbox, {
+          control: jsx(Checkbox2, {
             checked: !hiddenColumns.has(column.id),
             onChange: () => toggle2(column),
             disabled: column.cannotHide
@@ -1262,7 +843,7 @@ 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)))
+    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}`;
@@ -1270,20 +851,16 @@ function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" }
   return (sepPrefix ? `SEP=${separator}
 ` : "") + cells.map((line) => line.join(separator)).join(eol);
 }
-function Export() {
+function Export$1() {
   const table = useTableContext();
-  const {
-    components: {
-      Button,
-      IconButton,
-      Popover
-    },
-    icons: {
-      Export: Export2,
-      Clipboard
-    },
-    text
-  } = useTheme();
+  const Button2 = useTheme((t) => t.components.Button);
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover2 = useTheme((t) => t.components.Popover);
+  const Export2 = useTheme((t) => t.icons.Export);
+  const Clipboard2 = useTheme((t) => t.icons.Clipboard);
+  const exportTitle = useTheme((t) => t.text.exportTitle);
+  const exportCopy = useTheme((t) => t.text.exportCopy);
+  const exportDownload = useTheme((t) => t.text.exportDownload);
   const cssVariables = useCssVariables();
   const [anchor, setAnchor] = useState(null);
   const generate = (options) => {
@@ -1298,22 +875,22 @@ function Export() {
     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);
+    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(IconButton, {
-      onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
+    children: [jsx(IconButton2, {
+      onClick: (e2) => setAnchor(anchor ? null : e2.currentTarget),
       children: jsx(Export2, {
         css: !!anchor && {
           color: "var(--primaryMain)"
         }
       })
-    }), jsx(Popover, {
+    }), jsx(Popover2, {
       open: !!anchor,
       onClose: () => setAnchor(null),
       anchorEl: anchor,
@@ -1332,15 +909,15 @@ function Export() {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.exportTitle
-        }), jsx(Button, {
-          startIcon: jsx(Clipboard, {}),
+          children: exportTitle
+        }), jsx(Button2, {
+          startIcon: jsx(Clipboard2, {}),
           onClick: copy,
-          children: text.exportCopy
-        }), jsx(Button, {
+          children: exportCopy
+        }), jsx(Button2, {
           startIcon: jsx(Export2, {}),
           onClick: download,
-          children: text.exportDownload
+          children: exportDownload
         })]
       })
     })]
@@ -1350,16 +927,10 @@ const FilterControlContext = createContext(() => void 0);
 function FilterControl() {
   const table = useTableContext();
   const columnId = useColumnContext();
-  const {
-    components: {
-      IconButton,
-      Popover
-    },
-    icons: {
-      FilterList,
-      ArrowDropDown
-    }
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover2 = useTheme((t) => t.components.Popover);
+  const FilterList2 = useTheme((t) => t.icons.FilterList);
+  const ArrowDropDown2 = useTheme((t) => t.icons.ArrowDropDown);
   const cssVariables = useCssVariables();
   const [anchor, setAnchor] = useState(null);
   const isActive = table.useState((state) => {
@@ -1384,28 +955,28 @@ function FilterControl() {
   return jsxs(FilterControlContext.Provider, {
     value: close,
     children: [jsx("div", {
-      onClick: (e) => setAnchor(e.currentTarget),
-      onContextMenu: (e) => {
+      onClick: (e2) => setAnchor(e2.currentTarget),
+      onContextMenu: (e2) => {
         reset();
-        e.preventDefault();
+        e2.preventDefault();
         return false;
       },
-      children: jsx(IconButton, {
+      children: jsx(IconButton2, {
         css: [{
           color: "#b0bac9"
         }, isActive && {
           color: "var(--primaryMain) !important"
         }],
-        children: isActive ? jsx(FilterList, {}) : jsx(ArrowDropDown, {})
+        children: isActive ? jsx(FilterList2, {}) : jsx(ArrowDropDown2, {})
       })
     }), jsx("div", {
-      onPointerDown: (e) => {
-        e.stopPropagation();
+      onPointerDown: (e2) => {
+        e2.stopPropagation();
       },
-      onPointerMove: (e) => {
-        e.stopPropagation();
+      onPointerMove: (e2) => {
+        e2.stopPropagation();
       },
-      children: jsx(Popover, {
+      children: jsx(Popover2, {
         open: true,
         hidden: !anchor,
         onClose: () => setAnchor(null),
@@ -1420,30 +991,30 @@ 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 onPointerDown(e2) {
+    e2.stopPropagation();
+    const div = e2.target;
+    div.setPointerCapture(e2.pointerId);
   }
-  function onPointerMove(e) {
-    e.stopPropagation();
-    const div = e.target;
-    if (!div.hasPointerCapture(e.pointerId))
+  function onPointerMove(e2) {
+    e2.stopPropagation();
+    const div = e2.target;
+    if (!div.hasPointerCapture(e2.pointerId))
       return;
     const parent = div.parentElement;
-    const width = Math.max(e.clientX - parent.getBoundingClientRect().left + 5, 50);
+    const width = Math.max(e2.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 onPointerUp(e2) {
+    e2.stopPropagation();
+    const div = e2.target;
+    div.releasePointerCapture(e2.pointerId);
   }
-  function onDoubleClick(e) {
+  function onDoubleClick(e2) {
     table.update((state) => {
-      if (e.getModifierState("Control")) {
+      if (e2.getModifierState("Control")) {
         state.columnWidths.delete(columnId);
       } else {
         state.columnWidths.set(columnId, "max-content");
@@ -1458,10 +1029,10 @@ function ResizeHandle() {
     onDoubleClick: enabled ? onDoubleClick : void 0
   });
 }
-function ResizeHandleView(_c) {
-  var _d = _c, {
+function ResizeHandleView(_a) {
+  var _b = _a, {
     enabled
-  } = _d, props = __objRest(_d, [
+  } = _b, props = __objRest(_b, [
     "enabled"
   ]);
   return jsx("div", __spreadValues({
@@ -1481,49 +1052,56 @@ function ResizeHandleView(_c) {
     }
   }, props));
 }
+const defaultWrapCell = (content) => {
+  if (typeof content === "string") {
+    return jsx("span", {
+      css: defaultClasses.text,
+      title: content,
+      children: content
+    });
+  }
+  return content;
+};
 const Cell = memo(function Cell2({
   itemId,
   rowIndex
 }) {
-  var _a, _b;
+  var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
-  const {
-    classes
-  } = useTheme();
-  const column = table.useState((state) => state.activeColumns.find((column2) => column2.id === columnId));
+  const column = table.useState((state) => {
+    const col = state.activeColumns.find((column2) => column2.id === columnId);
+    return col && {
+      value: col.value,
+      renderCell: col.renderCell
+    };
+  });
+  const wrapCell = (_a = table.useState((state) => state.props.wrapCell)) != null ? _a : defaultWrapCell;
   const item = table.useState((state) => state.activeItemsById.get(itemId));
   const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
     throttle: 16
   });
+  useLayoutEffect(() => {
+    var _a2, _b;
+    return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render cell", itemId, columnId);
+  });
+  const className2 = useTheme((t) => cx(...calcClassNames(t.classes, item, rowIndex)));
   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
+    className: className2,
+    css: [defaultClasses.cell, columnStyleOverride],
+    children: wrapCell(content, column.value(item), item, rowIndex)
   });
 });
 function ExpandControl({
   itemId,
   hasDeferredChildren
 }) {
-  const {
-    components: {
-      IconButton,
-      Spinner
-    },
-    icons: {
-      ChevronRight
-    }
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Spinner2 = useTheme((t) => t.components.Spinner);
+  const ChevronRight2 = useTheme((t) => t.icons.ChevronRight);
   const table = useTableContext();
   const isExpanded = table.useState((state) => state.expanded.has(itemId));
   const hasChildren = table.useState((state) => {
@@ -1560,13 +1138,13 @@ function ExpandControl({
     }
   }
   if (isExpanded && hasDeferredChildren && !hasChildren) {
-    return jsx(Spinner, {
+    return jsx(Spinner2, {
       css: {
         margin: "0 var(--spacing)"
       }
     });
   }
-  return jsx(IconButton, {
+  return jsx(IconButton2, {
     onClick: toggle2,
     children: jsx("span", {
       css: {
@@ -1574,7 +1152,7 @@ function ExpandControl({
         transition: "all 300ms",
         transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
       },
-      children: jsx(ChevronRight, {})
+      children: jsx(ChevronRight2, {})
     })
   });
 }
@@ -1582,17 +1160,13 @@ function SelectComponent({
   itemId
 }) {
   const table = useTableContext();
-  const {
-    components: {
-      Checkbox
-    }
-  } = useTheme();
+  const Checkbox2 = useTheme((t) => t.components.Checkbox);
   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;
+  function toggle2(e2) {
+    const mouseEvent = e2.nativeEvent;
     const {
       activeItems,
       activeItemsById,
@@ -1606,9 +1180,9 @@ function SelectComponent({
     } = table.getState();
     let range;
     if (mouseEvent.shiftKey && itemId) {
-      const a2 = lastSelectedId ? activeItems.findIndex((i) => lastSelectedId === i.id) : 0;
+      const a = 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);
+      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;
@@ -1638,7 +1212,7 @@ function SelectComponent({
       state.lastSelectedId = itemId;
     });
   }
-  return jsx(Checkbox, {
+  return jsx(Checkbox2, {
     css: {
       justifySelf: "start",
       color: "#c9cfda"
@@ -1654,11 +1228,11 @@ const Row = memo(function Row2({
   itemId,
   rowIndex
 }) {
-  var _a, _b;
   const table = useTableContext();
   const divRef = useRef(null);
+  const classes = useTheme((t) => t.classes);
   const {
-    className,
+    className: className2,
     indent,
     hasChildren,
     hasDeferredChildren,
@@ -1666,17 +1240,16 @@ const Row = memo(function Row2({
     enableSelection,
     rowAction
   } = table.useState((state) => {
-    var _a2, _b2;
+    var _a, _b;
     const item = state.activeItemsById.get(itemId);
-    const index = !item ? -1 : state.activeItems.indexOf(item);
     return {
-      className: cx(...calcClassNames(state.props.classes, item, index)),
+      className: cx(...calcClassNames(classes, item, rowIndex)),
       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)),
+      hasDeferredChildren: item && ((_b = (_a = state.props).hasDeferredChildren) == null ? void 0 : _b.call(_a, 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
+      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item, rowIndex) : null : state.props.rowAction
     };
   });
   useEffect(() => {
@@ -1693,14 +1266,17 @@ const Row = memo(function Row2({
     o.observe(div);
     return () => o.disconnect();
   }, [divRef.current]);
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  });
   return jsxs(Fragment, {
     children: [jsx("div", {
-      className,
+      className: className2,
       css: [defaultClasses.cellFill],
       ref: divRef
     }), jsxs("div", {
-      className,
+      className: className2,
       css: [defaultClasses.cell, defaultClasses.firstCell],
       children: [jsx("div", {
         css: {
@@ -1719,7 +1295,7 @@ const Row = memo(function Row2({
         rowIndex
       })
     }, columnId)), jsx("div", {
-      className,
+      className: className2,
       css: [defaultClasses.cellFill]
     })]
   });
@@ -1729,14 +1305,8 @@ function SortComponent({
 }) {
   const table = useTableContext();
   const columnId = useColumnContext();
-  const {
-    components: {
-      Badge
-    },
-    icons: {
-      ArrowUpward
-    }
-  } = useTheme();
+  const Badge2 = useTheme((t) => t.components.Badge);
+  const ArrowUpward2 = useTheme((t) => t.icons.ArrowUpward);
   const {
     direction,
     index
@@ -1748,7 +1318,7 @@ function SortComponent({
       index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
     };
   });
-  function toggle2(e, off) {
+  function toggle2(e2, off) {
     const {
       props: {
         sort: controlledSort,
@@ -1756,7 +1326,7 @@ function SortComponent({
       }
     } = table.getState();
     const newDirection = direction === "asc" ? "desc" : "asc";
-    const newSort = e.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
+    const newSort = e2.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
     if (!off) {
       newSort.push({
         columnId,
@@ -1769,7 +1339,7 @@ function SortComponent({
         state.sort = newSort;
       });
     }
-    e.preventDefault();
+    e2.preventDefault();
     return false;
   }
   return jsxs("div", {
@@ -1784,11 +1354,11 @@ function SortComponent({
         textOverflow: "ellipsis"
       }
     },
-    onClick: (e) => toggle2(e),
-    onContextMenu: (e) => toggle2(e, true),
+    onClick: (e2) => toggle2(e2),
+    onContextMenu: (e2) => toggle2(e2, true),
     children: [jsx("div", {
       children
-    }), jsx(Badge, {
+    }), jsx(Badge2, {
       badgeContent: index,
       children: jsx("span", {
         css: [{
@@ -1799,7 +1369,7 @@ function SortComponent({
         }, direction === "desc" && {
           transform: "rotate3d(0, 0, 1, 180deg)"
         }],
-        children: jsx(ArrowUpward, {})
+        children: jsx(ArrowUpward2, {})
       })
     })]
   });
@@ -1830,6 +1400,11 @@ function throttle(fn, ms) {
       if (lastArgs) {
         run();
       }
+    },
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
     }
   });
 }
@@ -1848,15 +1423,15 @@ const relativeOffset = (x, y) => {
     return relativeOffset(x.offsetParent, y) + x.offsetTop;
   return 0;
 };
-function Virtualized(_e) {
-  var _f = _e, {
+function Virtualized(_c) {
+  var _d = _c, {
     header,
     children
-  } = _f, props = __objRest(_f, [
+  } = _d, props = __objRest(_d, [
     "header",
     "children"
   ]);
-  var _a, _b, _c, _d;
+  var _a, _b;
   const table = useTableContext();
   const virtual = table.useState("props.virtual");
   const probeRef = useRef(null);
@@ -1919,150 +1494,1091 @@ function Virtualized(_e) {
     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]);
+  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]);
-  (_d = (_c = table.getState().props).debugRender) == null ? void 0 : _d.call(_c, `Virtualalized render ${from} to ${to}`);
+  useEffect(() => incCounter.cancel, [incCounter]);
+  useLayoutEffect(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b2.call(_a2, `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
-      }
+      ref: probeRef
+    }), children(itemIds, from), virtual && jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: after
+      }
+    })]
+  }));
+}
+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) {
+  const table = useTableState(props);
+  useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
+  });
+  return jsx(TableContext.Provider, {
+    value: table,
+    children: jsx(TableMemoContextProvider, {
+      children: jsx(TableLoadingState, {})
+    })
+  });
+}
+function TableLoadingState() {
+  const loadingText = useTheme((t) => t.text.loading);
+  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: loadingText
+    }), jsx(TableInner, {
+      hidden: !isHydrated
+    })]
+  });
+}
+const TableInner = memo(function TableInner2({
+  hidden
+}) {
+  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 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();
+  useLayoutEffect(() => {
+    var _a, _b;
+    return (_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 _a, _b;
+          return (_b = (_a = columnWidths.get(column.id)) != null ? _a : column.width) != null ? _b : "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 _a;
+          return jsx(ColumnContext.Provider, {
+            value: column.id,
+            children: jsxs(ColumnHeader, {
+              className: cx(classes == null ? void 0 : classes.headerCell, (_a = column.classes) == null ? void 0 : _a.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))
+  });
+});
+const defaultColors = {
+  primary: { main: "#1976d2", light: "#42a5f5", contrastText: "#fff" },
+  secondary: { main: "#9c27b0", light: "#ba68c8", contrastText: "#fff" }
+};
+function Spinner({
+  className: className2
+}) {
+  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"
+    },
+    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
+    })]
+  });
+};
+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)"
+      }
+    }, 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: {
+        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
+      }
+    }, props.disabled && {
+      color: "rgba(0, 0, 0, 0.26)"
+    }],
+    className: className2,
+    children: [jsx("input", __spreadValues({
+      type: "checkbox"
+    }, props)), props.checked ? jsx("svg", {
+      css: {
+        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)"
+      },
+      "&: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)
+    }))
+  });
+}
+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(selector) {
+  var _a, _b;
+  const contextTableTheme = useContext(TableThemeContext);
+  const table = useContext(TableContext);
+  const columnId = useContext(ColumnContext);
+  const memo2 = useTableMemo();
+  const process = (t) => {
+    var _a2;
+    const cell = (_a2 = t.classes) == null ? void 0 : _a2.cell;
+    const selected = t.text.selected;
+    return __spreadProps(__spreadValues({}, t), {
+      classes: __spreadProps(__spreadValues({}, t.classes), {
+        cell: cell instanceof Function || Array.isArray(cell) ? memo2("theme.classes.cell", cell) : cell
+      }),
+      text: __spreadProps(__spreadValues({}, t.text), {
+        selected: selected instanceof Function || Array.isArray(selected) ? memo2("theme.text.selected", selected) : selected
+      })
+    });
+  };
+  const theme = (_b = (_a = table == null ? void 0 : table.useState((state) => {
+    const localTheme = {
+      text: state.props.text,
+      classes: state.props.classes,
+      components: state.props.components,
+      icons: state.props.icons,
+      colors: state.props.colors,
+      spacing: state.props.spacing
+    };
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    const columnsTheme = {
+      classes: column == null ? void 0 : column.classes
+    };
+    const theme2 = mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme, localTheme, columnsTheme);
+    return selector(process(theme2));
+  })) != null ? _a : emptyStore.useState()) != null ? _b : selector(process(mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme)));
+  return theme;
+}
+function AutoFocusTextField(props) {
+  const TextField2 = useTheme((t) => t.components.TextField);
+  const ref = useRef(null);
+  const {
+    visible
+  } = useContext(PopoverContext);
+  useLayoutEffect(() => {
+    if (visible && ref.current) {
+      ref.current.focus();
+    }
+  }, [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;
+    }
+    setOverride(void 0);
+    if (!override.value) {
+      onChange(null);
+      return;
+    }
+    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));
+    }
+    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: {
+      display: "flex",
+      alignItems: "baseline"
+    },
+    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))
+  });
+}
+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
+    };
+  }
+  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 Button2 = useTheme((t) => t.components.Button);
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const ChevronRight2 = useTheme((t) => t.icons.ChevronRight);
+  const textToday = useTheme((t) => t.text.today);
+  const textThisWeek = useTheme((t) => t.text.thisWeek);
+  const textReset = useTheme((t) => t.text.reset);
+  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 {
+    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
+  });
+  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]);
+  useEffect(() => {
+    if (!rangeSelect) {
+      setDirty(void 0);
+    }
+  }, [rangeSelect]);
+  function set(min2, max2, edit) {
+    if (!rangeSelect) {
+      onChange(min2 != null ? min2 : null);
+      return;
+    }
+    if (min2 && max2 && min2 > max2) {
+      if (edit === "min") {
+        max2 = min2;
+      } else if (edit === "max") {
+        min2 = max2;
+      } else {
+        [min2, max2] = [max2, min2];
+      }
+    }
+    if (!min2 === !max2) {
+      setDirty(void 0);
+      onChange(min2 && max2 ? {
+        min: min2,
+        max: max2
+      } : null);
+    } else {
+      setDirty({
+        min: min2,
+        max: max2
+      });
+    }
+  }
+  const formatMonth = useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      month: "long"
+    });
+    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"
+      },
+      children: [jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(today());
+        },
+        children: textToday
+      }), jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(thisWeek(firstDayOfWeek));
+        },
+        children: textThisWeek
+      }), jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(null);
+        },
+        children: textReset
+      })]
     })]
-  }));
+  });
 }
-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)) {
@@ -2072,46 +2588,30 @@ 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",
     "singleSelect"
   ]);
-  const {
-    components: {
-      IconButton,
-      Checkbox
-    },
-    icons: {
-      Search,
-      Clear
-    },
-    text
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Checkbox2 = useTheme((t) => t.components.Checkbox);
+  const Search2 = useTheme((t) => t.icons.Search);
+  const Clear2 = useTheme((t) => t.icons.Clear);
+  const selected = useTheme((t) => t.text.selected);
+  const noResults = useTheme((t) => t.text.noResults);
   const table = useTableContext();
   const columnId = useColumnContext();
-  const options = table.useState((state) => {
-    var _a;
-    if (providedOptions)
-      return uniq(providedOptions);
-    const column = state.activeColumns.find((column2) => column2.id === columnId);
-    if (!column)
-      return [];
-    const filterBy = (_a = props.filterBy) != null ? _a : (x) => x;
-    return uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item), item))));
-  });
-  const [query, setQuery] = useState("");
-  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
   const {
     value = /* @__PURE__ */ new Set(),
-    onChange
+    onChange,
+    filterBy
   } = useFilter(__spreadProps(__spreadValues({}, props), {
     id: "selectFilter",
     isActive(filterValue) {
@@ -2121,6 +2621,16 @@ function SelectFilter(_g) {
       return filterValue.has(value2);
     }
   }));
+  const options = table.useState((state) => {
+    if (providedOptions)
+      return uniq(providedOptions);
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    if (!column)
+      return [];
+    return uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item), item))));
+  });
+  const [query, setQuery] = useState("");
+  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
   return jsxs("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
@@ -2129,10 +2639,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)"
@@ -2144,16 +2654,16 @@ 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())
         }),
         label: jsxs(Fragment, {
-          children: ["<", text.selected(value.size), ">"]
+          children: ["<", 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))
         }),
@@ -2163,7 +2673,7 @@ function SelectFilter(_g) {
       css: {
         textAlign: "center"
       },
-      children: text.noResults
+      children: noResults
     })]
   });
 }
@@ -2192,9 +2702,10 @@ function debounce(fn, ms) {
   });
 }
 function useFilter(impl) {
-  var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
+  const cache = useTableMemo();
+  const filterBy = impl.filterBy && cache("", impl.filterBy);
   useEffect(() => {
     table.update((state) => {
       if (impl.defaultValue !== void 0) {
@@ -2204,7 +2715,7 @@ function useFilter(impl) {
   }, []);
   useEffect(() => {
     table.update((state) => {
-      state.filters.set(columnId, castDraft(impl));
+      state.filters.set(columnId, castDraft(__spreadProps(__spreadValues({}, impl), { filterBy })));
       if (impl.value !== void 0) {
         state.filterValues.set(columnId, impl.value);
       }
@@ -2214,7 +2725,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);
@@ -2239,7 +2750,8 @@ function useFilter(impl) {
   return {
     value: dirtyValue != null ? dirtyValue : value,
     onChange,
-    close: useContext(FilterControlContext)
+    close: useContext(FilterControlContext),
+    filterBy: filterBy != null ? filterBy : (x) => x
   };
 }
 const textMatch = (text, query) => {
@@ -2261,23 +2773,17 @@ 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
-    },
-    icons: {
-      Search,
-      Clear
-    }
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Search2 = useTheme((t) => t.icons.Search);
+  const Clear2 = useTheme((t) => t.icons.Clear);
   const {
     value = "",
     onChange
@@ -2298,13 +2804,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