schummar-table 0.39.3 → 0.40.0

package/dist/index.cjs

@@ -600,7 +600,11 @@ function useColumnContext() {
 var defaultColors = {
   primary: { main: "#1976d2", light: "#42a5f5", contrastText: "#fff" },
   secondary: { main: "#9c27b0", light: "#ba68c8", contrastText: "#fff" },
-  blocked: { main: "#f44336", light: "#f26257", contrastText: "#fff" }
+  blocked: { main: "#f44336", light: "#f26257", contrastText: "#fff" },
+  background: "#ffffff",
+  text: "inherit",
+  border: "#777",
+  borderLight: "#eee"
 };
 
 // src/components/spinnner.tsx
@@ -707,94 +711,6 @@ var Badge = ({ badgeContent, children }) => {
   );
 };
 
-// src/theme/defaultTheme/defaultClasses.ts
-var import_react4 = require("@emotion/react");
-var white = "#ffffff";
-var lightGray = "#eeeeee";
-var gray = "#bdbdbd";
-var darkGray = "#777";
-var cell = (0, import_react4.css)({
-  display: "flex",
-  alignItems: "center",
-  borderBottom: `1px solid #dfe2e9`,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  background: "white",
-  "&:not(:empty)": {
-    padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`
-  }
-});
-var defaultClasses = {
-  table: (0, import_react4.css)({
-    position: "relative",
-    display: "grid"
-  }),
-  cell,
-  cellFill: (0, import_react4.css)({
-    borderBottom: `1px solid ${lightGray}`
-  }),
-  headerCell: (0, import_react4.css)(cell, {
-    borderBottom: `1px solid #c9cfda`,
-    "&:not(:empty)": {
-      padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`
-    }
-  }),
-  footerCell: (0, import_react4.css)(cell, {
-    padding: `var(--spacing) calc(2 * var(--spacing))`,
-    borderTop: `1px solid #c9cfda`,
-    borderBottom: "none"
-  }),
-  firstCell: (0, import_react4.css)({
-    justifyContent: "start"
-  }),
-  sticky: (0, import_react4.css)({
-    position: "sticky",
-    top: 0,
-    zIndex: 2
-  }),
-  stickyBottom: (0, import_react4.css)({
-    position: "sticky",
-    bottom: 0,
-    zIndex: 2
-  }),
-  headerFill: (0, import_react4.css)({
-    borderBottom: `1px solid #c9cfda`,
-    background: white
-  }),
-  footerFill: (0, import_react4.css)({
-    borderTop: `1px solid #c9cfda`,
-    background: white
-  }),
-  text: (0, import_react4.css)({
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  }),
-  card: (0, import_react4.css)({
-    borderRadius: 4,
-    boxShadow: "0px 3px 14px 2px rgb(0 0 0 / 12%)",
-    background: "white"
-  }),
-  clearFiltersButton: (0, import_react4.css)({
-    padding: `0 calc(2 * var(--spacing))`,
-    fontWeight: "bold",
-    position: "sticky",
-    left: 0,
-    maxWidth: "fit-content",
-    gridColumn: "2/-1",
-    button: {
-      color: "var(--primaryMain) !important",
-      border: "solid 1px",
-      borderColor: "var(--primaryMain) !important",
-      margin: "var(--spacing)"
-    }
-  }),
-  details: (0, import_react4.css)(cell, {
-    gridColumn: "1 / -1",
-    whiteSpace: "normal"
-  })
-};
-
 // src/theme/defaultTheme/button.tsx
 var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
 var Button = (_a) => {
@@ -830,9 +746,9 @@ var Button = (_a) => {
           }
         },
         variant === "outlined" && {
-          border: `1px solid ${darkGray}`,
+          border: "1px solid var(--table-button-border, var(--table-border, #777777))",
           "&:disabled": {
-            borderColor: lightGray
+            borderColor: "var(--table-button-border-disabled, #eeeeee)"
           }
         },
         variant === "contained" && {
@@ -935,6 +851,94 @@ var IconButton = (props) => {
 // src/theme/defaultTheme/popover.tsx
 var import_react5 = require("react");
 var import_react_dom = require("react-dom");
+
+// src/theme/defaultTheme/defaultClasses.ts
+var import_react4 = require("@emotion/react");
+var cell = (0, import_react4.css)({
+  display: "flex",
+  alignItems: "center",
+  borderBottom: "1px solid var(--table-border-light-color)",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  background: "var(--table-background-color)",
+  "&:not(:empty)": {
+    padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`
+  }
+});
+var defaultClasses = {
+  table: (0, import_react4.css)({
+    position: "relative",
+    display: "grid",
+    color: "var(--table-text-color)"
+  }),
+  cell,
+  cellFill: (0, import_react4.css)({
+    borderBottom: "1px solid var(--table-border-light-color)",
+    background: "var(--table-background-color)"
+  }),
+  headerCell: (0, import_react4.css)(cell, {
+    borderBottom: "1px solid var(--table-border-color)",
+    "&:not(:empty)": {
+      padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`
+    }
+  }),
+  footerCell: (0, import_react4.css)(cell, {
+    padding: `var(--spacing) calc(2 * var(--spacing))`,
+    borderTop: "1px solid var(--table-border-color)",
+    borderBottom: "none"
+  }),
+  firstCell: (0, import_react4.css)({
+    justifyContent: "start"
+  }),
+  sticky: (0, import_react4.css)({
+    position: "sticky",
+    top: 0,
+    zIndex: 2
+  }),
+  stickyBottom: (0, import_react4.css)({
+    position: "sticky",
+    bottom: 0,
+    zIndex: 2
+  }),
+  headerFill: (0, import_react4.css)({
+    borderBottom: "1px solid var(--table-border-color)",
+    background: "var(--table-background-color)"
+  }),
+  footerFill: (0, import_react4.css)({
+    borderTop: "1px solid var(--table-border-color)",
+    background: "var(--table-background-color)"
+  }),
+  text: (0, import_react4.css)({
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }),
+  card: (0, import_react4.css)({
+    borderRadius: 4,
+    boxShadow: "0px 3px 14px 2px rgb(0 0 0 / 12%)",
+    background: "var(--table-background-color)"
+  }),
+  clearFiltersButton: (0, import_react4.css)({
+    padding: `0 calc(2 * var(--spacing))`,
+    fontWeight: "bold",
+    position: "sticky",
+    left: 0,
+    maxWidth: "fit-content",
+    gridColumn: "2/-1",
+    button: {
+      color: "var(--primaryMain) !important",
+      border: "solid 1px",
+      borderColor: "var(--primaryMain) !important",
+      margin: "var(--spacing)"
+    }
+  }),
+  details: (0, import_react4.css)(cell, {
+    gridColumn: "1 / -1",
+    whiteSpace: "normal"
+  })
+};
+
+// src/theme/defaultTheme/popover.tsx
 var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
 var MARGIN = 10;
 var MAX_OFFSET = 20;
@@ -1052,7 +1056,8 @@ var Popover = ({
                 maxHeight
               }, position), {
                 zIndex: zIndex + 1,
-                overflowY: "auto"
+                overflowY: "auto",
+                color: "var(--table-text-color)"
               }),
               hidden && { display: "none" },
               !position && { visibility: "hidden" }
@@ -1094,7 +1099,7 @@ var TextField = (_a) => {
           flex: 1,
           display: "flex",
           alignItems: "center",
-          border: `1px solid ${darkGray}`,
+          border: "1px solid var(--table-textfield-border, var(--table-border, #777777))",
           borderRadius: 4
         },
         focus && { border: "2px solid var(--primaryMain)", margin: -1 }
@@ -1367,7 +1372,23 @@ function mergeThemes(...themes) {
       blocked: Object.assign({}, ...themes.map((theme) => {
         var _a;
         return (_a = theme.colors) == null ? void 0 : _a.blocked;
-      }))
+      })),
+      background: themes.map((theme) => {
+        var _a;
+        return (_a = theme.colors) == null ? void 0 : _a.background;
+      }).reverse().find((x) => x !== void 0),
+      text: themes.map((theme) => {
+        var _a;
+        return (_a = theme.colors) == null ? void 0 : _a.text;
+      }).reverse().find((x) => x !== void 0),
+      border: themes.map((theme) => {
+        var _a;
+        return (_a = theme.colors) == null ? void 0 : _a.border;
+      }).reverse().find((x) => x !== void 0),
+      borderLight: themes.map((theme) => {
+        var _a;
+        return (_a = theme.colors) == null ? void 0 : _a.borderLight;
+      }).reverse().find((x) => x !== void 0)
     },
     spacing: themes.map((theme) => theme.spacing).reverse().find((x) => x !== void 0)
   };
@@ -1650,7 +1671,11 @@ function useCssVariables() {
       "--secondaryContrastText": colors.secondary.contrastText,
       "--blockedMain": colors.blocked.main,
       "--blockedLight": colors.blocked.light,
-      "--blockedContrastText": colors.blocked.contrastText
+      "--blockedContrastText": colors.blocked.contrastText,
+      "--table-background-color": colors.background,
+      "--table-text-color": colors.text,
+      "--table-border-color": colors.border,
+      "--table-border-light-color": colors.borderLight
     };
   });
 }
@@ -1766,7 +1791,18 @@ function AutoFocusTextField(props) {
       ref.current.focus();
     }
   }, [isActive]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextField2, __spreadProps(__spreadValues({}, props), { inputRef: ref }));
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    TextField2,
+    __spreadProps(__spreadValues({}, props), {
+      inputRef: ref,
+      css: {
+        input: {
+          backgroundColor: "inherit",
+          color: "inherit"
+        }
+      }
+    })
+  );
 }
 
 // src/hooks/useFilter.ts
@@ -1972,6 +2008,12 @@ function DateInput({
             borderBottom: "2px solid transparent",
             outline: "none",
             fontSize: "inherit",
+            backgroundColor: "inherit",
+            color: "inherit",
+            "::placeholder": {
+              color: "inherit",
+              opacity: 0.5
+            },
             "&:focus": {
               borderBottom: "2px solid var(--primaryMain)"
             }
@@ -2173,10 +2215,11 @@ function DatePicker(props) {
         border: "none",
         background: "transparent",
         cursor: disabled ? void 0 : "pointer",
-        font: "inherit"
+        font: "inherit",
+        color: "inherit"
       },
       (prevMonth || nextMonth) && {
-        color: gray
+        color: "var(--date-picker-disemphasized, #bdbdbd)"
       },
       today2 && {
         outline: "1px solid var(--secondaryMain)"
@@ -2234,6 +2277,9 @@ function DatePicker(props) {
         {
           variant: "text",
           type: "button",
+          css: {
+            color: "inherit"
+          },
           onClick: () => {
             setDirty(void 0);
             if (value2 instanceof Function) {
@@ -2303,185 +2349,197 @@ function DatePicker(props) {
     const { format } = new Intl.DateTimeFormat(locale, { year: "numeric" });
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: cssVariables, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "div",
-      {
-        css: {
-          display: "grid",
-          gridAutoFlow: "column",
-          justifyContent: "center",
-          alignItems: "baseline",
-          gap: "var(--spacing)"
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            DateInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      css: [
+        cssVariables,
+        {
+          color: "var(--table-text-color)"
+        }
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            css: {
+              display: "grid",
+              gridAutoFlow: "column",
+              justifyContent: "center",
+              alignItems: "baseline",
+              gap: "var(--spacing)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                DateInput,
+                {
+                  value: min != null ? min : null,
+                  onChange: (date) => set(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)(
+                  DateInput,
+                  {
+                    value: max != null ? max : null,
+                    onChange: (date) => set(min, date != null ? date : void 0, "max"),
+                    locale
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: { display: "grid" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "div",
             {
-              value: min != null ? min : null,
-              onChange: (date) => set(date != null ? date : void 0, max, "min"),
-              locale
+              css: {
+                margin: "calc(var(--spacing) * 4) 0",
+                display: "grid",
+                gridAutoFlow: "column",
+                justifyContent: "space-between",
+                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: [
+                  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, {}) }))
+              ]
             }
           ),
-          rangeSelect && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            " - ",
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              DateInput,
-              {
-                value: max != null ? max : null,
-                onChange: (date) => set(min, date != null ? date : void 0, "max"),
-                locale
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: { display: "grid" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-        "div",
-        {
-          css: {
-            margin: "calc(var(--spacing) * 4) 0",
-            display: "grid",
-            gridAutoFlow: "column",
-            justifyContent: "space-between",
-            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: [
-              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_runtime15.jsxs)(
-        "div",
-        {
-          css: {
-            justifySelf: "center",
-            display: "grid",
-            gridTemplateColumns: "repeat(8, max-content)"
-          },
-          children: [
-            showCalendarWeek ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "div",
-              {
-                css: {
-                  justifySelf: "center",
-                  padding: 10,
-                  borderRight: `1px solid ${gray}`
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "calendarWeek" })
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}),
-            weekDays.map((_v, weekDay) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "div",
-              {
-                css: {
-                  justifySelf: "center",
-                  padding: 10
-                },
-                children: formatWeekday(weekDay)
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "div",
+            {
+              css: {
+                justifySelf: "center",
+                display: "grid",
+                gridTemplateColumns: "repeat(8, max-content)"
               },
-              weekDay
-            )),
-            weeks.map((week, index) => {
-              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: [
+              children: [
                 showCalendarWeek ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  "button",
+                  "div",
                   {
-                    type: "button",
                     css: {
+                      justifySelf: "center",
                       padding: 10,
-                      border: "none",
-                      background: "transparent",
-                      cursor: weekDisabled ? void 0 : "pointer",
-                      font: "inherit",
-                      borderRight: `1px solid ${gray}`
+                      borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))"
                     },
-                    onClick: () => {
-                      if (weekDisabled) {
-                        return;
-                      }
-                      const min2 = minDate && weekStart.date < minDate ? minDate : weekStart.date;
-                      const max2 = maxDate && weekEnd.date > maxDate ? maxDate : weekEnd.date;
-                      set(min2, max2);
-                    },
-                    onPointerOver: () => !weekDisabled && setHovered({ min: weekStart.date, max: weekEnd.date }),
-                    onPointerOut: () => !weekDisabled && setHovered(void 0),
-                    children: getCalendarWeek(weekEnd.date)
+                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { id: "calendarWeek" })
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}),
-                week.map((dateObject, dayIndex) => {
-                  if (!dateObject) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}, dayIndex);
-                  }
-                  const { prevMonth, nextMonth, date } = dateObject;
-                  const today2 = startOfDay(date).getTime() === now.getTime();
-                  const disabled = minDate && date < minDate || maxDate && date > maxDate;
-                  const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, { min, max });
-                  const preSelected = !selected && !disabled && (dateIntersect(date, hovered) || min && !max && hovered && dateIntersect(
-                    date,
-                    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)(
-                    "button",
-                    __spreadProps(__spreadValues({
-                      type: "button",
-                      css: getDayCssStyles({
-                        disabled,
-                        prevMonth,
-                        nextMonth,
-                        today: today2,
-                        blocked,
-                        selected,
-                        preSelected
-                      })
-                    }, getDateProps({ dateObj: dateObject })), {
-                      onClick: () => {
-                        if (dirty) {
-                          if (min) set(min, date);
-                          else set(date, max);
-                        } else {
-                          set(date);
-                        }
-                      },
-                      onPointerOver: () => setHovered({ min: date, max: date }),
-                      onPointerOut: () => setHovered(void 0),
-                      disabled,
-                      children: date.getDate()
-                    }),
-                    `${index}-${dayIndex}`
-                  );
+                weekDays.map((_v, weekDay) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  "div",
+                  {
+                    css: {
+                      justifySelf: "center",
+                      padding: 10
+                    },
+                    children: formatWeekday(weekDay)
+                  },
+                  weekDay
+                )),
+                weeks.map((week, index) => {
+                  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)(
+                      "button",
+                      {
+                        type: "button",
+                        css: {
+                          padding: 10,
+                          border: "none",
+                          background: "transparent",
+                          cursor: weekDisabled ? void 0 : "pointer",
+                          font: "inherit",
+                          borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))",
+                          color: "inherit"
+                        },
+                        onClick: () => {
+                          if (weekDisabled) {
+                            return;
+                          }
+                          const min2 = minDate && weekStart.date < minDate ? minDate : weekStart.date;
+                          const max2 = maxDate && weekEnd.date > maxDate ? maxDate : weekEnd.date;
+                          set(min2, max2);
+                        },
+                        onPointerOver: () => !weekDisabled && setHovered({ min: weekStart.date, max: weekEnd.date }),
+                        onPointerOut: () => !weekDisabled && setHovered(void 0),
+                        children: getCalendarWeek(weekEnd.date)
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}),
+                    week.map((dateObject, dayIndex) => {
+                      if (!dateObject) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", {}, dayIndex);
+                      }
+                      const { prevMonth, nextMonth, date } = dateObject;
+                      const today2 = startOfDay(date).getTime() === now.getTime();
+                      const disabled = minDate && date < minDate || maxDate && date > maxDate;
+                      const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, { min, max });
+                      const preSelected = !selected && !disabled && (dateIntersect(date, hovered) || min && !max && hovered && dateIntersect(
+                        date,
+                        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)(
+                        "button",
+                        __spreadProps(__spreadValues({
+                          type: "button",
+                          css: getDayCssStyles({
+                            disabled,
+                            prevMonth,
+                            nextMonth,
+                            today: today2,
+                            blocked,
+                            selected,
+                            preSelected
+                          })
+                        }, getDateProps({ dateObj: dateObject })), {
+                          onClick: () => {
+                            if (dirty) {
+                              if (min) set(min, date);
+                              else set(date, max);
+                            } else {
+                              set(date);
+                            }
+                          },
+                          onPointerOver: () => setHovered({ min: date, max: date }),
+                          onPointerOut: () => setHovered(void 0),
+                          disabled,
+                          children: date.getDate()
+                        }),
+                        `${index}-${dayIndex}`
+                      );
+                    })
+                  ] }, index);
                 })
-              ] }, index);
-            })
-          ]
-        }
-      )
-    ] }, `${month}${year}`)),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "div",
-      {
-        css: {
-          marginTop: "var(--spacing)",
-          display: "grid",
-          gridAutoFlow: "column",
-          justifyContent: "center"
-        },
-        children: resolvedQuickOptions
-      }
-    )
-  ] });
+              ]
+            }
+          )
+        ] }, `${month}${year}`)),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            css: {
+              marginTop: "var(--spacing)",
+              display: "grid",
+              gridAutoFlow: "column",
+              justifyContent: "center"
+            },
+            children: resolvedQuickOptions
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/dateFilter.tsx
@@ -2593,7 +2651,7 @@ function NumberField(_a) {
   const [value = printNumber(commitedValue, locale), setValue] = (0, import_react19.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     TextField2,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       value,
       onChange: (event) => {
         if (Pattern.test(event.target.value)) {
@@ -2604,7 +2662,14 @@ function NumberField(_a) {
         onChange == null ? void 0 : onChange(parseNumber(value));
         setValue(void 0);
       }
-    }, textFieldProps)
+    }, textFieldProps), {
+      css: {
+        input: {
+          backgroundColor: "inherit",
+          color: "inherit"
+        }
+      }
+    })
   );
 }
 
@@ -2988,7 +3053,12 @@ function SelectFilter(_a) {
             disabled: value.size === 0,
             onClick: () => onChange(/* @__PURE__ */ new Set()),
             variant: "outlined",
-            css: { justifyContent: "center", width: "100%", marginBottom: "var(--spacing)" },
+            css: {
+              justifyContent: "center",
+              width: "100%",
+              marginBottom: "var(--spacing)",
+              color: "inherit"
+            },
             children: deselectAll
           }
         ),