schummar-table 0.5.5 → 0.7.1

package/dist/cjs/index.js

@@ -33,461 +33,193 @@ var __objRest = (source, exclude) => {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports[Symbol.toStringTag] = "Module";
 var react = require("react");
+var react$1 = require("schummar-state/react");
 var tableTheme = require("./tableTheme.js");
 var jsxRuntime = require("@emotion/react/jsx-runtime");
 var dayzed = require("dayzed");
 var immer = require("immer");
-var react$1 = require("schummar-state/react");
-require("@emotion/react");
+var react$2 = require("@emotion/react");
 require("react-dom");
-function useTheme() {
-  const table = useTableContext();
-  return table.useState("theme");
+const TableMemoContext = react.createContext(/* @__PURE__ */ new Map());
+function TableMemoContextProvider({
+  children
+}) {
+  return jsxRuntime.jsx(TableMemoContext.Provider, {
+    value: react.useMemo(() => /* @__PURE__ */ new Map(), []),
+    children
+  });
 }
-function AutoFocusTextField(props) {
-  const {
-    components: {
-      TextField
+function useTableMemo() {
+  const memoCache = react.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 = react.useRef(null);
-  const {
-    visible
-  } = react.useContext(tableTheme.PopoverContext);
-  react.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 jsxRuntime.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(a, b) {
-  if (a instanceof Date) {
-    a = {
-      min: a,
-      max: a
-    };
+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 (!(a == null ? void 0 : a.min) || !a.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 (e) {
+        next.reject(e);
+      }
+    }
+    this.isRunning = false;
   }
-  return !(endOfDay(a.max) < startOfDay(b.min) || startOfDay(a.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] = react.useState(new Date());
-  const [dateInView, setDateInView] = react.useState(baseDate);
-  const [currentMin, setCurrentMin] = react.useState();
-  const [hovered, setHovered] = react.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
-  } = dayzed.useDayzed({
-    onDateSelected: () => void 0,
-    firstDayOfWeek,
-    showOutsideDays: true,
-    date: dateInView,
-    onOffsetChanged: (offset) => setDateInView(new Date(dateInView.getFullYear(), dateInView.getMonth() + offset)),
-    offset: 0
-  });
-  const formatWeekday = react.useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      weekday: "short"
-    });
-    return (weekDay) => format(new Date(Date.UTC(2021, 5, weekDay)));
-  }, [locale]);
-  react.useEffect(() => setDateInView(value === null ? new Date() : value instanceof Date ? value : value.max), [value]);
-  return jsxRuntime.jsx("div", {
-    children: calendars.map(({
-      month,
-      year,
-      weeks
-    }) => jsxRuntime.jsxs("div", {
-      children: [jsxRuntime.jsxs("div", {
-        css: {
-          margin: "calc(var(--spacing) * 4) 0",
-          display: "grid",
-          gridAutoFlow: "column",
-          justifyContent: "space-between",
-          alignItems: "center"
-        },
-        children: [jsxRuntime.jsx(IconButton, __spreadProps(__spreadValues({}, getBackProps({
-          calendars
-        })), {
-          children: jsxRuntime.jsx(ChevronRight, {
-            css: {
-              transform: "rotate3d(0, 0, 1, 180deg)"
-            }
-          })
-        })), jsxRuntime.jsxs("div", {
-          css: {
-            display: "flex"
-          },
-          children: [jsxRuntime.jsx(MonthSelector, {
-            value: month,
-            onChange: (month2) => setDateInView(new Date(year, month2)),
-            locale
-          }), jsxRuntime.jsx(YearSelector, {
-            value: year,
-            onChange: (year2) => setDateInView(new Date(year2, month))
-          })]
-        }), jsxRuntime.jsx(IconButton, __spreadProps(__spreadValues({}, getForwardProps({
-          calendars
-        })), {
-          children: jsxRuntime.jsx(ChevronRight, {})
-        }))]
-      }), jsxRuntime.jsxs("div", {
-        css: {
-          display: "grid",
-          gridTemplateColumns: "repeat(7, max-content)",
-          fontWeight: "bold"
-        },
-        children: [weekDays.map((_v, weekDay) => jsxRuntime.jsx("div", {
-          css: {
-            justifySelf: "center",
-            marginBottom: "var(--spacing)"
-          },
-          children: formatWeekday(weekDay)
-        }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
-          if (!dateObj) {
-            return jsxRuntime.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 jsxRuntime.jsx("button", __spreadProps(__spreadValues({
-            css: [{
-              padding: 10,
-              border: "1px solid transparent",
-              background: "transparent",
-              cursor: "pointer"
-            }, (prevMonth || nextMonth) && {
-              color: tableTheme.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] = react.useState();
-  const formatMonth = react.useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      month: "long"
-    });
-    return (month) => format(new Date(2021, month));
-  }, [locale]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("button", {
-      css: {
-        border: "none",
-        background: "transparent",
-        fontSize: "inherit",
-        cursor: "pointer"
-      },
-      onClick: (e) => setAnchor(e.currentTarget),
-      children: formatMonth(value)
-    }), jsxRuntime.jsx(Popover, {
-      open: !!anchor,
-      anchorEl: anchor != null ? anchor : null,
-      onClose: () => setAnchor(void 0),
-      align: "center",
-      css: cssVariables,
-      children: jsxRuntime.jsx("div", {
-        css: {
-          display: "grid"
-        },
-        children: months.map((month) => jsxRuntime.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] = react.useState();
-  const ref = react.useRef(null);
-  function apply() {
-    onChange(Number(input));
-    setInput(void 0);
-  }
-  const formatYear = react.useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      year: "numeric"
-    });
-    return (year) => format(new Date(year, 0, 1));
-  }, [locale]);
-  react.useLayoutEffect(() => {
-    var _a;
-    return (_a = ref.current) == null ? void 0 : _a.focus();
-  }, [ref.current]);
-  if (input === void 0) {
-    return jsxRuntime.jsx("div", {
-      onClick: () => setInput(String(value)),
-      children: formatYear(value)
-    });
-  }
-  return jsxRuntime.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] = react.useState(false);
+  react.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);
       }
-    },
-    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 = react.useMemo(() => {
-    const {
-      format
-    } = new Intl.DateTimeFormat(locale, {
-      dateStyle: "medium"
-    });
-    return format;
-  }, [locale]);
-  return jsxRuntime.jsxs("div", {
-    css: {
-      padding: "calc(var(--spacing) * 2)",
-      display: "grid"
-    },
-    children: [!singleSelect && jsxRuntime.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) : ""]
-    }), jsxRuntime.jsx(DatePicker, {
-      rangeSelect: !singleSelect,
-      value,
-      onChange,
-      locale,
-      firstDayOfWeek
-    }), jsxRuntime.jsxs("div", {
-      css: {
-        marginTop: "var(--spacing)",
-        display: "grid",
-        gridAutoFlow: "column",
-        justifyContent: "center"
-      },
-      children: [jsxRuntime.jsx(Button, {
-        variant: "text",
-        onClick: () => onChange(today()),
-        children: text.today
-      }), jsxRuntime.jsx(Button, {
-        variant: "text",
-        onClick: () => onChange(thisWeek(firstDayOfWeek)),
-        children: text.thisWeek
-      }), jsxRuntime.jsx(Button, {
-        variant: "text",
-        onClick: () => onChange(null),
-        children: text.reset
-      })]
-    })]
-  });
+  }, []);
+  react.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)), []);
 };
@@ -564,185 +296,8 @@ const cx = (...classNames) => classNames.flatMap((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 jsxRuntime.jsxs("label", {
-    css: [{
-      display: "flex",
-      alignItems: "center",
-      cursor: "pointer",
-      userSelect: "none",
-      "& > *": {
-        cursor: "pointer"
-      }
-    }, disabled && {
-      color: "rgba(0, 0, 0, 0.26)"
-    }],
-    children: [control, jsxRuntime.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] = react.useState(false);
-  react.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;
-    };
-  }, []);
-  react.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) {
   react.useEffect(() => state.addReaction((state2) => [
     state2.props.items,
@@ -755,10 +310,11 @@ function calcItems(state) {
     state2.activeColumns,
     state2.expanded
   ], ([items = [], id, parentId, revealFiltered, sort, filters, filterValues, activeColumns], draft) => {
-    const tableItems = items.map((item) => __spreadProps(__spreadValues({}, item), {
+    const tableItems = items.map((item) => ({
       id: id(item),
       parentId: parentId == null ? void 0 : parentId(item),
-      children: []
+      children: [],
+      value: item
     }));
     let sorted;
     if (sort.length === 0) {
@@ -768,10 +324,12 @@ function calcItems(state) {
         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 }));
+        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));
+      sorted = orderBy(tableItems, selectors.map((x) => (item) => x.selector(item.value)), selectors.map((x) => x.direction));
     }
     const lookup = /* @__PURE__ */ new Map();
     for (const item of sorted) {
@@ -805,7 +363,7 @@ function calcItems(state) {
         if (filterValue === void 0 || !filter.isActive(filterValue))
           return true;
         const filterBy = (_a = filter.filterBy) != null ? _a : (x) => x;
-        const value = filterBy(column.value(item), item);
+        const value = filterBy(column.value(item.value), item.value);
         return castArray(value).some((value2) => filter.test(filterValue, value2));
       }));
       if (isActive && item.parentId !== void 0) {
@@ -841,20 +399,20 @@ function calcItems(state) {
 }
 const noopParentId = () => void 0;
 function calcProps(props) {
-  const columnCache = react.useRef(/* @__PURE__ */ new Map());
+  const cache = useTableMemo();
   return react.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;
     }
@@ -864,42 +422,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: "	" };
@@ -917,13 +470,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]);
 }
@@ -1005,12 +560,10 @@ function syncSelections(table) {
 }
 function useTableState(_props) {
   const props = calcProps(_props);
-  const theme = tableTheme.useTableTheme(props);
   const state = react.useMemo(() => {
     var _a, _b, _c, _d;
     return new react$1.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(),
@@ -1050,11 +603,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 react$1.StoreScope({
   items: /* @__PURE__ */ new Map()
 });
@@ -1193,18 +756,37 @@ function ColumnHeader(props) {
     children: props.children
   }));
 }
+function FormControlLabel({
+  control,
+  label,
+  disabled
+}) {
+  return jsxRuntime.jsxs("label", {
+    css: [{
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      userSelect: "none",
+      "& > *": {
+        cursor: "pointer"
+      }
+    }, disabled && {
+      color: "rgba(0, 0, 0, 0.26)"
+    }],
+    children: [control, jsxRuntime.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 Popover = 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");
@@ -1230,9 +812,9 @@ function ColumnSelection() {
     onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
   };
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(IconButton, {
+    children: [jsxRuntime.jsx(IconButton2, {
       onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
-      children: jsxRuntime.jsx(Settings, {})
+      children: jsxRuntime.jsx(Settings2, {})
     }), jsxRuntime.jsx(Popover, {
       anchorEl,
       open: !!anchorEl,
@@ -1247,9 +829,9 @@ function ColumnSelection() {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.selectColumns
+          children: selectColumns
         }), columns.map((column) => jsxRuntime.jsx(FormControlLabel, {
-          control: jsxRuntime.jsx(Checkbox, {
+          control: jsxRuntime.jsx(Checkbox2, {
             checked: !hiddenColumns.has(column.id),
             onChange: () => toggle2(column),
             disabled: column.cannotHide
@@ -1272,20 +854,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 Popover = 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] = react.useState(null);
   const generate = (options) => {
@@ -1293,7 +871,7 @@ function Export() {
       activeColumns,
       activeItems
     } = table.getState();
-    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item)))];
+    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item.value), item.value)))];
     return csvExport(data, options);
   };
   const copy = () => {
@@ -1308,7 +886,7 @@ function Export() {
     document.body.removeChild(a);
   };
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(IconButton, {
+    children: [jsxRuntime.jsx(IconButton2, {
       onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
       children: jsxRuntime.jsx(Export2, {
         css: !!anchor && {
@@ -1334,15 +912,15 @@ function Export() {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.exportTitle
-        }), jsxRuntime.jsx(Button, {
-          startIcon: jsxRuntime.jsx(Clipboard, {}),
+          children: exportTitle
+        }), jsxRuntime.jsx(Button2, {
+          startIcon: jsxRuntime.jsx(Clipboard2, {}),
           onClick: copy,
-          children: text.exportCopy
-        }), jsxRuntime.jsx(Button, {
+          children: exportCopy
+        }), jsxRuntime.jsx(Button2, {
           startIcon: jsxRuntime.jsx(Export2, {}),
           onClick: download,
-          children: text.exportDownload
+          children: exportDownload
         })]
       })
     })]
@@ -1352,16 +930,10 @@ const FilterControlContext = react.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 Popover = 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] = react.useState(null);
   const isActive = table.useState((state) => {
@@ -1392,13 +964,13 @@ function FilterControl() {
         e.preventDefault();
         return false;
       },
-      children: jsxRuntime.jsx(IconButton, {
+      children: jsxRuntime.jsx(IconButton2, {
         css: [{
           color: "#b0bac9"
         }, isActive && {
           color: "var(--primaryMain) !important"
         }],
-        children: isActive ? jsxRuntime.jsx(FilterList, {}) : jsxRuntime.jsx(ArrowDropDown, {})
+        children: isActive ? jsxRuntime.jsx(FilterList2, {}) : jsxRuntime.jsx(ArrowDropDown2, {})
       })
     }), jsxRuntime.jsx("div", {
       onPointerDown: (e) => {
@@ -1460,10 +1032,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 jsxRuntime.jsx("div", __spreadValues({
@@ -1483,49 +1055,56 @@ function ResizeHandleView(_c) {
     }
   }, props));
 }
+const defaultWrapCell = (content) => {
+  if (typeof content === "string") {
+    return jsxRuntime.jsx("span", {
+      css: tableTheme.defaultClasses.text,
+      title: content,
+      children: content
+    });
+  }
+  return content;
+};
 const Cell = react.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
   });
+  react.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);
+  const content = column.renderCell(column.value(item.value), item.value);
   return jsxRuntime.jsx("div", {
-    className: cx(...classNames),
-    css: [tableTheme.defaultClasses.cell, classNames, columnStyleOverride],
-    children: typeof content === "string" ? jsxRuntime.jsx("span", {
-      css: tableTheme.defaultClasses.text,
-      title: content,
-      children: content
-    }) : content
+    className: className2,
+    css: [tableTheme.defaultClasses.cell, columnStyleOverride],
+    children: wrapCell(content, column.value(item.value), item.value, 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) => {
@@ -1562,13 +1141,13 @@ function ExpandControl({
     }
   }
   if (isExpanded && hasDeferredChildren && !hasChildren) {
-    return jsxRuntime.jsx(Spinner, {
+    return jsxRuntime.jsx(Spinner2, {
       css: {
         margin: "0 var(--spacing)"
       }
     });
   }
-  return jsxRuntime.jsx(IconButton, {
+  return jsxRuntime.jsx(IconButton2, {
     onClick: toggle2,
     children: jsxRuntime.jsx("span", {
       css: {
@@ -1576,7 +1155,7 @@ function ExpandControl({
         transition: "all 300ms",
         transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
       },
-      children: jsxRuntime.jsx(ChevronRight, {})
+      children: jsxRuntime.jsx(ChevronRight2, {})
     })
   });
 }
@@ -1584,11 +1163,7 @@ 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));
@@ -1640,7 +1215,7 @@ function SelectComponent({
       state.lastSelectedId = itemId;
     });
   }
-  return jsxRuntime.jsx(Checkbox, {
+  return jsxRuntime.jsx(Checkbox2, {
     css: {
       justifySelf: "start",
       color: "#c9cfda"
@@ -1656,11 +1231,11 @@ const Row = react.memo(function Row2({
   itemId,
   rowIndex
 }) {
-  var _a, _b;
   const table = useTableContext();
   const divRef = react.useRef(null);
+  const classes = useTheme((t) => t.classes);
   const {
-    className,
+    className: className2,
     indent,
     hasChildren,
     hasDeferredChildren,
@@ -1668,17 +1243,16 @@ const Row = react.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.value)),
       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.value, rowIndex) : null : state.props.rowAction
     };
   });
   react.useEffect(() => {
@@ -1695,14 +1269,17 @@ const Row = react.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);
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
-      className,
+      className: className2,
       css: [tableTheme.defaultClasses.cellFill],
       ref: divRef
     }), jsxRuntime.jsxs("div", {
-      className,
+      className: className2,
       css: [tableTheme.defaultClasses.cell, tableTheme.defaultClasses.firstCell],
       children: [jsxRuntime.jsx("div", {
         css: {
@@ -1721,7 +1298,7 @@ const Row = react.memo(function Row2({
         rowIndex
       })
     }, columnId)), jsxRuntime.jsx("div", {
-      className,
+      className: className2,
       css: [tableTheme.defaultClasses.cellFill]
     })]
   });
@@ -1731,14 +1308,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
@@ -1790,7 +1361,7 @@ function SortComponent({
     onContextMenu: (e) => toggle2(e, true),
     children: [jsxRuntime.jsx("div", {
       children
-    }), jsxRuntime.jsx(Badge, {
+    }), jsxRuntime.jsx(Badge2, {
       badgeContent: index,
       children: jsxRuntime.jsx("span", {
         css: [{
@@ -1801,7 +1372,7 @@ function SortComponent({
         }, direction === "desc" && {
           transform: "rotate3d(0, 0, 1, 180deg)"
         }],
-        children: jsxRuntime.jsx(ArrowUpward, {})
+        children: jsxRuntime.jsx(ArrowUpward2, {})
       })
     })]
   });
@@ -1832,6 +1403,11 @@ function throttle(fn, ms) {
       if (lastArgs) {
         run();
       }
+    },
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
     }
   });
 }
@@ -1850,15 +1426,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 = react.useRef(null);
@@ -1932,141 +1508,1080 @@ function Virtualized(_e) {
       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}`);
+  react.useEffect(() => incCounter.cancel, [incCounter]);
+  react.useLayoutEffect(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b2.call(_a2, `Virtualalized render ${from} to ${to}`);
+  });
   return jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, props), {
     children: [header, virtual && jsxRuntime.jsx("div", {
       style: {
         gridColumn: "1 / -1",
         height: before
       },
-      ref: probeRef
-    }), children(itemIds, from), virtual && jsxRuntime.jsx("div", {
-      style: {
-        gridColumn: "1 / -1",
-        height: after
-      }
+      ref: probeRef
+    }), children(itemIds, from), virtual && jsxRuntime.jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: after
+      }
+    })]
+  }));
+}
+const TableContext = react.createContext(null);
+const ColumnContext = react.createContext(null);
+function useTableContext() {
+  const value = react.useContext(TableContext);
+  if (!value)
+    throw Error("No table context available");
+  return value;
+}
+function useColumnContext() {
+  const value = react.useContext(ColumnContext);
+  if (value === null)
+    throw Error("No column context available");
+  return value;
+}
+function Table(props) {
+  const table = useTableState(props);
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
+  });
+  return jsxRuntime.jsx(TableContext.Provider, {
+    value: table,
+    children: jsxRuntime.jsx(TableMemoContextProvider, {
+      children: jsxRuntime.jsx(TableLoadingState, {})
+    })
+  });
+}
+function TableLoadingState() {
+  const loadingText = useTheme((t) => t.text.loading);
+  const isHydrated = useTableStateStorage();
+  const [showLoading, setShowLoading] = react.useState(false);
+  react.useEffect(() => {
+    const handle = setTimeout(() => setShowLoading(true), 500);
+    return () => clearTimeout(handle);
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!isHydrated && showLoading && jsxRuntime.jsx("div", {
+      children: loadingText
+    }), jsxRuntime.jsx(TableInner, {
+      hidden: !isHydrated
+    })]
+  });
+}
+const TableInner = react.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();
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
+  });
+  return jsxRuntime.jsx(Virtualized, {
+    className: classes == null ? void 0 : classes.table,
+    css: [cssVariables, tableTheme.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: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
+      }), jsxRuntime.jsxs("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
+        children: [enableSelection && jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && jsxRuntime.jsx(ColumnSelection, {}), enableExport && jsxRuntime.jsx(Export$1, {}), jsxRuntime.jsx(ResizeHandleView, {})]
+      }), jsxRuntime.jsx(ColumnHeaderContext.Provider, {
+        children: activeColumns.map((column) => {
+          var _a;
+          return jsxRuntime.jsx(ColumnContext.Provider, {
+            value: column.id,
+            children: jsxRuntime.jsxs(ColumnHeader, {
+              className: cx(classes == null ? void 0 : classes.headerCell, (_a = column.classes) == null ? void 0 : _a.headerCell),
+              css: [tableTheme.defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
+              children: [jsxRuntime.jsx(SortComponent, {
+                children: column.header
+              }), jsxRuntime.jsx("div", {
+                css: {
+                  flex: 1
+                }
+              }), jsxRuntime.jsx(FilterControl, {}), jsxRuntime.jsx(ResizeHandle, {})]
+            }, column.id)
+          }, column.id);
+        })
+      }), jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
+      })]
+    }),
+    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsxRuntime.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 jsxRuntime.jsxs("div", {
+    className: className2,
+    css: react$2.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: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})]
+  });
+}
+const Badge = ({
+  badgeContent,
+  children
+}) => {
+  if (!open)
+    return null;
+  return jsxRuntime.jsxs("span", {
+    css: {
+      display: "inline-flex",
+      position: "relative",
+      flexShrink: 0,
+      verticalAlign: "middle"
+    },
+    children: [children, jsxRuntime.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 jsxRuntime.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 ${tableTheme.darkGray}`,
+      "&:disabled": {
+        borderColor: tableTheme.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 && jsxRuntime.jsx("span", {
+      css: {
+        marginRight: `calc(var(--spacing) * 2)`
+      },
+      children: startIcon
+    }), jsxRuntime.jsx("span", {
+      children
+    })]
+  }));
+};
+const Checkbox = (_g) => {
+  var _h = _g, {
+    className: className2
+  } = _h, props = __objRest(_h, [
+    "className"
+  ]);
+  return jsxRuntime.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: [jsxRuntime.jsx("input", __spreadValues({
+      type: "checkbox"
+    }, props)), props.checked ? jsxRuntime.jsx("svg", {
+      css: {
+        fontSize: "1.25rem",
+        width: "1em",
+        height: "1em",
+        fill: "var(--primaryMain)"
+      },
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: jsxRuntime.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"
+      })
+    }) : jsxRuntime.jsx("svg", {
+      css: {
+        fontSize: "1.25rem",
+        width: "1em",
+        height: "1em",
+        fill: "currentColor"
+      },
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: jsxRuntime.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 jsxRuntime.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] = react.useState(false);
+  return jsxRuntime.jsx("div", {
+    className: className2,
+    css: {
+      display: "flex"
+    },
+    children: jsxRuntime.jsxs("span", {
+      css: [{
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        border: `1px solid ${tableTheme.darkGray}`,
+        borderRadius: 4
+      }, focus && {
+        border: "2px solid var(--primaryMain)",
+        margin: -1
+      }],
+      children: [jsxRuntime.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: tableTheme.Popover,
+  Button,
+  Badge,
+  TextField,
+  Spinner
+};
+const IconDefaultStyle = react$2.css({
+  width: "1.5em",
+  height: "1.5em",
+  color: "inherit"
+});
+function Icon(svg) {
+  return (props) => jsxRuntime.jsx(react$2.ClassNames, {
+    children: ({
+      css: css2
+    }) => react.cloneElement(svg, __spreadProps(__spreadValues({}, props), {
+      className: css2(IconDefaultStyle, props.className)
+    }))
+  });
+}
+const Settings = Icon(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.jsx("path", {
+    d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+  })]
+}));
+const Export = Icon(jsxRuntime.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: [jsxRuntime.jsx("g", {
+    children: jsxRuntime.jsx("rect", {
+      fill: "none",
+      height: "24",
+      width: "24"
+    })
+  }), jsxRuntime.jsx("g", {
+    children: jsxRuntime.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(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.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(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.jsx("path", {
+    d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
+  })]
+}));
+const Search = Icon(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.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(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.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(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.jsx("path", {
+    d: "M7 10l5 5 5-5H7z"
+  })]
+}));
+const FilterList = Icon(jsxRuntime.jsx("svg", {
+  viewBox: "0 0 24 24",
+  children: jsxRuntime.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(jsxRuntime.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor",
+  children: [jsxRuntime.jsx("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), jsxRuntime.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 react$1.Store(void 0);
+function useTheme(selector) {
+  var _a, _b;
+  const contextTableTheme = react.useContext(tableTheme.TableThemeContext);
+  const table = react.useContext(TableContext);
+  const columnId = react.useContext(ColumnContext);
+  const memo = 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) ? memo("theme.classes.cell", cell) : cell
+      }),
+      text: __spreadProps(__spreadValues({}, t.text), {
+        selected: selected instanceof Function || Array.isArray(selected) ? memo("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 = tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme, localTheme, columnsTheme);
+    return selector(process(theme2));
+  })) != null ? _a : emptyStore.useState()) != null ? _b : selector(process(tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme)));
+  return theme;
+}
+function AutoFocusTextField(props) {
+  const TextField2 = useTheme((t) => t.components.TextField);
+  const ref = react.useRef(null);
+  const {
+    visible
+  } = react.useContext(tableTheme.PopoverContext);
+  react.useLayoutEffect(() => {
+    if (visible && ref.current) {
+      ref.current.focus();
+    }
+  }, [visible]);
+  return jsxRuntime.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 = (e) => {
+  const all = Array.from(document.querySelectorAll(`.${className}`));
+  const index = all.indexOf(e);
+  const next = all[(index + 1) % all.length];
+  if (next instanceof HTMLElement) {
+    next.focus();
+  }
+};
+function DateInput({
+  value,
+  onChange,
+  locale
+}) {
+  const [override, setOverride] = react.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 = react.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 jsxRuntime.jsx("div", {
+    css: {
+      display: "flex",
+      alignItems: "baseline"
+    },
+    children: parts.map(({
+      type,
+      value: value2
+    }, index) => jsxRuntime.jsx(react.Fragment, {
+      children: isIncludedType(type) ? jsxRuntime.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: (e) => {
+          setOverride({
+            type,
+            value: e.target.value
+          });
+          if (e.target.value.length >= maxLengths[type]) {
+            setTimeout(() => tabNext(e.target));
+          }
+        },
+        onFocus: (e) => e.target.select(),
+        onBlur: commit
+      }) : type === "literal" ? jsxRuntime.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] = react.useState(new Date());
+  const [dateInView, setDateInView] = react.useState(baseDate);
+  const [dirty, setDirty] = react.useState();
+  const [hovered, setHovered] = react.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
+  } = dayzed.useDayzed({
+    onDateSelected: () => void 0,
+    firstDayOfWeek,
+    showOutsideDays: true,
+    date: dateInView,
+    onOffsetChanged: (offset) => setDateInView(new Date(dateInView.getFullYear(), dateInView.getMonth() + offset)),
+    offset: 0
+  });
+  const formatWeekday = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      weekday: "short"
+    });
+    return (weekDay) => format(new Date(Date.UTC(2021, 5, weekDay)));
+  }, [locale]);
+  react.useEffect(() => setDateInView(value === null ? new Date() : value instanceof Date ? value : value.max), [value]);
+  react.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 = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      month: "long"
+    });
+    return (month) => format(new Date(2021, month));
+  }, [locale]);
+  const formatYear = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      year: "numeric"
+    });
+    return (year) => format(new Date(year, 0, 1));
+  }, [locale]);
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
+      css: {
+        display: "grid",
+        gridAutoFlow: "column",
+        justifyContent: "center",
+        alignItems: "baseline",
+        gap: "var(--spacing)"
+      },
+      children: [jsxRuntime.jsx(DateInput, {
+        value: min != null ? min : null,
+        onChange: (date) => set(date != null ? date : void 0, max, "min"),
+        locale
+      }), rangeSelect && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [" - ", jsxRuntime.jsx(DateInput, {
+          value: max != null ? max : null,
+          onChange: (date) => set(min, date != null ? date : void 0, "max"),
+          locale
+        })]
+      })]
+    }), calendars.map(({
+      month,
+      year,
+      weeks
+    }) => jsxRuntime.jsxs("div", {
+      css: {
+        display: "grid"
+      },
+      children: [jsxRuntime.jsxs("div", {
+        css: {
+          margin: "calc(var(--spacing) * 4) 0",
+          display: "grid",
+          gridAutoFlow: "column",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getBackProps({
+          calendars
+        })), {
+          children: jsxRuntime.jsx(ChevronRight2, {
+            css: {
+              transform: "rotate3d(0, 0, 1, 180deg)"
+            }
+          })
+        })), jsxRuntime.jsxs("div", {
+          css: {
+            display: "flex"
+          },
+          children: [formatMonth(month), " ", formatYear(year)]
+        }), jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getForwardProps({
+          calendars
+        })), {
+          children: jsxRuntime.jsx(ChevronRight2, {})
+        }))]
+      }), jsxRuntime.jsxs("div", {
+        css: {
+          justifySelf: "center",
+          display: "grid",
+          gridTemplateColumns: "repeat(7, max-content)",
+          fontWeight: "bold"
+        },
+        children: [weekDays.map((_v, weekDay) => jsxRuntime.jsx("div", {
+          css: {
+            justifySelf: "center",
+            marginBottom: "var(--spacing)"
+          },
+          children: formatWeekday(weekDay)
+        }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
+          if (!dateObj) {
+            return jsxRuntime.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 jsxRuntime.jsx("button", __spreadProps(__spreadValues({
+            css: [{
+              padding: 10,
+              border: "1px solid transparent",
+              background: "transparent",
+              cursor: "pointer"
+            }, (prevMonth || nextMonth) && {
+              color: tableTheme.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}`)), jsxRuntime.jsxs("div", {
+      css: {
+        marginTop: "var(--spacing)",
+        display: "grid",
+        gridAutoFlow: "column",
+        justifyContent: "center"
+      },
+      children: [jsxRuntime.jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(today());
+        },
+        children: textToday
+      }), jsxRuntime.jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(thisWeek(firstDayOfWeek));
+        },
+        children: textThisWeek
+      }), jsxRuntime.jsx(Button2, {
+        variant: "text",
+        onClick: () => {
+          setDirty(void 0);
+          onChange(null);
+        },
+        children: textReset
+      })]
     })]
-  }));
+  });
 }
-const TableContext = react.createContext(null);
-const ColumnContext = react.createContext(null);
-function useTableContext() {
-  const value = react.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 = react.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 jsxRuntime.jsx(TableContext.Provider, {
-    value: table,
-    children: jsxRuntime.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] = react.useState(false);
-  react.useEffect(() => {
-    const handle = setTimeout(() => setShowLoading(true), 500);
-    return () => clearTimeout(handle);
-  });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!isHydrated && showLoading && jsxRuntime.jsx("div", {
-      children: text.loading
-    }), jsxRuntime.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 jsxRuntime.jsx("div", {
+    css: {
+      padding: "calc(var(--spacing) * 2)",
+      display: "grid"
+    },
+    children: jsxRuntime.jsx(DatePicker, {
+      rangeSelect: !singleSelect,
+      value,
+      onChange,
+      locale,
+      firstDayOfWeek
+    })
   });
 }
-const TableInner = react.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 jsxRuntime.jsx(Virtualized, {
-    className: classes == null ? void 0 : classes.table,
-    css: [cssVariables, tableTheme.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: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.headerCell,
-        css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
-      }), jsxRuntime.jsxs("div", {
-        className: classes == null ? void 0 : classes.headerCell,
-        css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-        children: [enableSelection && jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && jsxRuntime.jsx(ColumnSelection, {}), enableExport && jsxRuntime.jsx(Export, {}), jsxRuntime.jsx(ResizeHandleView, {})]
-      }), jsxRuntime.jsx(ColumnHeaderContext.Provider, {
-        children: activeColumns.map((column) => {
-          var _a2;
-          return jsxRuntime.jsx(ColumnContext.Provider, {
-            value: column.id,
-            children: jsxRuntime.jsxs(ColumnHeader, {
-              className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
-              css: [tableTheme.defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-              children: [jsxRuntime.jsx(SortComponent, {
-                children: column.header
-              }), jsxRuntime.jsx("div", {
-                css: {
-                  flex: 1
-                }
-              }), jsxRuntime.jsx(FilterControl, {}), jsxRuntime.jsx(ResizeHandle, {})]
-            }, column.id)
-          }, column.id);
-        })
-      }), jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.headerCell,
-        css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
-      })]
-    }),
-    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsxRuntime.jsx(Row, {
-      itemId,
-      rowIndex: startIndex + index
-    }, itemId))
-  });
-});
 function toggle(set, value, singleSelect) {
   const newSet = new Set(singleSelect ? [] : set);
   if (set.has(value)) {
@@ -2076,46 +2591,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] = react.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) {
@@ -2125,6 +2624,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.value), item.value))));
+  });
+  const [query, setQuery] = react.useState("");
+  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
   return jsxRuntime.jsxs("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
@@ -2134,9 +2643,9 @@ function SelectFilter(_g) {
     children: [jsxRuntime.jsx(AutoFocusTextField, {
       value: query,
       onChange: (e) => setQuery(e.target.value),
-      endIcon: jsxRuntime.jsx(IconButton, {
+      endIcon: jsxRuntime.jsx(IconButton2, {
         onClick: () => setQuery(""),
-        children: !query ? jsxRuntime.jsx(Search, {}) : jsxRuntime.jsx(Clear, {})
+        children: !query ? jsxRuntime.jsx(Search2, {}) : jsxRuntime.jsx(Clear2, {})
       }),
       css: {
         marginBottom: "var(--spacing)"
@@ -2148,16 +2657,16 @@ function SelectFilter(_g) {
       },
       children: [jsxRuntime.jsx(FormControlLabel, {
         disabled: value.size === 0,
-        control: jsxRuntime.jsx(Checkbox, {
+        control: jsxRuntime.jsx(Checkbox2, {
           disabled: value.size === 0,
           checked: value.size > 0,
           onChange: () => onChange(/* @__PURE__ */ new Set())
         }),
         label: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: ["<", text.selected(value.size), ">"]
+          children: ["<", selected(value.size), ">"]
         })
       }), filtered.map((option, index) => jsxRuntime.jsx(FormControlLabel, {
-        control: jsxRuntime.jsx(Checkbox, {
+        control: jsxRuntime.jsx(Checkbox2, {
           checked: value.has(option),
           onChange: () => onChange(toggle(value, option, singleSelect))
         }),
@@ -2167,7 +2676,7 @@ function SelectFilter(_g) {
       css: {
         textAlign: "center"
       },
-      children: text.noResults
+      children: noResults
     })]
   });
 }
@@ -2198,6 +2707,8 @@ function debounce(fn, ms) {
 function useFilter(impl) {
   const table = useTableContext();
   const columnId = useColumnContext();
+  const cache = useTableMemo();
+  const filterBy = impl.filterBy && cache("", impl.filterBy);
   react.useEffect(() => {
     table.update((state) => {
       if (impl.defaultValue !== void 0) {
@@ -2207,7 +2718,7 @@ function useFilter(impl) {
   }, []);
   react.useEffect(() => {
     table.update((state) => {
-      state.filters.set(columnId, immer.castDraft(impl));
+      state.filters.set(columnId, immer.castDraft(__spreadProps(__spreadValues({}, impl), { filterBy })));
       if (impl.value !== void 0) {
         state.filterValues.set(columnId, impl.value);
       }
@@ -2242,7 +2753,8 @@ function useFilter(impl) {
   return {
     value: dirtyValue != null ? dirtyValue : value,
     onChange,
-    close: react.useContext(FilterControlContext)
+    close: react.useContext(FilterControlContext),
+    filterBy: filterBy != null ? filterBy : (x) => x
   };
 }
 const textMatch = (text, query) => {
@@ -2264,23 +2776,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
@@ -2302,9 +2808,9 @@ function TextFilter(_i) {
     children: jsxRuntime.jsx(AutoFocusTextField, {
       value,
       onChange: (e) => onChange(e.target.value),
-      endIcon: jsxRuntime.jsx(IconButton, {
+      endIcon: jsxRuntime.jsx(IconButton2, {
         onClick: () => onChange(""),
-        children: !value ? jsxRuntime.jsx(Search, {}) : jsxRuntime.jsx(Clear, {})
+        children: !value ? jsxRuntime.jsx(Search2, {}) : jsxRuntime.jsx(Clear2, {})
       })
     })
   });