schummar-table 0.44.0 → 0.45.0

package/dist/index.cjs

@@ -81,6 +81,7 @@ var src_exports = {};
 __export(src_exports, {
   AutoFocusTextField: () => AutoFocusTextField,
   ColumnContext: () => ColumnContext,
+  CombinedFilter: () => CombinedFilter,
   DateFilter: () => DateFilter,
   DatePicker: () => DatePicker,
   DatePickerProvider: () => DatePickerProvider,
@@ -129,12 +130,12 @@ var react = function equal(a, b) {
   if (a && b && typeof a == "object" && typeof b == "object") {
     if (a.constructor !== b.constructor)
       return false;
-    var length2, i, keys;
+    var length3, i, keys;
     if (Array.isArray(a)) {
-      length2 = a.length;
-      if (length2 != b.length)
+      length3 = a.length;
+      if (length3 != b.length)
         return false;
-      for (i = length2; i-- !== 0; )
+      for (i = length3; i-- !== 0; )
         if (!equal(a[i], b[i]))
           return false;
       return true;
@@ -159,10 +160,10 @@ var react = function equal(a, b) {
       return true;
     }
     if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      length2 = a.length;
-      if (length2 != b.length)
+      length3 = a.length;
+      if (length3 != b.length)
         return false;
-      for (i = length2; i-- !== 0; )
+      for (i = length3; i-- !== 0; )
         if (a[i] !== b[i])
           return false;
       return true;
@@ -174,13 +175,13 @@ var react = function equal(a, b) {
     if (a.toString !== Object.prototype.toString)
       return a.toString() === b.toString();
     keys = Object.keys(a);
-    length2 = keys.length;
-    if (length2 !== Object.keys(b).length)
+    length3 = keys.length;
+    if (length3 !== Object.keys(b).length)
       return false;
-    for (i = length2; i-- !== 0; )
+    for (i = length3; i-- !== 0; )
       if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
         return false;
-    for (i = length2; i-- !== 0; ) {
+    for (i = length3; i-- !== 0; ) {
       var key = keys[i];
       if (key === "_owner" && a.$$typeof) {
         continue;
@@ -610,11 +611,11 @@ var defaultColors = {
 // src/components/spinnner.tsx
 var import_react3 = require("@emotion/react");
 var import_jsx_runtime = require("@emotion/react/jsx-runtime");
-function Spinner({ className: className2 }) {
+function Spinner({ className: className3 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: className2,
+      className: className3,
       css: import_react3.css`
         display: inline-block;
         position: relative;
@@ -776,7 +777,7 @@ var Button = (_a) => {
 // src/theme/defaultTheme/checkbox.tsx
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var Checkbox = (_a) => {
-  var _b = _a, { className: className2 } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { className: className3 } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "label",
     {
@@ -793,7 +794,7 @@ var Checkbox = (_a) => {
         },
         props.disabled && { color: "rgba(0, 0, 0, 0.26)" }
       ],
-      className: className2,
+      className: className3,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", __spreadValues({ type: "checkbox" }, props)),
         props.checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -949,7 +950,7 @@ var Popover = ({
   hidden,
   onClose,
   children,
-  className: className2,
+  className: className3,
   backdropClassName,
   align
 }) => {
@@ -1048,7 +1049,7 @@ var Popover = ({
           "div",
           {
             ref: popper,
-            className: className2,
+            className: className3,
             css: [
               defaultClasses.card,
               __spreadProps(__spreadValues({
@@ -1079,7 +1080,7 @@ var TextField = (_a) => {
   var _b = _a, {
     startIcon,
     endIcon,
-    className: className2,
+    className: className3,
     inputRef,
     onBlur
   } = _b, props = __objRest(_b, [
@@ -1094,7 +1095,7 @@ var TextField = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: className2,
+      className: className3,
       css: [
         {
           flex: 1,
@@ -1657,7 +1658,7 @@ var castArray = (a) => Array.isArray(a) ? a : [a];
 var cx = (...classNames) => classNames.flatMap((entry) => {
   if (!entry) return [];
   if (typeof entry === "string") return [entry];
-  return Object.entries(entry).filter(([, predicate]) => predicate).map(([className2]) => className2);
+  return Object.entries(entry).filter(([, predicate]) => predicate).map(([className3]) => className3);
 }).join(" ");
 function isTruthy(x) {
   return !!x;
@@ -1921,9 +1922,86 @@ function useFilter(impl) {
   }, context);
 }
 
+// src/components/combinedFilter.tsx
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+function CombinedFilter(_a) {
+  var _b = _a, {
+    columnIds: inputColumnIds
+  } = _b, props = __objRest(_b, [
+    "columnIds"
+  ]);
+  const table = useTableContext();
+  const columnIds = table.useState((state) => {
+    return inputColumnIds != null ? inputColumnIds : state.activeColumns.filter(
+      (column) => column.filter !== void 0 && !state.visibleColumns.some((c) => c.id === column.id)
+    ).map((column) => column.id);
+  });
+  const isActive = table.useState((state) => {
+    return columnIds.some((columnId) => {
+      const filter = state.filters.get(columnId);
+      const filterValue = state.filterValues.get(columnId);
+      return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
+    });
+  });
+  useFilter(__spreadProps(__spreadValues({}, props), {
+    id: "combinedFilter",
+    value: isActive,
+    isActive(filterValue) {
+      return filterValue;
+    },
+    test() {
+      return true;
+    },
+    onChange(value) {
+      var _a2;
+      if (value === void 0) {
+        for (const columnId of columnIds) {
+          const impl = table.getState().filters.get(columnId);
+          (_a2 = impl == null ? void 0 : impl.onChange) == null ? void 0 : _a2.call(impl, void 0);
+          if ((impl == null ? void 0 : impl.value) === void 0) {
+            table.update((state) => {
+              state.filterValues.delete(columnId);
+            });
+          }
+        }
+      }
+    }
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: columnIds.map((columnId) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FilterControl, { component: Filter }) }, columnId)) });
+}
+function Filter(_a) {
+  var _b = _a, { isActive } = _b, props = __objRest(_b, ["isActive"]);
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const FilterList2 = useTheme((t2) => t2.icons.FilterList);
+  const label = table.useState((state) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a2.header) != null ? _b2 : null;
+  });
+  const Button2 = useTheme((t2) => t2.components.Button);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Button2,
+    __spreadProps(__spreadValues({}, props), {
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        FilterList2,
+        {
+          css: {
+            color: isActive ? "var(--primaryMain)" : "#b0bac9"
+          }
+        }
+      ),
+      css: {
+        width: "100%",
+        color: isActive ? "var(--primaryMain)" : "var(--color-text)"
+      },
+      children: label
+    })
+  );
+}
+
 // src/components/datePicker.tsx
 var import_dayzed = require("dayzed");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/misc/defaults.ts
 function defaults(first, ...more) {
@@ -1939,7 +2017,7 @@ function defaults(first, ...more) {
 
 // src/components/dateInput.tsx
 var import_react17 = require("react");
-var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
 var className = "schummar-table-date-input";
 var defaultDate = new Date(1970, 0, 1);
 var isIncludedType = (type) => type === "day" || type === "month" || type === "year";
@@ -1962,11 +2040,7 @@ var tabNext = (event) => {
     next.focus();
   }
 };
-function DateInput({
-  value,
-  onChange,
-  locale
-}) {
+function DateInput({ value, onChange, locale }) {
   const [override, setOverride] = (0, import_react17.useState)();
   const commit = () => {
     if (!override) {
@@ -2007,14 +2081,14 @@ function DateInput({
   );
   const parts = format.formatToParts(value != null ? value : defaultDate);
   const isEmpty = !value;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       css: {
         display: "flex",
         alignItems: "baseline"
       },
-      children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react17.Fragment, { children: isIncludedType(type) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react17.Fragment, { children: isIncludedType(type) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "input",
         {
           className,
@@ -2049,29 +2123,142 @@ function DateInput({
           onFocus: (event) => event.target.select(),
           onBlur: commit
         }
-      ) : type === "literal" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: value2 }) : null }, index))
+      ) : type === "literal" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: value2 }) : null }, index))
     }
   );
 }
 
 // src/components/text.tsx
-var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
 function Text({ id }) {
   const text = useTheme((t2) => t2.text[id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: text });
+}
+
+// src/components/timeInput.tsx
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var className2 = "schummar-table-time-input";
+var defaultDate2 = new Date(1970, 0, 1);
+var isIncludedType2 = (type) => type === "hour" || type === "minute" || type === "second";
+var defaultLengths2 = {
+  hour: 2,
+  minute: 2,
+  second: 2
+};
+var maxLengths2 = {
+  hour: 2,
+  minute: 2,
+  second: 2
+};
+var length2 = (type, value) => Math.max(value.length, defaultLengths2[type]);
+var tabNext2 = (event) => {
+  const all = Array.from(document.querySelectorAll(`.${className2}`));
+  const index = all.indexOf(event);
+  const next = all[(index + 1) % all.length];
+  if (next instanceof HTMLElement) {
+    next.focus();
+  }
+};
+function TimeInput({ value, onChange, locale, showSeconds = true }) {
+  const [override, setOverride] = (0, import_react18.useState)();
+  const commit = () => {
+    if (!override) {
+      return;
+    }
+    setOverride(void 0);
+    if (!override.value) {
+      onChange(null);
+      return;
+    }
+    const newValue = value ? new Date(value) : /* @__PURE__ */ new Date();
+    switch (override.type) {
+      case "hour": {
+        newValue.setHours(Number(override.value));
+        break;
+      }
+      case "minute": {
+        newValue.setMinutes(Number(override.value));
+        break;
+      }
+      case "second": {
+        newValue.setSeconds(Number(override.value));
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    onChange(newValue);
+  };
+  const format = (0, import_react18.useMemo)(
+    () => new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: showSeconds ? "2-digit" : void 0
+    }),
+    [locale]
+  );
+  const parts = format.formatToParts(value != null ? value : defaultDate2);
+  const isEmpty = !value;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      css: {
+        display: "flex",
+        alignItems: "baseline"
+      },
+      children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react18.Fragment, { children: isIncludedType2(type) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        {
+          className: className2,
+          css: {
+            boxSizing: "content-box",
+            overflow: "visible",
+            border: "none",
+            borderBottom: "2px solid transparent",
+            outline: "none",
+            fontSize: "inherit",
+            backgroundColor: "inherit",
+            color: "inherit",
+            "::placeholder": {
+              color: "inherit",
+              opacity: 0.5
+            },
+            "&:focus": {
+              borderBottom: "2px solid var(--primaryMain)"
+            }
+          },
+          style: {
+            width: `${length2(type, value2)}ch`
+          },
+          placeholder: "".padEnd(length2(type, value2), "0"),
+          value: (override == null ? void 0 : override.type) === type ? override.value : !isEmpty ? value2 : "",
+          onChange: (event) => {
+            setOverride({ type, value: event.target.value });
+            if (event.target.value.length >= maxLengths2[type]) {
+              setTimeout(() => tabNext2(event.target));
+            }
+          },
+          onFocus: (event) => event.target.select(),
+          onBlur: commit
+        }
+      ) : type === "literal" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: value2 }) : null }, index))
+    }
+  );
 }
 
 // src/components/datePicker.tsx
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
-var DatePickerContext = (0, import_react18.createContext)({});
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var DatePickerContext = (0, import_react19.createContext)({});
 function DatePickerProvider(_a) {
   var _b = _a, {
     children
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  const value = (0, import_react18.useMemo)(() => props, [JSON.stringify(props)]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DatePickerContext.Provider, { value, children });
+  const value = (0, import_react19.useMemo)(() => props, [JSON.stringify(props)]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DatePickerContext.Provider, { value, children });
 }
 var weekDays = [0, 1, 2, 3, 4, 5, 6];
 var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -2149,12 +2336,12 @@ var getCalendarWeek = (date) => {
   return weekOfYear;
 };
 var commonQuickOptions = {
-  today: { label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "today" }), value: today },
-  thisWeek: { label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "thisWeek" }), value: (props) => thisWeek(0, props.firstDayOfWeek) },
-  thisMonth: { label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "thisMonth" }), value: () => thisMonth() },
-  thisYear: { label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "thisYear" }), value: () => thisYear() },
-  lastSevenDays: { label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "lastSevenDays" }), value: () => lastDays(7) },
-  lastThirtyDays: { label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "lastThirtyDays" }), value: () => lastDays(30) }
+  today: { label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "today" }), value: today },
+  thisWeek: { label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "thisWeek" }), value: (props) => thisWeek(0, props.firstDayOfWeek) },
+  thisMonth: { label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "thisMonth" }), value: () => thisMonth() },
+  thisYear: { label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "thisYear" }), value: () => thisYear() },
+  lastSevenDays: { label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "lastSevenDays" }), value: () => lastDays(7) },
+  lastThirtyDays: { label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "lastThirtyDays" }), value: () => lastDays(30) }
 };
 function dateIntersect(a, b) {
   if (a instanceof Date) {
@@ -2189,7 +2376,7 @@ function getValueForComparison(value) {
 }
 function DatePicker(props) {
   var _a;
-  const context = (0, import_react18.useContext)(DatePickerContext);
+  const context = (0, import_react19.useContext)(DatePickerContext);
   const {
     value,
     rangeSelect,
@@ -2201,7 +2388,8 @@ function DatePicker(props) {
     minDate,
     maxDate,
     showCalendarWeek,
-    blockedRanges = []
+    blockedRanges = [],
+    showTime
   } = defaults(props, context);
   function onChange(value2, source) {
     if (value2 instanceof Date) {
@@ -2269,10 +2457,10 @@ function DatePicker(props) {
       }
     ];
   }
-  const mountTime = (0, import_react18.useMemo)(() => /* @__PURE__ */ new Date(), []);
-  const [dirty, setDirty] = (0, import_react18.useState)();
-  const [hovered, setHovered] = (0, import_react18.useState)();
-  const [dateInViewLocal, setDateInViewLocal] = (0, import_react18.useState)(defaultDateInView != null ? defaultDateInView : mountTime);
+  const mountTime = (0, import_react19.useMemo)(() => /* @__PURE__ */ new Date(), []);
+  const [dirty, setDirty] = (0, import_react19.useState)();
+  const [hovered, setHovered] = (0, import_react19.useState)();
+  const [dateInViewLocal, setDateInViewLocal] = (0, import_react19.useState)(defaultDateInView != null ? defaultDateInView : mountTime);
   const dateInView = (_a = props.dateInView) != null ? _a : dateInViewLocal;
   function setDateInView(date) {
     var _a2;
@@ -2283,7 +2471,7 @@ function DatePicker(props) {
   const max = dirty ? dirty.max : value instanceof Date ? value : value == null ? void 0 : value.max;
   const resolvedQuickOptions = [
     ...quickOptions,
-    ...noReset ? [] : [{ label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "reset" }), value: null }]
+    ...noReset ? [] : [{ label: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "reset" }), value: null }]
   ].map((option, index) => {
     if (option instanceof Function) {
       return option((value3) => {
@@ -2292,7 +2480,7 @@ function DatePicker(props) {
       });
     }
     const { label, value: value2 } = typeof option === "string" ? commonQuickOptions[option] : option;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Button2,
       {
         variant: "text",
@@ -2323,18 +2511,18 @@ function DatePicker(props) {
     minDate,
     maxDate
   });
-  const now = (0, import_react18.useMemo)(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const formatWeekday = (0, import_react18.useMemo)(() => {
+  const now = (0, import_react19.useMemo)(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const formatWeekday = (0, import_react19.useMemo)(() => {
     const { format } = new Intl.DateTimeFormat(locale, { weekday: "short" });
     return (weekDay) => format(new Date(Date.UTC(2021, 7, (weekDay + firstDayOfWeek) % 7 + 1)));
   }, [locale, firstDayOfWeek]);
-  (0, import_react18.useEffect)(
+  (0, import_react19.useEffect)(
     () => setDateInView(
       value === null ? defaultDateInView != null ? defaultDateInView : mountTime : value instanceof Date ? value : value.max
     ),
     [getValueForComparison(value), getValueForComparison(defaultDateInView), mountTime]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!rangeSelect) {
       setDirty(void 0);
     }
@@ -2360,15 +2548,15 @@ function DatePicker(props) {
       setDirty({ min: min2, max: max2 });
     }
   }
-  const formatMonth = (0, import_react18.useMemo)(() => {
+  const formatMonth = (0, import_react19.useMemo)(() => {
     const { format } = new Intl.DateTimeFormat(locale, { month: "long" });
     return (month) => format(new Date(2021, month));
   }, [locale]);
-  const formatYear = (0, import_react18.useMemo)(() => {
+  const formatYear = (0, import_react19.useMemo)(() => {
     const { format } = new Intl.DateTimeFormat(locale, { year: "numeric" });
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       css: [
@@ -2378,41 +2566,68 @@ function DatePicker(props) {
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             css: {
               display: "grid",
               gridAutoFlow: "column",
               justifyContent: "center",
-              alignItems: "baseline",
-              gap: "var(--spacing)"
+              alignItems: "center",
+              gap: "calc(var(--spacing) * 4)",
+              "& > div": {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center"
+              }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                DateInput,
-                {
-                  value: min != null ? min : null,
-                  onChange: (date) => set("input", date != null ? date : void 0, max, "min"),
-                  locale
-                }
-              ),
-              rangeSelect && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-                " - ",
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   DateInput,
                   {
-                    value: max != null ? max : null,
-                    onChange: (date) => set("input", min, date != null ? date : void 0, "max"),
+                    value: min != null ? min : null,
+                    onChange: (date) => set("input", date != null ? date : void 0, max, "min"),
                     locale
                   }
+                ),
+                showTime && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  TimeInput,
+                  {
+                    value: min != null ? min : null,
+                    onChange: (date) => set("input", date != null ? date : void 0, max, "min"),
+                    locale,
+                    showSeconds: typeof showTime === "boolean" ? true : showTime.showSeconds
+                  }
                 )
+              ] }),
+              rangeSelect && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                " - ",
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    DateInput,
+                    {
+                      value: max != null ? max : null,
+                      onChange: (date) => set("input", min, date != null ? date : void 0, "max"),
+                      locale
+                    }
+                  ),
+                  showTime && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    TimeInput,
+                    {
+                      value: max != null ? max : null,
+                      onChange: (date) => set("input", min, date != null ? date : void 0, "max"),
+                      locale,
+                      showSeconds: typeof showTime === "boolean" ? true : showTime.showSeconds
+                    }
+                  )
+                ] })
               ] })
             ]
           }
         ),
-        calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: { display: "grid" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { css: { display: "grid" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "div",
             {
               css: {
@@ -2423,17 +2638,17 @@ function DatePicker(props) {
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: { display: "flex" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { css: { display: "flex" }, children: [
                   formatMonth(month),
                   " ",
                   formatYear(year)
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronRight2, {}) }))
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRight2, {}) }))
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "div",
             {
               css: {
@@ -2442,7 +2657,7 @@ function DatePicker(props) {
                 gridTemplateColumns: "repeat(8, max-content)"
               },
               children: [
-                showCalendarWeek ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                showCalendarWeek ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "div",
                   {
                     css: {
@@ -2450,10 +2665,10 @@ function DatePicker(props) {
                       padding: 10,
                       borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "calendarWeek" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { id: "calendarWeek" })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}),
-                weekDays.map((_v, weekDay) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {}),
+                weekDays.map((_v, weekDay) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "div",
                   {
                     css: {
@@ -2468,8 +2683,8 @@ function DatePicker(props) {
                   const weekStart = week[0];
                   const weekEnd = week[6];
                   const weekDisabled = !rangeSelect || minDate && weekEnd.date < minDate || maxDate && weekStart.date > maxDate;
-                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react18.Fragment, { children: [
-                    showCalendarWeek ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react19.Fragment, { children: [
+                    showCalendarWeek ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2494,10 +2709,10 @@ function DatePicker(props) {
                         onPointerOut: () => !weekDisabled && setHovered(void 0),
                         children: getCalendarWeek(weekEnd.date)
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}),
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {}),
                     week.map((dateObject, dayIndex) => {
                       if (!dateObject) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}, dayIndex);
+                        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {}, dayIndex);
                       }
                       const { prevMonth, nextMonth, date } = dateObject;
                       const today2 = startOfDay(date).getTime() === now.getTime();
@@ -2508,7 +2723,7 @@ function DatePicker(props) {
                         min <= hovered.min ? { min, max: hovered.min } : { min: hovered.max, max: min }
                       ));
                       const blocked = blockedRanges.some((range) => dateIntersect(date, range));
-                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                         "button",
                         __spreadProps(__spreadValues({
                           type: "button",
@@ -2544,7 +2759,7 @@ function DatePicker(props) {
             }
           )
         ] }, `${month}${year}`)),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             css: {
@@ -2562,7 +2777,7 @@ function DatePicker(props) {
 }
 
 // src/components/dateFilter.tsx
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 function convertDate(x) {
   if (x instanceof Date) return x;
   if (typeof x === "number" || typeof x === "string") return new Date(x);
@@ -2614,14 +2829,14 @@ function DateFilter(_a) {
       return dateIntersect(filterValue, value2);
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       css: {
         padding: "calc(var(--spacing) * 2)",
         display: "grid"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         DatePicker,
         {
           rangeSelect: !singleSelect,
@@ -2641,8 +2856,8 @@ function DateFilter(_a) {
 }
 
 // src/components/numberField.tsx
-var import_react19 = require("react");
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
 var Pattern = /^-?\d*(?:[.,]\d*)?$/;
 var printNumber = (value, locale) => {
   if (value === null) {
@@ -2667,8 +2882,8 @@ function NumberField(_a) {
   ]);
   const locale = useTheme((t2) => t2.locale);
   const TextField2 = useTheme((t2) => t2.components.TextField);
-  const [value = printNumber(commitedValue, locale), setValue] = (0, import_react19.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const [value = printNumber(commitedValue, locale), setValue] = (0, import_react20.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     TextField2,
     __spreadProps(__spreadValues({
       value,
@@ -2693,7 +2908,7 @@ function NumberField(_a) {
 }
 
 // src/components/rangeFilter.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
 function RangeFilter(_a) {
   var _b = _a, {
     min,
@@ -2747,7 +2962,7 @@ function RangeFilter(_a) {
       return value2 !== null && value2 >= min2 && value2 <= max2;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       css: {
@@ -2755,7 +2970,7 @@ function RangeFilter(_a) {
         display: "grid",
         gap: "1em"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           css: {
@@ -2767,12 +2982,12 @@ function RangeFilter(_a) {
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               NumberField,
               {
                 value: value == null ? void 0 : value[0],
                 onChange: (newMin) => onChange(normalize(newMin, value == null ? void 0 : value[1], "min", { min, max })),
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMinText }),
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMinText }),
                 placeholder: String(minValue != null ? minValue : ""),
                 css: {
                   alignItems: "baseline"
@@ -2780,12 +2995,12 @@ function RangeFilter(_a) {
               }
             ),
             "-",
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               NumberField,
               {
                 value: value == null ? void 0 : value[1],
                 onChange: (newMax) => onChange(normalize(value == null ? void 0 : value[0], newMax, "max", { min, max })),
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMaxText }),
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMaxText }),
                 placeholder: String(maxValue != null ? maxValue : ""),
                 css: {
                   alignItems: "baseline"
@@ -2815,16 +3030,16 @@ function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFI
 }
 
 // src/components/selectFilter.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/formControlLabel.tsx
-var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
 function FormControlLabel({
   control,
   label,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "label",
     {
       css: [
@@ -2841,14 +3056,14 @@ function FormControlLabel({
       ],
       children: [
         control,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { css: { marginLeft: "var(--spacing)" }, children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { css: { marginLeft: "var(--spacing)" }, children: label })
       ]
     }
   );
 }
 
 // src/components/virtualList.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/misc/throttle.ts
 function throttle2(function_, ms) {
@@ -2889,7 +3104,7 @@ function throttle2(function_, ms) {
 }
 
 // src/components/virtualList.tsx
-var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
 function VirtualList(_a) {
   var _b = _a, {
     virtual = true,
@@ -2901,11 +3116,11 @@ function VirtualList(_a) {
     "children"
   ]);
   var _a2, _b2, _c, _d, _e;
-  const container = (0, import_react20.useRef)(null);
-  const [, setId] = (0, import_react20.useState)({});
+  const container = (0, import_react21.useRef)(null);
+  const [, setId] = (0, import_react21.useState)({});
   const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 16;
-  const update = (0, import_react20.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
-  (0, import_react20.useEffect)(() => {
+  const update = (0, import_react21.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
+  (0, import_react21.useEffect)(() => {
     if (!virtual) return;
     const ro = new ResizeObserver(update);
     if (container.current) {
@@ -2919,7 +3134,7 @@ function VirtualList(_a) {
     };
   }, [update, virtual, throttleScroll]);
   if (!virtual) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       __spreadProps(__spreadValues({}, props), {
         css: {
@@ -2950,7 +3165,7 @@ function VirtualList(_a) {
   ) : 1;
   const before = from * itemHeight;
   const after = (items.length - to) * itemHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, props), {
       onScroll: (event) => {
@@ -2964,9 +3179,9 @@ function VirtualList(_a) {
         display: "grid"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "data-virtual-before": true, style: { height: before } }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-virtual-before": true, style: { height: before } }),
         items.slice(from, to).map((item, index) => children(item, index + from)),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "data-virtual-after": true, style: { height: after } })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-virtual-after": true, style: { height: after } })
       ]
     })
   );
@@ -2980,7 +3195,7 @@ function averageItemHeight(container) {
 }
 
 // src/components/selectFilter.tsx
-var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 function toggle(set, value, singleSelect) {
   const newSet = new Set(singleSelect ? [] : set);
   if (set.has(value)) {
@@ -3038,17 +3253,17 @@ function SelectFilter(_a) {
       )
     );
   });
-  const [query, setQuery] = (0, import_react21.useState)("");
+  const [query, setQuery] = (0, import_react22.useState)("");
   const filtered = options.filter(
     (option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase())
   );
-  const delayedValue = (0, import_react21.useMemo)(() => value, [isActive]);
+  const delayedValue = (0, import_react22.useMemo)(() => value, [isActive]);
   const ordered = filtered.filter((option) => delayedValue.has(option)).concat(filtered.filter((option) => !delayedValue.has(option)));
   const Button2 = useTheme((t2) => t2.components.Button);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setQuery("");
   }, [isActive]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       css: {
@@ -3058,16 +3273,16 @@ function SelectFilter(_a) {
         gap: "var(--spacing)"
       },
       children: [
-        !hideSearchField && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        !hideSearchField && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           AutoFocusTextField,
           {
             value: query,
             onChange: (event) => setQuery(event.target.value),
-            endIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconButton2, { onClick: () => setQuery(""), children: !query ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Search2, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Clear2, {}) }),
+            endIcon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton2, { onClick: () => setQuery(""), children: !query ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Search2, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Clear2, {}) }),
             css: { marginBottom: "var(--spacing)" }
           }
         ),
-        !hideResetButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        !hideResetButton && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Button2,
           {
             disabled: value.size === 0,
@@ -3082,7 +3297,7 @@ function SelectFilter(_a) {
             children: deselectAll
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           VirtualList,
           {
             items: ordered,
@@ -3094,10 +3309,10 @@ function SelectFilter(_a) {
               display: "grid",
               gridTemplateColumns: "minmax(0, 1fr)"
             },
-            children: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            children: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                control: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   Checkbox2,
                   {
                     checked: value.has(option),
@@ -3110,17 +3325,17 @@ function SelectFilter(_a) {
             )
           }
         ),
-        ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { css: { textAlign: "center" }, children: noResults })
+        ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: { textAlign: "center" }, children: noResults })
       ]
     }
   );
 }
 
 // src/components/table.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/internalState/tableStateStorage.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/misc/queue.ts
 var Queue = class {
@@ -3204,9 +3419,9 @@ function parse(value) {
   });
 }
 function useTableStateStorage(table) {
-  const [isHydrated, setIsHydrated] = (0, import_react22.useState)(false);
-  const [q2] = (0, import_react22.useState)(() => new Queue());
-  (0, import_react22.useEffect)(() => {
+  const [isHydrated, setIsHydrated] = (0, import_react23.useState)(false);
+  const [q2] = (0, import_react23.useState)(() => new Queue());
+  (0, import_react23.useEffect)(() => {
     const { persist } = table.getState().props;
     if (!persist) {
       setIsHydrated(true);
@@ -3266,7 +3481,7 @@ function useTableStateStorage(table) {
       isCanceled = true;
     };
   }, [table]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!isHydrated) return;
     return table.subscribe(
       (state) => {
@@ -3327,13 +3542,13 @@ function useTableStateStorage(table) {
 
 // src/internalState/useTableState.ts
 var import_immer6 = require("immer");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/internalState/calcItems.ts
 var import_immer4 = require("immer");
-var import_react23 = require("react");
+var import_react24 = require("react");
 function calcItems(state) {
-  (0, import_react23.useEffect)(
+  (0, import_react24.useEffect)(
     () => state.addReaction(
       (state2) => [
         state2.props.items,
@@ -3452,7 +3667,7 @@ function calcItems(state) {
 }
 
 // src/internalState/calcProps.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/exporters/serializer.ts
 function defaultSerializer(x) {
@@ -3501,7 +3716,7 @@ var defaultProps = {
 };
 function calcProps(props) {
   const cache = useTableMemo();
-  return (0, import_react24.useMemo)(
+  return (0, import_react25.useMemo)(
     () => overrides(defaultProps, calc(props, cache)),
     [props]
   );
@@ -3609,9 +3824,9 @@ function calc(props, cache) {
 }
 
 // src/internalState/cleanupState.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function cleanupState(state) {
-  (0, import_react25.useEffect)(
+  (0, import_react26.useEffect)(
     () => state.addReaction(
       (state2) => [
         state2.props.columns,
@@ -3671,9 +3886,9 @@ function cleanupState(state) {
 }
 
 // src/internalState/filterColumns.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function filterColumns(state) {
-  (0, import_react26.useEffect)(
+  (0, import_react27.useEffect)(
     () => state.addReaction(
       (state2) => [
         state2.props.columns,
@@ -3701,9 +3916,9 @@ function filterColumns(state) {
 }
 
 // src/internalState/normalizeExpanded.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function normalizeExpanded(table) {
-  (0, import_react27.useEffect)(
+  (0, import_react28.useEffect)(
     () => table.addReaction(
       (state) => [state.props.expandOnlyOne, state.expanded, state.itemsById],
       ([expandOnlyOne, , itemsById], state) => {
@@ -3747,9 +3962,9 @@ function normalizeExpanded(table) {
 }
 
 // src/internalState/syncSelections.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 function syncSelections(table) {
-  (0, import_react28.useEffect)(
+  (0, import_react29.useEffect)(
     () => table.addReaction(
       (state) => [state.props.selectSyncChildren, state.selection, state.activeItems],
       ([selectSyncChildren, selection, activeItems], state) => {
@@ -3776,13 +3991,13 @@ function syncSelections(table) {
 
 // src/internalState/watchDisplaySize.ts
 var import_immer5 = require("immer");
-var import_react29 = require("react");
+var import_react30 = require("react");
 var DEFAULT_DISPLAY_SIZES = {
   mobile: 400,
   desktop: Infinity
 };
 function watchDisplaySize(state) {
-  (0, import_react29.useEffect)(
+  (0, import_react30.useEffect)(
     () => state.addReaction(
       (state2) => ({
         displaySizePx: state2.displaySizePx,
@@ -3804,7 +4019,7 @@ function watchDisplaySize(state) {
     ),
     [state]
   );
-  (0, import_react29.useEffect)(
+  (0, import_react30.useEffect)(
     () => state.addReaction(
       (state2) => ({
         props: state2.normalizedProps,
@@ -3823,7 +4038,7 @@ function watchDisplaySize(state) {
 
 // src/internalState/useTableState.ts
 function useTableState(_props) {
-  const [key, setKey] = (0, import_react30.useState)({});
+  const [key, setKey] = (0, import_react31.useState)({});
   const props = calcProps(_props);
   function reset() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -3842,7 +4057,7 @@ function useTableState(_props) {
     }
     (_i = props.onReset) == null ? void 0 : _i.call(props, "table");
   }
-  const state = (0, import_react30.useMemo)(
+  const state = (0, import_react31.useMemo)(
     () => {
       var _a, _b, _c, _d;
       return new Store2({
@@ -3878,7 +4093,7 @@ function useTableState(_props) {
   syncSelections(state);
   cleanupState(state);
   watchDisplaySize(state);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     state.update((state2) => {
       state2.normalizedProps = (0, import_immer6.castDraft)(props);
       if (props.sort) state2.sort = props.sort;
@@ -3897,12 +4112,12 @@ function useTableState(_props) {
 }
 
 // src/components/clearFiltersButton.tsx
-var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 function ClearFiltersButton() {
   const Button2 = useTheme((t2) => t2.components.Button);
   const textClearFilters = useTheme((t2) => t2.text.clearFilters);
   const table = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { css: defaultClasses.clearFiltersButton, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { css: defaultClasses.clearFiltersButton, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Button2,
     {
       variant: "outlined",
@@ -3921,7 +4136,7 @@ function ClearFiltersButton() {
 }
 
 // src/components/columnFooter.tsx
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
 function ColumnFooter() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -3953,7 +4168,7 @@ function ColumnFooter() {
     const column = state.activeColumns.find((column2) => column2.id === columnId);
     return column == null ? void 0 : column.footer;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: cx(classes, columnClasses),
@@ -3972,10 +4187,10 @@ function ColumnFooter() {
 
 // src/components/columnHeader.tsx
 var import_immer7 = require("immer");
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/resizeHandle.tsx
-var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function ResizeHandle() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -4012,7 +4227,7 @@ function ResizeHandle() {
   if (!enabled) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     ResizeHandleView,
     {
       enabled,
@@ -4029,7 +4244,7 @@ function ResizeHandleView(_a) {
   } = _b, props = __objRest(_b, [
     "enabled"
   ]);
-  const className2 = useTheme((theme) => {
+  const className3 = useTheme((theme) => {
     var _a2;
     return (_a2 = theme.classes) == null ? void 0 : _a2.columnDivider;
   });
@@ -4037,10 +4252,10 @@ function ResizeHandleView(_a) {
     var _a2;
     return (_a2 = theme.styles) == null ? void 0 : _a2.columnDivider;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     __spreadValues({
-      className: className2,
+      className: className3,
       css: [
         {
           alignSelf: "stretch",
@@ -4066,7 +4281,7 @@ function ResizeHandleView(_a) {
 }
 
 // src/components/sortComponent.tsx
-var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
 function SortComponent({ children }) {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -4106,7 +4321,7 @@ function SortComponent({ children }) {
     event.preventDefault();
     return false;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       css: {
@@ -4123,8 +4338,8 @@ function SortComponent({ children }) {
       onClick: (event) => toggle2(event),
       onContextMenu: (event) => toggle2(event, true),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Badge2, { badgeContent: sortDisabled ? 0 : index, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge2, { badgeContent: sortDisabled ? 0 : index, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "span",
           {
             css: [
@@ -4132,7 +4347,7 @@ function SortComponent({ children }) {
               !direction && { opacity: 0 },
               direction === "desc" && { transform: "rotate3d(0, 0, 1, 180deg)" }
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpward2, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUpward2, {})
           }
         ) })
       ]
@@ -4141,12 +4356,12 @@ function SortComponent({ children }) {
 }
 
 // src/components/columnHeader.tsx
-var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
 var ColumnHeaderContext = new StoreScope({
   items: /* @__PURE__ */ new Map()
 });
 function ColumnHeader() {
-  const ref = (0, import_react32.useRef)(null);
+  const ref = (0, import_react33.useRef)(null);
   const columnId = useColumnContext();
   const table = useTableContext();
   const enabled = table.useState((state) => state.props.enableColumnReorder);
@@ -4172,9 +4387,9 @@ function ColumnHeader() {
     };
   });
   const store = ColumnHeaderContext.useStore();
-  const draggingStart = (0, import_react32.useRef)();
-  const clone = (0, import_react32.useRef)();
-  (0, import_react32.useEffect)(() => {
+  const draggingStart = (0, import_react33.useRef)();
+  const clone = (0, import_react33.useRef)();
+  (0, import_react33.useEffect)(() => {
     const div = ref.current;
     if (!div) return;
     store.update((state) => {
@@ -4283,7 +4498,7 @@ function ColumnHeader() {
       clone.current = void 0;
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       ref,
@@ -4304,18 +4519,18 @@ function ColumnHeader() {
       onPointerMove: enabled ? onPointerMove : void 0,
       onPointerUp: enabled ? onPointerUp : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SortComponent, { children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: { flex: 1 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FilterControl, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ResizeHandle, {})
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SortComponent, { children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { css: { flex: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FilterControl, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ResizeHandle, {})
       ]
     }
   );
 }
 
 // src/components/columnSelection.tsx
-var import_react34 = require("react");
-var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
 function ColumnSelection() {
   const IconButton2 = useTheme((t2) => t2.components.IconButton);
   const Popover2 = useTheme((t2) => t2.components.Popover);
@@ -4329,10 +4544,10 @@ function ColumnSelection() {
   const classes = useTheme((t2) => t2.classes);
   const cssVariables = useCssVariables();
   const table = useTableContext();
-  const reset = (0, import_react34.useContext)(TableResetContext);
+  const reset = (0, import_react35.useContext)(TableResetContext);
   const columns = table.useState((state) => state.props.columns);
   const hiddenColumns = table.useState((state) => state.hiddenColumns);
-  const [anchorElement, setAnchorElement] = (0, import_react34.useState)(null);
+  const [anchorElement, setAnchorElement] = (0, import_react35.useState)(null);
   const toggle2 = (column, state) => {
     const {
       props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange }
@@ -4353,9 +4568,9 @@ function ColumnSelection() {
     onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
   };
   const allVisible = columns.every((column) => !hiddenColumns.has(column.id));
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton2, { onClick: (event) => setAnchorElement(anchorElement ? null : event.currentTarget), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Settings2, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton2, { onClick: (event) => setAnchorElement(anchorElement ? null : event.currentTarget), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Settings2, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Popover2,
       {
         anchorEl: anchorElement,
@@ -4364,18 +4579,18 @@ function ColumnSelection() {
         css: cssVariables,
         className: classes == null ? void 0 : classes.popover,
         backdropClassName: classes == null ? void 0 : classes.popoverBackdrop,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { css: { padding: `calc(var(--spacing) * 2)`, display: "grid" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: { marginBottom: "var(--spacing)" }, children: selectColumns }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { css: { margin: "0.5em 0", display: "flex", gap: "0.5em" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button2, { variant: "outlined", onClick: () => toggle2(void 0, !allVisible), children: allVisible ? hideAll : showAll }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button2, { variant: "outlined", onClick: reset, children: resetAll })
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { css: { padding: `calc(var(--spacing) * 2)`, display: "grid" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: { marginBottom: "var(--spacing)" }, children: selectColumns }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { css: { margin: "0.5em 0", display: "flex", gap: "0.5em" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button2, { variant: "outlined", onClick: () => toggle2(void 0, !allVisible), children: allVisible ? hideAll : showAll }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button2, { variant: "outlined", onClick: reset, children: resetAll })
           ] }),
           columns.map((column) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                control: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Checkbox2,
                   {
                     checked: !((_a = column.hidden) != null ? _a : hiddenColumns.has(column.id)),
@@ -4395,10 +4610,10 @@ function ColumnSelection() {
 }
 
 // src/components/export.tsx
-var import_react35 = require("react");
-var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 function Export2() {
-  const { exporters: contextExporters } = (0, import_react35.useContext)(TableSettingsContext);
+  const { exporters: contextExporters } = (0, import_react36.useContext)(TableSettingsContext);
   const table = useTableContext();
   const Button2 = useTheme((t2) => t2.components.Button);
   const IconButton2 = useTheme((t2) => t2.components.IconButton);
@@ -4419,7 +4634,7 @@ function Export2() {
     }
     return state.props.enableExport;
   });
-  const [anchor, setAnchor] = (0, import_react35.useState)(null);
+  const [anchor, setAnchor] = (0, import_react36.useState)(null);
   function execute({ action, exporter }) {
     const { activeColumns, activeItems, items } = table.getState();
     const columns = activeColumns.map((column) => column.exportHeader);
@@ -4441,9 +4656,9 @@ function Export2() {
       URL.revokeObjectURL(url);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton2, { onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ExportIcon, { css: !!anchor && { color: "var(--primaryMain)" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton2, { onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExportIcon, { css: !!anchor && { color: "var(--primaryMain)" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Popover2,
       {
         open: !!anchor,
@@ -4452,7 +4667,7 @@ function Export2() {
         css: cssVariables,
         className: classes == null ? void 0 : classes.popover,
         backdropClassName: classes == null ? void 0 : classes.popoverBackdrop,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "div",
           {
             css: {
@@ -4465,11 +4680,11 @@ function Export2() {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { css: { marginBottom: "var(--spacing)" }, children: exportTitle }),
-              exporters.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: { marginBottom: "var(--spacing)" }, children: exportTitle }),
+              exporters.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 Button2,
                 {
-                  startIcon: entry.action === "copy" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Clipboard2, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ExportIcon, {}),
+                  startIcon: entry.action === "copy" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Clipboard2, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExportIcon, {}),
                   onClick: () => execute(entry),
                   children: [
                     entry.action === "copy" ? exportCopy : exportDownload,
@@ -4489,8 +4704,8 @@ function Export2() {
 }
 
 // src/components/row.tsx
-var import_react38 = require("@emotion/react");
-var import_react39 = require("react");
+var import_react39 = require("@emotion/react");
+var import_react40 = require("react");
 
 // src/misc/calcClassNames.ts
 function calcClassNames(classes, item, index) {
@@ -4509,15 +4724,15 @@ function calcCss(styles, item, index) {
 }
 
 // src/components/cell.tsx
-var import_react36 = require("react");
-var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
+var import_react37 = require("react");
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 var defaultWrapCell = (content) => {
   if (typeof content === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { css: defaultClasses.text, title: content, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { css: defaultClasses.text, title: content, children: content });
   }
   return content;
 };
-var Cell = (0, import_react36.memo)(function Cell2({ itemId, rowIndex }) {
+var Cell = (0, import_react37.memo)(function Cell2({ itemId, rowIndex }) {
   var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -4533,25 +4748,25 @@ var Cell = (0, import_react36.memo)(function Cell2({ itemId, rowIndex }) {
   const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
     throttle: 16
   });
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     var _a2, _b;
     return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render cell", itemId, columnId);
   });
-  const className2 = useTheme((t2) => cx(...calcClassNames(t2.classes, item == null ? void 0 : item.value, rowIndex)));
+  const className3 = useTheme((t2) => cx(...calcClassNames(t2.classes, item == null ? void 0 : item.value, rowIndex)));
   const styles = useTheme((t2) => calcCss(t2.styles, item == null ? void 0 : item.value, rowIndex));
   if (!column || !item) return null;
   const content = column.renderCell(column.value(item.value), item.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: className2, css: [defaultClasses.cell, styles], style: columnStyleOverride, children: wrapCell(content, column.value(item.value), item.value, rowIndex) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: className3, css: [defaultClasses.cell, styles], style: columnStyleOverride, children: wrapCell(content, column.value(item.value), item.value, rowIndex) });
 });
 
 // src/components/details.tsx
-var import_react37 = require("react");
-var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
-var Details = (0, import_react37.forwardRef)(function Details2({ itemId, rowIndex }, ref) {
+var import_react38 = require("react");
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var Details = (0, import_react38.forwardRef)(function Details2({ itemId, rowIndex }, ref) {
   const table = useTableContext();
   const classes = useTheme((t2) => t2.classes);
   const styles = useTheme((t2) => t2.styles);
-  const { details, className: className2, css: css4 } = table.useState((state) => {
+  const { details, className: className3, css: css4 } = table.useState((state) => {
     const item = state.activeItemsById.get(itemId);
     return {
       details: state.expanded.has(itemId) ? state.props.rowDetails instanceof Function ? item ? state.props.rowDetails(item.value, rowIndex) : null : state.props.rowDetails : void 0,
@@ -4559,11 +4774,11 @@ var Details = (0, import_react37.forwardRef)(function Details2({ itemId, rowInde
       css: (styles == null ? void 0 : styles.details) instanceof Function ? styles.details(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.details
     };
   });
-  return details ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: className2, css: [defaultClasses.details, css4], children: details }) : null;
+  return details ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: className3, css: [defaultClasses.details, css4], children: details }) : null;
 });
 
 // src/components/expandControl.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 function ExpandControl({
   itemId,
   hasDeferredChildren
@@ -4610,9 +4825,9 @@ function ExpandControl({
     }
   }
   if (isExpanded && hasDeferredChildren && !hasChildren) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Spinner2, { css: { margin: "0 var(--spacing)" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Spinner2, { css: { margin: "0 var(--spacing)" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton2, { onClick: toggle2, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton2, { onClick: toggle2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "span",
     {
       css: {
@@ -4620,13 +4835,13 @@ function ExpandControl({
         transition: "all 300ms",
         transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronRight2, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronRight2, {})
     }
   ) });
 }
 
 // src/components/selectComponent.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 function SelectComponent({ itemId }) {
   const table = useTableContext();
   const Checkbox2 = useTheme((t2) => t2.components.Checkbox);
@@ -4675,7 +4890,7 @@ function SelectComponent({ itemId }) {
       state.lastSelectedId = itemId;
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Checkbox2,
     {
       css: {
@@ -4689,19 +4904,19 @@ function SelectComponent({ itemId }) {
 }
 
 // src/components/row.tsx
-var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
-var Row = (0, import_react39.memo)(function Row2({
+var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+var Row = (0, import_react40.memo)(function Row2({
   itemId,
   rowIndex
 }) {
   var _a;
   const table = useTableContext();
-  const divRef = (0, import_react39.useRef)(null);
-  const detailsDivRef = (0, import_react39.useRef)(null);
+  const divRef = (0, import_react40.useRef)(null);
+  const detailsDivRef = (0, import_react40.useRef)(null);
   const classes = useTheme((t2) => t2.classes);
   const styles = useTheme((t2) => t2.styles);
   const item = table.useState((state) => state.activeItemsById.get(itemId));
-  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", __spreadValues({}, props));
+  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", __spreadValues({}, props));
   const rowClassName = (classes == null ? void 0 : classes.row) instanceof Function ? classes.row(item == null ? void 0 : item.value, rowIndex) : classes == null ? void 0 : classes.row;
   const rowStyles = (styles == null ? void 0 : styles.row) instanceof Function ? styles.row(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.row;
   const subgrid = table.useState((state) => state.props.subgrid);
@@ -4730,7 +4945,7 @@ var Row = (0, import_react39.memo)(function Row2({
       hasDetails: state.props.rowDetails instanceof Function ? item2 ? !!state.props.rowDetails(item2.value, rowIndex) : null : !!state.props.rowDetails
     };
   });
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     function update() {
       table.update((state) => {
         if (!divRef.current) {
@@ -4751,14 +4966,14 @@ var Row = (0, import_react39.memo)(function Row2({
       handles.forEach((h2) => h2());
     };
   }, [table, itemId, divRef.current, detailsDivRef.current]);
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     var _a2, _b;
     return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render row", itemId);
   });
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react38.ClassNames, { children: ({ css: css4 }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: wrapRow(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react39.ClassNames, { children: ({ css: css4 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: wrapRow(
     {
       className: css4([
         subgrid ? {
@@ -4771,8 +4986,8 @@ var Row = (0, import_react39.memo)(function Row2({
         rowClassName,
         rowStyles
       ]),
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
             className: cellClassName,
@@ -4780,22 +4995,22 @@ var Row = (0, import_react39.memo)(function Row2({
             ref: divRef
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             className: cellClassName,
             css: [defaultClasses.cell, defaultClasses.firstCell, css_],
             children: [
-              indent > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { css: { width: indent * 20 } }),
-              enableSelection && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectComponent, { itemId }),
-              (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ExpandControl, { itemId, hasDeferredChildren }),
+              indent > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { css: { width: indent * 20 } }),
+              enableSelection && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectComponent, { itemId }),
+              (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ExpandControl, { itemId, hasDeferredChildren }),
               rowAction
             ]
           }
         ),
-        columnIds.map((columnId) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Cell, { itemId, rowIndex }) }, columnId)),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Details, { ref: detailsDivRef, itemId, rowIndex })
+        columnIds.map((columnId) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Cell, { itemId, rowIndex }) }, columnId)),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Details, { ref: detailsDivRef, itemId, rowIndex })
       ] })
     },
     item.value,
@@ -4804,8 +5019,8 @@ var Row = (0, import_react39.memo)(function Row2({
 });
 
 // src/components/virtualized.tsx
-var import_react40 = require("react");
-var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
+var import_react41 = require("react");
+var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 var findScrollRoot = (x) => {
   const parent = x.parentElement;
   if (!parent) return document.documentElement;
@@ -4831,8 +5046,8 @@ function Virtualized(_a) {
   var _a2, _b2;
   const table = useTableContext();
   const virtual = table.useState((state) => state.props.virtual);
-  const probeRef = (0, import_react40.useRef)(null);
-  const [, setId] = (0, import_react40.useState)({});
+  const probeRef = (0, import_react41.useRef)(null);
+  const [, setId] = (0, import_react41.useState)({});
   const {
     itemIds = [],
     from = 0,
@@ -4884,8 +5099,8 @@ function Virtualized(_a) {
     { throttle: 16 }
   );
   const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 16;
-  const update = (0, import_react40.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
-  (0, import_react40.useEffect)(() => {
+  const update = (0, import_react41.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
+  (0, import_react41.useEffect)(() => {
     var _a3;
     const tableElem = (_a3 = probeRef.current) == null ? void 0 : _a3.parentElement;
     if (!tableElem) return;
@@ -4902,7 +5117,7 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update2, true);
     };
   }, [table, probeRef.current]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!virtual || !probeRef.current) return;
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update, true);
@@ -4911,24 +5126,24 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update, true);
     };
   }, [update, virtual]);
-  (0, import_react40.useEffect)(() => update.cancel, [update]);
-  (0, import_react40.useLayoutEffect)(
+  (0, import_react41.useEffect)(() => update.cancel, [update]);
+  (0, import_react41.useLayoutEffect)(
     () => {
       var _a3, _b3;
       return (_b3 = (_a3 = table.getState().props).debugRender) == null ? void 0 : _b3.call(_a3, `Virtualalized render ${from} to ${to}`);
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", __spreadProps(__spreadValues({}, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", __spreadProps(__spreadValues({}, props), { children: [
     header,
-    virtual && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { gridColumn: "1 / -1", height: before }, ref: probeRef }),
+    virtual && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { gridColumn: "1 / -1", height: before }, ref: probeRef }),
     children(itemIds, from),
-    virtual && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { gridColumn: "1 / -1", height: after } }),
+    virtual && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { gridColumn: "1 / -1", height: after } }),
     footer
   ] }));
 }
 
 // src/components/table.tsx
-var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 function Table(props) {
   const [table, resetState] = useTableState(props);
   const [isHydrated, clearStorage] = useTableStateStorage(table);
@@ -4938,25 +5153,25 @@ function Table(props) {
       resetState();
     });
   }
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableContext.Provider, { value: table, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableResetContext.Provider, { value: reset, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableMemoContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableLoadingState, { isHydrated }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableContext.Provider, { value: table, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableResetContext.Provider, { value: reset, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableMemoContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableLoadingState, { isHydrated }) }) }) });
 }
 function TableLoadingState({ isHydrated }) {
   const loadingText = useTheme((t2) => t2.text.loading);
-  const [showLoading, setShowLoading] = (0, import_react41.useState)(false);
-  (0, import_react41.useEffect)(() => {
+  const [showLoading, setShowLoading] = (0, import_react42.useState)(false);
+  (0, import_react42.useEffect)(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
     return () => clearTimeout(handle);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    !isHydrated && showLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: loadingText }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableInner, { hidden: !isHydrated })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    !isHydrated && showLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: loadingText }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableInner, { hidden: !isHydrated })
   ] });
 }
-var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
+var TableInner = (0, import_react42.memo)(function TableInner2({ hidden }) {
   const table = useTableContext();
   const fullWidth = table.useState((state) => state.props.fullWidth);
   const visibleColumns = table.useState(
@@ -4990,11 +5205,11 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
   );
   const cssVariables = useCssVariables();
   const enableClearFiltersButton = table.useState((state) => state.props.enableClearFiltersButton);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Virtualized,
     {
       className: classes == null ? void 0 : classes.table,
@@ -5013,8 +5228,8 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
           fullWidth === "left" || fullWidth === true ? "auto" : "0"
         ].join(" ")
       },
-      header: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: classes == null ? void 0 : classes.headerCell,
@@ -5027,7 +5242,7 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
           "div",
           {
             className: classes == null ? void 0 : classes.headerCell,
@@ -5039,18 +5254,18 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
               styles == null ? void 0 : styles.headerCell
             ],
             children: [
-              enableSelection && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectComponent, {}),
-              enableColumnSelection && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnSelection, {}),
-              enableExport && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Export2, {}),
-              (enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { css: { flex: 1 } }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ResizeHandleView, {})
+              enableSelection && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectComponent, {}),
+              enableColumnSelection && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ColumnSelection, {}),
+              enableExport && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Export2, {}),
+              (enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { css: { flex: 1 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ResizeHandleView, {})
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeaderContext.Provider, { children: visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeader, {}) }, column.id)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ColumnHeaderContext.Provider, { children: visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ColumnHeader, {}) }, column.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: classes == null ? void 0 : classes.headerCell,
@@ -5063,10 +5278,10 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
           }
         )
       ] }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-        enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ClearFiltersButton, {}),
-        hasFooter && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      footer: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+        enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ClearFiltersButton, {}),
+        hasFooter && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               className: classes == null ? void 0 : classes.footerCell,
@@ -5079,7 +5294,7 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               className: classes == null ? void 0 : classes.footerCell,
@@ -5091,8 +5306,8 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
               ]
             }
           ),
-          visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnFooter, {}) }, column.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ColumnFooter, {}) }, column.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               className: classes == null ? void 0 : classes.footerCell,
@@ -5106,7 +5321,7 @@ var TableInner = (0, import_react41.memo)(function TableInner2({ hidden }) {
           )
         ] })
       ] }),
-      children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Row, { itemId, rowIndex: startIndex + index }, itemId))
+      children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Row, { itemId, rowIndex: startIndex + index }, itemId))
     }
   );
 });
@@ -5132,7 +5347,7 @@ var termMatch = (text, query) => {
 };
 
 // src/components/textFilter.tsx
-var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function TextFilter(_a) {
   var _b = _a, {
     compare = textMatch,
@@ -5156,19 +5371,19 @@ function TextFilter(_a) {
       return compare(value2, filterValue);
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       css: {
         padding: `calc(var(--spacing) * 2)`,
         display: "grid"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         AutoFocusTextField,
         {
           value,
           onChange: (event) => onChange(event.target.value),
-          endIcon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconButton2, { onClick: () => onChange(""), children: !value ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Search2, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Clear2, {}) }),
+          endIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconButton2, { onClick: () => onChange(""), children: !value ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search2, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Clear2, {}) }),
           placeholder
         }
       )
@@ -5179,6 +5394,7 @@ function TextFilter(_a) {
 0 && (module.exports = {
   AutoFocusTextField,
   ColumnContext,
+  CombinedFilter,
   DateFilter,
   DatePicker,
   DatePickerProvider,