@helpwave/hightide 0.6.11 → 0.6.13

package/dist/index.js

@@ -6272,6 +6272,7 @@ __export(index_exports, {
   DateTimePickerDialog: () => DateTimePickerDialog,
   DateTimePickerUncontrolled: () => DateTimePickerUncontrolled,
   DateUtils: () => DateUtils,
+  DatetimeFilter: () => DatetimeFilter,
   DayPicker: () => DayPicker,
   DayPickerUncontrolled: () => DayPickerUncontrolled,
   Dialog: () => Dialog,
@@ -6407,6 +6408,7 @@ __export(index_exports, {
   TableWithSelectionProvider: () => TableWithSelectionProvider,
   TagIcon: () => TagIcon,
   TagsFilter: () => TagsFilter,
+  TagsSingleFilter: () => TagsSingleFilter,
   TextFilter: () => TextFilter,
   TextImage: () => TextImage,
   TextProperty: () => TextProperty,
@@ -6436,6 +6438,14 @@ __export(index_exports, {
   createLoopingList: () => createLoopingList,
   createLoopingListWithIndex: () => createLoopingListWithIndex,
   equalSizeGroups: () => equalSizeGroups,
+  filterBoolean: () => filterBoolean,
+  filterDate: () => filterDate,
+  filterDatetime: () => filterDatetime,
+  filterGeneric: () => filterGeneric,
+  filterNumber: () => filterNumber,
+  filterTags: () => filterTags,
+  filterTagsSingle: () => filterTagsSingle,
+  filterText: () => filterText,
   formatDate: () => formatDate,
   formatDateTime: () => formatDateTime,
   getBetweenDuration: () => getBetweenDuration,
@@ -7351,17 +7361,17 @@ function useFormObserver({ formStore } = {}) {
     hasTriedSubmitting
   };
 }
-function useFormObserverKey({ formStore, key }) {
+function useFormObserverKey({ formStore, formKey }) {
   const context = (0, import_react6.useContext)(FormContext);
   const store = formStore ?? context?.store;
   const subscribe = (0, import_react6.useCallback)((cb) => {
     if (!store) return () => {
     };
-    return store.subscribe(key, cb);
-  }, [store, key]);
-  const value = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getValue(key) : void 0);
-  const error = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getError(key) : void 0);
-  const touched = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getTouched(key) : void 0);
+    return store.subscribe(formKey, cb);
+  }, [store, formKey]);
+  const value = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getValue(formKey) : void 0);
+  const error = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getError(formKey) : void 0);
+  const touched = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getTouched(formKey) : void 0);
   if (!store) return null;
   return {
     store,
@@ -7413,8 +7423,8 @@ var FormObserver = ({ children, formStore }) => {
   }
   return BagFunctionUtil.resolve(children, formObserver);
 };
-var FormObserverKey = ({ children, formStore, key }) => {
-  const formObserver = useFormObserverKey({ formStore, key });
+var FormObserverKey = ({ children, formStore, formKey }) => {
+  const formObserver = useFormObserverKey({ formStore, formKey });
   if (!formObserver) {
     throw new Error("<FormObserverKey> can only be used inside a <FormProvider>");
   }
@@ -7670,11 +7680,11 @@ function useCreateForm({
   const callbacks = (0, import_react7.useMemo)(() => ({
     reset: () => storeRef.current.reset(),
     submit: () => storeRef.current.submit(),
-    update: (updater) => {
+    update: (updater, triggerUpdate = false) => {
       if (typeof updater === "function") {
-        storeRef.current.setValues(updater(storeRef.current.getAllValues()));
+        storeRef.current.setValues(updater(storeRef.current.getAllValues()), triggerUpdate);
       } else {
-        storeRef.current.setValues(updater);
+        storeRef.current.setValues(updater, triggerUpdate);
       }
     },
     validateAll: () => storeRef.current.validateAll()
@@ -8198,6 +8208,7 @@ var hightideTranslation = {
     "between": `Zwischen`,
     "cancel": `Abbrechen`,
     "carousel": `Karussell`,
+    "caseSensitive": `Gro\xDF-/Klein beachten`,
     "change": `\xC4ndern`,
     "changeColumnDisplay": `Spaltenanzeige \xE4ndern`,
     "chooseLanguage": `W\xE4hle deine bevorzugte Sprache`,
@@ -8343,6 +8354,14 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sorting": `Sortierung`,
+    "sSortingState": ({ sortDirection }) => {
+      return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
+        "asc": `Sortierung (Aktuell Aufsteigend)`,
+        "desc": `Sortierung (Aktuell Absteigend)`,
+        "other": `Sortierung (Aktuell Keine)`
+      });
+    },
     "startDate": `Start`,
     "startsWith": `Beginnt mit`,
     "sThemeMode": ({ theme }) => {
@@ -8495,6 +8514,7 @@ var hightideTranslation = {
     "between": `Between`,
     "cancel": `Cancel`,
     "carousel": `Carousel`,
+    "caseSensitive": `Case Sensitive`,
     "change": `Change`,
     "changeColumnDisplay": `Change column display`,
     "chooseLanguage": `Choose your language`,
@@ -8640,6 +8660,14 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sorting": `Sorting`,
+    "sSortingState": ({ sortDirection }) => {
+      return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
+        "asc": `Sorting (Currently Ascending)`,
+        "desc": `Sorting (Currently Descending)`,
+        "other": `Sorting (Currently None)`
+      });
+    },
     "startDate": `Start`,
     "startsWith": `Starts with`,
     "sThemeMode": ({ theme }) => {
@@ -12785,8 +12813,7 @@ var Pagination = ({
   pageIndex,
   pageCount,
   onPageIndexChanged,
-  className,
-  style
+  ...props
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = (0, import_react52.useState)((pageIndex + 1).toString());
@@ -12803,7 +12830,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageIndexChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx23.default)("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ...props, className: (0, import_clsx23.default)("flex-row-1", props.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { tooltip: translation("first"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
@@ -13179,27 +13206,16 @@ var useTableContainerContext = () => {
   return context;
 };
 
-// src/components/layout/table/TableFilter.ts
-var TableFilterOperator = {
-  text: ["textEquals", "textNotEquals", "textNotWhitespace", "textContains", "textNotContains", "textStartsWith", "textEndsWith"],
-  number: ["numberEquals", "numberNotEquals", "numberGreaterThan", "numberGreaterThanOrEqual", "numberLessThan", "numberLessThanOrEqual", "numberBetween", "numberNotBetween"],
-  date: ["dateEquals", "dateNotEquals", "dateGreaterThan", "dateGreaterThanOrEqual", "dateLessThan", "dateLessThanOrEqual", "dateBetween", "dateNotBetween"],
-  boolean: ["booleanIsTrue", "booleanIsFalse"],
-  tags: ["tagsEquals", "tagsNotEquals", "tagsContains", "tagsNotContains"],
-  generic: ["undefined", "notUndefined"]
-};
-function isTableFilterCategory(value) {
-  return typeof value === "string" && value in TableFilterOperator;
-}
-var textFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
+// src/utils/filter.ts
+function filterText(value, filterValue) {
   const parameter = filterValue.parameter;
   const operator = filterValue.operator;
+  const isCaseSensitive = filterValue.parameter.isCaseSensitive ?? false;
   if (operator === "textNotWhitespace") {
     return value?.toString().trim().length > 0;
   }
-  const searchText = (parameter.searchText ?? "").toLowerCase();
-  const cellText = value?.toString().toLowerCase() ?? "";
+  const searchText = isCaseSensitive ? parameter.searchText ?? "" : (parameter.searchText ?? "").toLowerCase();
+  const cellText = isCaseSensitive ? value?.toString() ?? "" : value?.toString().toLowerCase() ?? "";
   switch (operator) {
     case "textEquals":
       return cellText === searchText;
@@ -13220,11 +13236,19 @@ var textFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
-};
-var numberFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
+}
+function filterNumber(value, filterValue) {
   const parameter = filterValue.parameter;
   const operator = filterValue.operator;
+  if (typeof value !== "number") {
+    if (operator === "undefined") {
+      return value === void 0 || value === null;
+    }
+    if (operator === "notUndefined") {
+      return value !== void 0 && value !== null;
+    }
+    return false;
+  }
   switch (operator) {
     case "numberEquals":
       return value === parameter.compareValue;
@@ -13249,58 +13273,57 @@ var numberFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
-};
-var dateFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
+}
+function parseDate(dateValue) {
+  if (!dateValue) return null;
+  if (dateValue instanceof Date) return dateValue;
+  if (typeof dateValue === "string" || typeof dateValue === "number") {
+    const parsed = new Date(dateValue);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return null;
+}
+function normalizeToDateOnly(date) {
+  const normalized = new Date(date);
+  normalized.setHours(0, 0, 0, 0);
+  return normalized;
+}
+function filterDate(value, filterValue) {
   const parameter = filterValue.parameter;
   const operator = filterValue.operator;
-  const parseDate = (dateValue) => {
-    if (!dateValue) return null;
-    if (dateValue instanceof Date) return dateValue;
-    if (typeof dateValue === "string" || typeof dateValue === "number") {
-      const parsed = new Date(dateValue);
-      return isNaN(parsed.getTime()) ? null : parsed;
-    }
-    return null;
-  };
-  const normalizeToDateOnly = (date2) => {
-    const normalized = new Date(date2);
-    normalized.setHours(0, 0, 0, 0);
-    return normalized;
-  };
   const date = parseDate(value);
   if (!date && !TableFilterOperator.generic.some((o) => o === operator)) return false;
   const normalizedDate = date ? normalizeToDateOnly(date) : null;
   switch (operator) {
     case "dateEquals": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate.getTime() === normalizeToDateOnly(filterDate).getTime();
+      const filterDate2 = parseDate(parameter.compareDate);
+      if (!filterDate2 || !normalizedDate) return false;
+      return normalizedDate.getTime() === normalizeToDateOnly(filterDate2).getTime();
     }
     case "dateNotEquals": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate.getTime() !== normalizeToDateOnly(filterDate).getTime();
+      const filterDate2 = parseDate(parameter.compareDate);
+      if (!filterDate2 || !normalizedDate) return false;
+      return normalizedDate.getTime() !== normalizeToDateOnly(filterDate2).getTime();
     }
     case "dateGreaterThan": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate > normalizeToDateOnly(filterDate);
+      const filterDate2 = parseDate(parameter.compareDate);
+      if (!filterDate2 || !normalizedDate) return false;
+      return normalizedDate > normalizeToDateOnly(filterDate2);
     }
     case "dateGreaterThanOrEqual": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate >= normalizeToDateOnly(filterDate);
+      const filterDate2 = parseDate(parameter.compareDate);
+      if (!filterDate2 || !normalizedDate) return false;
+      return normalizedDate >= normalizeToDateOnly(filterDate2);
     }
     case "dateLessThan": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate < normalizeToDateOnly(filterDate);
+      const filterDate2 = parseDate(parameter.compareDate);
+      if (!filterDate2 || !normalizedDate) return false;
+      return normalizedDate < normalizeToDateOnly(filterDate2);
     }
     case "dateLessThanOrEqual": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate <= normalizeToDateOnly(filterDate);
+      const filterDate2 = parseDate(parameter.compareDate);
+      if (!filterDate2 || !normalizedDate) return false;
+      return normalizedDate <= normalizeToDateOnly(filterDate2);
     }
     case "dateBetween": {
       const minDate = parseDate(parameter.min);
@@ -13321,9 +13344,70 @@ var dateFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
-};
-var booleanFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
+}
+function normalizeDatetime(datetime) {
+  const normalized = new Date(datetime);
+  normalized.setSeconds(0, 0);
+  return normalized;
+}
+function filterDatetime(value, filterValue) {
+  const parameter = filterValue.parameter;
+  const operator = filterValue.operator;
+  const datetime = parseDate(value);
+  if (!datetime && !TableFilterOperator.generic.some((o) => o === operator)) return false;
+  const normalizedDatetime = datetime ? normalizeDatetime(datetime) : null;
+  switch (operator) {
+    case "datetimeEquals": {
+      const filterDatetime2 = parseDate(parameter.compareDatetime);
+      if (!filterDatetime2 || !normalizedDatetime) return false;
+      return normalizedDatetime.getTime() === normalizeDatetime(filterDatetime2).getTime();
+    }
+    case "datetimeNotEquals": {
+      const filterDatetime2 = parseDate(parameter.compareDatetime);
+      if (!filterDatetime2 || !normalizedDatetime) return false;
+      return normalizedDatetime.getTime() !== normalizeDatetime(filterDatetime2).getTime();
+    }
+    case "datetimeGreaterThan": {
+      const filterDatetime2 = parseDate(parameter.compareDatetime);
+      if (!filterDatetime2 || !normalizedDatetime) return false;
+      return normalizedDatetime > normalizeDatetime(filterDatetime2);
+    }
+    case "datetimeGreaterThanOrEqual": {
+      const filterDatetime2 = parseDate(parameter.compareDatetime);
+      if (!filterDatetime2 || !normalizedDatetime) return false;
+      return normalizedDatetime >= normalizeDatetime(filterDatetime2);
+    }
+    case "datetimeLessThan": {
+      const filterDatetime2 = parseDate(parameter.compareDatetime);
+      if (!filterDatetime2 || !normalizedDatetime) return false;
+      return normalizedDatetime < normalizeDatetime(filterDatetime2);
+    }
+    case "datetimeLessThanOrEqual": {
+      const filterDatetime2 = parseDate(parameter.compareDatetime);
+      if (!filterDatetime2 || !normalizedDatetime) return false;
+      return normalizedDatetime <= normalizeDatetime(filterDatetime2);
+    }
+    case "datetimeBetween": {
+      const minDatetime = parseDate(parameter.min);
+      const maxDatetime = parseDate(parameter.max);
+      if (!minDatetime || !maxDatetime || !normalizedDatetime) return false;
+      return normalizedDatetime >= normalizeDatetime(minDatetime) && normalizedDatetime <= normalizeDatetime(maxDatetime);
+    }
+    case "datetimeNotBetween": {
+      const minDatetime = parseDate(parameter.min);
+      const maxDatetime = parseDate(parameter.max);
+      if (!minDatetime || !maxDatetime || !normalizedDatetime) return false;
+      return normalizedDatetime < normalizeDatetime(minDatetime) || normalizedDatetime > normalizeDatetime(maxDatetime);
+    }
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+}
+function filterBoolean(value, filterValue) {
   const operator = filterValue.operator;
   switch (operator) {
     case "booleanIsTrue":
@@ -13337,9 +13421,8 @@ var booleanFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
-};
-var tagsFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
+}
+function filterTags(value, filterValue) {
   const parameter = filterValue.parameter;
   const operator = filterValue.operator;
   switch (operator) {
@@ -13374,9 +13457,28 @@ var tagsFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
-};
-var genericFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
+}
+function filterTagsSingle(value, filterValue) {
+  const parameter = filterValue.parameter;
+  const operator = filterValue.operator;
+  switch (operator) {
+    case "tagsSingleEquals":
+      return value === parameter.searchTag;
+    case "tagsSingleNotEquals":
+      return value !== parameter.searchTag;
+    case "tagsSingleContains":
+      return parameter.searchTagsContains?.includes(value) ?? false;
+    case "tagsSingleNotContains":
+      return !(parameter.searchTagsContains?.includes(value) ?? false);
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+}
+function filterGeneric(value, filterValue) {
   const operator = filterValue.operator;
   switch (operator) {
     case "undefined":
@@ -13386,13 +13488,62 @@ var genericFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
+}
+
+// src/components/layout/table/TableFilter.ts
+var TableFilterOperator = {
+  text: ["textEquals", "textNotEquals", "textNotWhitespace", "textContains", "textNotContains", "textStartsWith", "textEndsWith"],
+  number: ["numberEquals", "numberNotEquals", "numberGreaterThan", "numberGreaterThanOrEqual", "numberLessThan", "numberLessThanOrEqual", "numberBetween", "numberNotBetween"],
+  date: ["dateEquals", "dateNotEquals", "dateGreaterThan", "dateGreaterThanOrEqual", "dateLessThan", "dateLessThanOrEqual", "dateBetween", "dateNotBetween"],
+  datetime: ["datetimeEquals", "datetimeNotEquals", "datetimeGreaterThan", "datetimeGreaterThanOrEqual", "datetimeLessThan", "datetimeLessThanOrEqual", "datetimeBetween", "datetimeNotBetween"],
+  boolean: ["booleanIsTrue", "booleanIsFalse"],
+  tags: ["tagsEquals", "tagsNotEquals", "tagsContains", "tagsNotContains"],
+  tagsSingle: ["tagsSingleEquals", "tagsSingleNotEquals", "tagsSingleContains", "tagsSingleNotContains"],
+  generic: ["undefined", "notUndefined"]
+};
+function isTableFilterCategory(value) {
+  return typeof value === "string" && value in TableFilterOperator;
+}
+var textFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterText(value, filterValue);
+};
+var numberFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterNumber(value, filterValue);
+};
+var dateFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterDate(value, filterValue);
+};
+var datetimeFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterDatetime(value, filterValue);
+};
+var booleanFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterBoolean(value, filterValue);
+};
+var tagsFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterTags(value, filterValue);
+};
+var tagsSingleFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterTagsSingle(value, filterValue);
+};
+var genericFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  return filterGeneric(value, filterValue);
 };
 var TableFilter = {
   text: textFilter,
   number: numberFilter,
   date: dateFilter,
+  datetime: datetimeFilter,
   boolean: booleanFilter,
   tags: tagsFilter,
+  tagsSingle: tagsSingleFilter,
   generic: genericFilter
 };
 
@@ -13650,7 +13801,7 @@ var TableBody = import_react58.default.memo(function TableBodyVisual() {
 
 // src/components/layout/table/TableHeader.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 
 // src/components/layout/table/TableSortButton.tsx
 var import_lucide_react14 = require("lucide-react");
@@ -13676,31 +13827,41 @@ var TableSortButton = ({
     icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react14.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react14.ChevronDown, { className: "size-4" });
   }
   const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    Tooltip,
     {
-      layout: hasSortingIndex ? "default" : "icon",
-      color,
-      size,
-      className: (0, import_clsx28.default)("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "div",
-          {
-            className: (0, import_clsx28.default)("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
-            children: `${index}.`
-          }
-        ) }),
-        icon
-      ]
+      tooltip: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-col-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: translation("sSortingState", { sortDirection: sortDirection || "none" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: translation("rSortingOrderAfter", { otherSortings: index - 1 }) }) })
+      ] }),
+      position: "top",
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        Button,
+        {
+          layout: hasSortingIndex ? "default" : "icon",
+          color,
+          size,
+          className: (0, import_clsx28.default)("relative", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                className: (0, import_clsx28.default)("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
+                children: `${index}.`
+              }
+            ) }),
+            icon
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_react67 = require("react");
+var import_lucide_react19 = require("lucide-react");
+var import_react68 = require("react");
 
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_react64 = require("react");
@@ -14630,7 +14791,7 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // src/components/user-interaction/select/MultiSelect.tsx
 var import_react65 = require("react");
@@ -14664,120 +14825,241 @@ var MultiSelectUncontrolled = (0, import_react65.forwardRef)(function MultiSelec
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
+var import_lucide_react18 = require("lucide-react");
+
+// src/components/user-interaction/Checkbox.tsx
 var import_lucide_react17 = require("lucide-react");
+var import_react66 = require("react");
+var import_clsx33 = __toESM(require("clsx"));
 var import_jsx_runtime66 = require("react/jsx-runtime");
+var Checkbox = ({
+  value = false,
+  indeterminate = false,
+  required = false,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  onValueChange,
+  onEditComplete,
+  size = "md",
+  alwaysShowCheckIcon = false,
+  ...props
+}) => {
+  const onChangeWrapper = (0, import_react66.useCallback)(() => {
+    onValueChange?.(!value);
+    onEditComplete?.(!value);
+  }, [onEditComplete, onValueChange, value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+    "div",
+    {
+      ...props,
+      onClick: (event) => {
+        if (!disabled) {
+          onChangeWrapper();
+          props.onClick?.(event);
+        }
+      },
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === " " || event.key === "Enter") {
+          event.preventDefault();
+          onChangeWrapper();
+          props.onKeyDown?.(event);
+        }
+      },
+      "data-checked": !indeterminate ? value : "indeterminate",
+      "data-size": size ?? void 0,
+      ...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required }),
+      role: "checkbox",
+      tabIndex: disabled ? -1 : 0,
+      "aria-checked": indeterminate ? "mixed" : value,
+      ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
+      className: (0, import_clsx33.default)("checkbox", props.className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Minus, { className: "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Check, { className: "checkbox-indicator", "aria-hidden": true }) })
+      ]
+    }
+  );
+};
+var CheckboxUncontrolled = ({
+  value: initialValue,
+  onValueChange,
+  ...props
+}) => {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    Checkbox,
+    {
+      ...props,
+      value,
+      onValueChange: setValue
+    }
+  );
+};
+
+// src/components/layout/table/TableFilterPopups.tsx
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var getOperatorInfo = (operator) => {
   switch (operator) {
     case "textEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "textNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "textNotWhitespace":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.TextInitial, { className: "w-4 h-4" }), translationKey: "filterNonWhitespace" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.TextInitial, { className: "w-4 h-4" }), translationKey: "filterNonWhitespace" };
     case "textContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
     case "textNotContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
     case "textStartsWith":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ArrowRight, { className: "w-4 h-4" }), translationKey: "startsWith" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ArrowRight, { className: "w-4 h-4" }), translationKey: "startsWith" };
     case "textEndsWith":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ArrowLeft, { className: "w-4 h-4" }), translationKey: "endsWith" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ArrowLeft, { className: "w-4 h-4" }), translationKey: "endsWith" };
     case "numberEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "numberNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "numberGreaterThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }), translationKey: "greaterThan" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }), translationKey: "greaterThan" };
     case "numberGreaterThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "greaterThanOrEqual"
       };
     case "numberLessThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }), translationKey: "lessThan" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }), translationKey: "lessThan" };
     case "numberLessThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "lessThanOrEqual"
       };
     case "numberBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "between"
       };
     case "numberNotBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "notBetween"
       };
     case "dateEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "dateNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "dateGreaterThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }), translationKey: "after" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }), translationKey: "after" };
     case "dateGreaterThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "onOrAfter"
       };
     case "dateLessThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }), translationKey: "before" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }), translationKey: "before" };
     case "dateLessThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "onOrBefore"
       };
     case "dateBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "between"
       };
     case "dateNotBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "notBetween"
       };
     case "booleanIsTrue":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.CheckCircle2, { className: "w-4 h-4" }), translationKey: "isTrue" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.CheckCircle2, { className: "w-4 h-4" }), translationKey: "isTrue" };
     case "booleanIsFalse":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.XCircle, { className: "w-4 h-4" }), translationKey: "isFalse" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.XCircle, { className: "w-4 h-4" }), translationKey: "isFalse" };
     case "tagsEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "tagsNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "tagsContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
     case "tagsNotContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+    case "datetimeEquals":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+    case "datetimeNotEquals":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+    case "datetimeGreaterThan":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }), translationKey: "after" };
+    case "datetimeGreaterThanOrEqual":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "onOrAfter"
+      };
+    case "datetimeLessThan":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }), translationKey: "before" };
+    case "datetimeLessThanOrEqual":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "onOrBefore"
+      };
+    case "datetimeBetween":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "between"
+      };
+    case "datetimeNotBetween":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "notBetween"
+      };
+    case "tagsSingleEquals":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+    case "tagsSingleNotEquals":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+    case "tagsSingleContains":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+    case "tagsSingleNotContains":
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
     case "undefined":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.CircleDashed, { className: "w-4 h-4" }), translationKey: "filterUndefined" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.CircleDashed, { className: "w-4 h-4" }), translationKey: "filterUndefined" };
     case "notUndefined":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.CircleDot, { className: "w-4 h-4" }), translationKey: "filterNotUndefined" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.CircleDot, { className: "w-4 h-4" }), translationKey: "filterNotUndefined" };
     default:
       return { icon: null, translationKey: "undefined translation" };
   }
@@ -14786,22 +15068,23 @@ var OperatorLabel = ({ operator }) => {
   const translation = useHightideTranslation();
   const { icon, translationKey } = getOperatorInfo(operator);
   const label = typeof translationKey === "string" ? translation(translationKey) : translationKey;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-1 items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-1 items-center gap-2", children: [
     icon,
     label
   ] });
 };
 var TextFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
-  const operator = filterValue?.operator ?? "textEquals";
+  const operator = filterValue?.operator ?? "textContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = (0, import_react66.useMemo)(() => [
+  const id = (0, import_react67.useId)();
+  const availableOperators = (0, import_react67.useMemo)(() => [
     ...TableFilterOperator.text,
     ...TableFilterOperator.generic
   ], []);
   const needsParameterInput = !["textNotWhitespace", "undefined", "notUndefined"].includes(operator);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Select,
       {
         value: operator,
@@ -14812,39 +15095,57 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      Input,
-      {
-        value: parameter.searchText ?? "",
-        placeholder: translation("search") + "...",
-        onValueChange: (searchText) => {
-          onFilterValueChange({
-            operator,
-            parameter: { searchText }
-          });
-        },
-        className: "min-w-64"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Visibility, { isVisible: needsParameterInput, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        Input,
+        {
+          value: parameter.searchText ?? "",
+          placeholder: translation("search") + "...",
+          onValueChange: (searchText) => {
+            onFilterValueChange({
+              operator,
+              parameter: { ...parameter, searchText }
+            });
+          },
+          className: "min-w-64"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          Checkbox,
+          {
+            id,
+            value: parameter.isCaseSensitive ?? false,
+            onValueChange: (isCaseSensitive) => {
+              onFilterValueChange({
+                operator,
+                parameter: { ...parameter, isCaseSensitive }
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("label", { htmlFor: id, children: translation("caseSensitive") })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
   ] });
 };
 var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
-  const operator = filterValue?.operator ?? "numberEquals";
+  const operator = filterValue?.operator ?? "numberBetween";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = (0, import_react66.useMemo)(() => [
+  const availableOperators = (0, import_react67.useMemo)(() => [
     ...TableFilterOperator.number,
     ...TableFilterOperator.generic
   ], []);
   const needsRangeInput = operator === "numberBetween" || operator === "numberNotBetween";
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Select,
       {
         value: operator,
@@ -14855,12 +15156,12 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormFieldLayout, { label: translation("min"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormFieldLayout, { label: translation("min"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Input,
         {
           ...ariaAttributes,
@@ -14879,7 +15180,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
           className: "input-indicator-hidden min-w-64"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormFieldLayout, { label: translation("max"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormFieldLayout, { label: translation("max"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Input,
         {
           ...ariaAttributes,
@@ -14899,7 +15200,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Input,
       {
         value: parameter.compareValue?.toString() ?? "",
@@ -14915,23 +15216,23 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var DateFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
-  const operator = filterValue?.operator ?? "dateEquals";
+  const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react66.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react66.useState)(null);
-  const availableOperators = (0, import_react66.useMemo)(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react67.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react67.useState)(null);
+  const availableOperators = (0, import_react67.useMemo)(() => [
     ...TableFilterOperator.date,
     ...TableFilterOperator.generic
   ], []);
   const needsRangeInput = operator === "dateBetween" || operator === "dateNotBetween";
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Select,
       {
         value: operator,
@@ -14942,12 +15243,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         DateTimeInput,
         {
           value: temporaryMinDateValue ?? parameter.min ?? null,
@@ -14980,7 +15281,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         DateTimeInput,
         {
           value: temporaryMaxDateValue ?? parameter.max ?? null,
@@ -15013,7 +15314,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       DateTimeInput,
       {
         value: parameter.compareDate ?? null,
@@ -15029,16 +15330,132 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+  ] });
+};
+var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
+  const translation = useHightideTranslation();
+  const operator = filterValue?.operator ?? "datetimeBetween";
+  const parameter = filterValue?.parameter ?? {};
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react67.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react67.useState)(null);
+  const availableOperators = (0, import_react67.useMemo)(() => [
+    ...TableFilterOperator.datetime,
+    ...TableFilterOperator.generic
+  ], []);
+  const needsRangeInput = operator === "datetimeBetween" || operator === "datetimeNotBetween";
+  const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      Select,
+      {
+        value: operator,
+        onValueChange: (newOperator) => {
+          onFilterValueChange({
+            operator: newOperator,
+            parameter: needsParameterInput ? parameter : {}
+          });
+        },
+        buttonProps: { className: "min-w-64" },
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        DateTimeInput,
+        {
+          mode: "dateTime",
+          value: temporaryMinDateValue ?? parameter.min ?? null,
+          placeholder: translation("startDate"),
+          onValueChange: (value) => setTemporaryMinDateValue(value),
+          onEditComplete: (value) => {
+            if (value && parameter.max && value > parameter.max) {
+              if (!parameter.min) {
+                onFilterValueChange({
+                  operator,
+                  parameter: { min: parameter.max, max: value }
+                });
+              } else {
+                const diff = parameter.max.getTime() - parameter.min.getTime();
+                onFilterValueChange({
+                  operator,
+                  parameter: { min: value, max: new Date(value.getTime() + diff) }
+                });
+              }
+            } else {
+              onFilterValueChange({
+                operator,
+                parameter: { ...parameter, min: value }
+              });
+            }
+            setTemporaryMinDateValue(null);
+          },
+          allowRemove: true,
+          outsideClickCloses: false,
+          className: "min-w-64"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        DateTimeInput,
+        {
+          mode: "dateTime",
+          value: temporaryMaxDateValue ?? parameter.max ?? null,
+          placeholder: translation("endDate"),
+          onValueChange: (value) => setTemporaryMaxDateValue(value),
+          onEditComplete: (value) => {
+            if (value && parameter.min && value < parameter.min) {
+              if (!parameter.max) {
+                onFilterValueChange({
+                  operator,
+                  parameter: { min: value, max: parameter.min }
+                });
+              } else {
+                const diff = parameter.max.getTime() - parameter.min.getTime();
+                onFilterValueChange({
+                  operator,
+                  parameter: { min: new Date(value.getTime() - diff), max: value }
+                });
+              }
+            } else {
+              onFilterValueChange({
+                operator,
+                parameter: { ...parameter, max: value }
+              });
+            }
+          },
+          allowRemove: true,
+          outsideClickCloses: false,
+          className: "min-w-64"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      DateTimeInput,
+      {
+        value: parameter.compareDatetime ?? null,
+        placeholder: translation("date"),
+        onValueChange: (compareDatetime) => {
+          onFilterValueChange({
+            operator,
+            parameter: { compareDatetime }
+          });
+        },
+        allowRemove: true,
+        outsideClickCloses: false,
+        className: "min-w-64"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "booleanIsTrue";
-  const availableOperators = (0, import_react66.useMemo)(() => [
+  const availableOperators = (0, import_react67.useMemo)(() => [
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Select,
     {
       value: operator,
@@ -15049,7 +15466,7 @@ var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
         });
       },
       buttonProps: { className: "min-w-64" },
-      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
+      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
     }
   ) });
 };
@@ -15058,11 +15475,11 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableDataContext();
   const operator = filterValue?.operator ?? "tagsContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = (0, import_react66.useMemo)(() => [
+  const availableOperators = (0, import_react67.useMemo)(() => [
     ...TableFilterOperator.tags,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = (0, import_react66.useMemo)(() => {
+  const availableTags = (0, import_react67.useMemo)(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -15071,8 +15488,8 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
     return null;
   }
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Select,
       {
         value: operator,
@@ -15083,12 +15500,12 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      MultiSelectUncontrolled,
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      MultiSelect,
       {
         value: Array.isArray(parameter.searchTags) ? parameter.searchTags.map((tag) => String(tag)) : [],
         onValueChange: (selectedTags) => {
@@ -15098,18 +15515,84 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MultiSelectOption, { value: tag, children: label }, tag))
+        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MultiSelectOption, { value: tag, children: label }, tag))
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+  ] });
+};
+var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
+  const translation = useHightideTranslation();
+  const { table } = useTableDataContext();
+  const operator = filterValue?.operator ?? "tagsSingleContains";
+  const parameter = filterValue?.parameter ?? {};
+  const availableOperators = (0, import_react67.useMemo)(() => [
+    ...TableFilterOperator.tagsSingle,
+    ...TableFilterOperator.generic
+  ], []);
+  const availableTags = (0, import_react67.useMemo)(() => {
+    const column = table.getColumn(columnId);
+    if (!column) return [];
+    return column.columnDef.meta?.filterData?.tags ?? [];
+  }, [columnId, table]);
+  if (availableTags.length === 0) {
+    return null;
+  }
+  const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
+  const needsMultiSelect = operator === "tagsSingleContains" || operator === "tagsSingleNotContains";
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      Select,
+      {
+        value: operator,
+        onValueChange: (newOperator) => {
+          onFilterValueChange({
+            operator: newOperator,
+            parameter: needsParameterInput ? parameter : {}
+          });
+        },
+        buttonProps: { className: "min-w-64" },
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      MultiSelect,
+      {
+        value: Array.isArray(parameter.searchTagsContains) ? parameter.searchTagsContains.map((tag) => String(tag)) : [],
+        onValueChange: (selectedTags) => {
+          onFilterValueChange({
+            operator,
+            parameter: { searchTagsContains: selectedTags.length > 0 ? selectedTags : void 0 }
+          });
+        },
+        buttonProps: { className: "min-w-64" },
+        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MultiSelectOption, { value: tag, children: label }, tag))
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsParameterInput && !needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      Select,
+      {
+        value: parameter.searchTag ? String(parameter.searchTag) : void 0,
+        onValueChange: (selectedTag) => {
+          onFilterValueChange({
+            operator,
+            parameter: { searchTag: selectedTag ? String(selectedTag) : void 0 }
+          });
+        },
+        buttonProps: { className: "min-w-64" },
+        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: tag, children: label }, tag))
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "notUndefined";
-  const availableOperators = (0, import_react66.useMemo)(() => [
+  const availableOperators = (0, import_react67.useMemo)(() => [
     ...TableFilterOperator.generic
   ], []);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Select,
     {
       value: operator,
@@ -15120,56 +15603,60 @@ var GenericFilter = ({ filterValue, onFilterValueChange }) => {
         });
       },
       buttonProps: { className: "min-w-64" },
-      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
+      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
     }
   ) });
 };
 var TableFilterContent = ({ filterType, ...props }) => {
   switch (filterType) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TextFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TextFilter, { ...props });
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NumberFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(NumberFilter, { ...props });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DateFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DateFilter, { ...props });
+    case "datetime":
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DatetimeFilter, { ...props });
     case "boolean":
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BooleanFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BooleanFilter, { ...props });
     case "tags":
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TagsFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TagsFilter, { ...props });
+    case "tagsSingle":
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TagsSingleFilter, { ...props });
     case "generic":
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(GenericFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(GenericFilter, { ...props });
     default:
       return null;
   }
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react67.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react68.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = (0, import_react67.useRef)(null);
-  const containerRef = (0, import_react67.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react67.useState)(false);
-  const id = (0, import_react67.useId)();
-  const ids = (0, import_react67.useMemo)(() => ({
+  const anchorRef = (0, import_react68.useRef)(null);
+  const containerRef = (0, import_react68.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react68.useState)(false);
+  const id = (0, import_react68.useId)();
+  const ids = (0, import_react68.useMemo)(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   if (filterType === "tags" && (!column.columnDef.meta?.filterData?.tags?.length || column.columnDef.meta.filterData.tags.length === 0)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Tooltip, { tooltip: translation("filter"), position: "top", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       Button,
       {
         ref: anchorRef,
@@ -15185,12 +15672,12 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "relative",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.FilterIcon, { className: "size-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react19.FilterIcon, { className: "size-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
         ]
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       PopUp,
       {
         ref: containerRef,
@@ -15206,8 +15693,8 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "flex-col-2 p-2 items-start",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { id: ids.label, className: "typography-label-lg font-semibold", children: translation("filter") }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { id: ids.label, className: "typography-label-lg font-semibold", children: translation("filter") }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             TableFilterContent,
             {
               columnId: column.id,
@@ -15216,12 +15703,12 @@ var TableFilterButton = ({
               onFilterValueChange: setFilterValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-            hasFilter && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { color: "negative", size: "sm", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+            hasFilter && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { color: "negative", size: "sm", onClick: () => {
               column.setFilterValue(void 0);
               setIsOpen(false);
             }, children: translation("remove") }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { size: "sm", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { size: "sm", onClick: () => {
               if (filterValue) {
                 column.setFilterValue(filterValue);
               }
@@ -15235,12 +15722,12 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-var import_react68 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_react69 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var TableHeader = ({ table: tableOverride, isSticky = false }) => {
   const { table: tableState } = useTableHeaderContext();
   const table = tableOverride ?? tableState;
-  const handleResizeMove = (0, import_react68.useCallback)((e) => {
+  const handleResizeMove = (0, import_react69.useCallback)((e) => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
     const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
@@ -15256,7 +15743,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = (0, import_react68.useCallback)(() => {
+  const handleResizeEnd = (0, import_react69.useCallback)(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -15274,7 +15761,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -15282,8 +15769,8 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "col",
       {
         style: {
@@ -15294,16 +15781,16 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       },
       header.id
     )) }, headerGroup.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { className: (0, import_clsx33.default)("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("tr", { className: (0, import_clsx34.default)("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
         "th",
         {
           colSpan: header.colSpan,
           "data-sticky": isSticky ? "" : void 0,
-          className: (0, import_clsx33.default)("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
+          className: (0, import_clsx34.default)("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1 items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-1 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 TableSortButton,
                 {
                   sortDirection: header.column.getIsSorted(),
@@ -15329,7 +15816,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanFilter() && isTableFilterCategory(header.column.columnDef.filterFn), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: header.column.getCanFilter() && isTableFilterCategory(header.column.columnDef.filterFn), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 TableFilterButton,
                 {
                   column: header.column,
@@ -15341,7 +15828,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
                 header.getContext()
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
               "div",
               {
                 onPointerDown: (e) => {
@@ -15372,8 +15859,8 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var TableDisplay = ({
   children,
   containerProps,
@@ -15383,43 +15870,47 @@ var TableDisplay = ({
   const { table } = useTableDataContext();
   const { containerRef } = useTableContainerContext();
   const { sizeVars } = useTableHeaderContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...containerProps, ref: containerRef, className: (0, import_clsx34.default)("table-container", containerProps?.className), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...containerProps, ref: containerRef, className: (0, import_clsx35.default)("table-container", containerProps?.className), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "table",
     {
       ...props,
-      className: (0, import_clsx34.default)("table", props.className),
+      className: (0, import_clsx35.default)("table", props.className),
       style: {
         ...sizeVars,
         width: Math.floor(Math.max(table.getTotalSize(), containerRef.current?.offsetWidth ?? table.getTotalSize()))
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableHeader, { ...tableHeaderProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableBody, {})
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TableHeader, { ...tableHeaderProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TableBody, {})
       ]
     }
   ) });
 };
 
 // src/components/layout/table/TablePagination.tsx
-var import_react69 = require("react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var TablePaginationMenu = () => {
+var import_react70 = require("react");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableDataContext();
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     const { pageIndex } = table.getState().pagination;
     const pageCount = table.getPageCount();
     if (pageIndex >= pageCount || pageIndex < 0) {
       table.setPageIndex(MathUtil.clamp(pageIndex, [0, pageCount - 1]));
     }
   }, [table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     Pagination,
     {
+      ...props,
       pageIndex: table.getState().pagination.pageIndex,
       pageCount: table.getPageCount(),
-      onPageIndexChanged: (page) => table.setPageIndex(page)
+      onPageIndexChanged: (page) => {
+        table.setPageIndex(page);
+        props.onPageIndexChanged?.(page);
+      }
     }
   );
 };
@@ -15430,92 +15921,21 @@ var TablePageSizeSelect = ({
 }) => {
   const { table } = useTableDataContext();
   const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     Select,
     {
       ...props,
       value: currentPageSize.toString(),
       onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectOption, { value: size.toString(), children: size }, size))
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SelectOption, { value: size.toString(), children: size }, size))
     }
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...props, className: (0, import_clsx35.default)("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TablePaginationMenu, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "absolute left-1/1 top-1/2 -translate-y-1/2 translate-x-4 h-10 min-w-24" } }) })
-  ] }) });
-};
-
-// src/components/user-interaction/Checkbox.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_react70 = require("react");
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var Checkbox = ({
-  value = false,
-  indeterminate = false,
-  required = false,
-  invalid = false,
-  disabled = false,
-  readOnly = false,
-  onValueChange,
-  onEditComplete,
-  size = "md",
-  alwaysShowCheckIcon = false,
-  ...props
-}) => {
-  const onChangeWrapper = (0, import_react70.useCallback)(() => {
-    onValueChange?.(!value);
-    onEditComplete?.(!value);
-  }, [onEditComplete, onValueChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
-    "div",
-    {
-      ...props,
-      onClick: (event) => {
-        if (!disabled) {
-          onChangeWrapper();
-          props.onClick?.(event);
-        }
-      },
-      onKeyDown: (event) => {
-        if (disabled) return;
-        if (event.key === " " || event.key === "Enter") {
-          event.preventDefault();
-          onChangeWrapper();
-          props.onKeyDown?.(event);
-        }
-      },
-      "data-checked": !indeterminate ? value : "indeterminate",
-      "data-size": size ?? void 0,
-      ...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required }),
-      role: "checkbox",
-      tabIndex: disabled ? -1 : 0,
-      "aria-checked": indeterminate ? "mixed" : value,
-      ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
-      className: (0, import_clsx36.default)("checkbox", props.className),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react19.Minus, { className: "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react19.Check, { className: "checkbox-indicator", "aria-hidden": true }) })
-      ]
-    }
-  );
-};
-var CheckboxUncontrolled = ({
-  value: initialValue,
-  onValueChange,
-  ...props
-}) => {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    Checkbox,
-    {
-      ...props,
-      value,
-      onValueChange: setValue
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...props, className: (0, import_clsx36.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TablePaginationMenu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
+  ] });
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
@@ -15531,6 +15951,7 @@ var TableWithSelectionProvider = ({
   onRowClick,
   ...props
 }) => {
+  const translation = useHightideTranslation();
   const columnDef = (0, import_react71.useMemo)(() => [
     {
       id: selectionRowId,
@@ -15563,10 +15984,13 @@ var TableWithSelectionProvider = ({
       enableResizing: false,
       enableSorting: false,
       enableHiding: false,
-      enableColumnFilter: false
+      enableColumnFilter: false,
+      meta: {
+        columnLabel: translation("selection")
+      }
     },
     ...props.columns ?? []
-  ], [selectionRowId, props.columns]);
+  ], [selectionRowId, props.columns, translation]);
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     TableProvider,
     {
@@ -15785,6 +16209,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
   };
   const getColumnHeader = (columnId) => {
     const column = table.getColumn(columnId);
+    const columnLabel = column?.columnDef.meta?.columnLabel;
+    if (columnLabel) {
+      return columnLabel;
+    }
     const header = column?.columnDef.header;
     if (typeof header === "string") {
       return header;
@@ -16984,9 +17412,9 @@ var import_lucide_react29 = require("lucide-react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
-  onRemove,
   onValueChange,
   onEditComplete,
+  onValueClear,
   readOnly,
   suffix,
   ...baseProps
@@ -16997,7 +17425,7 @@ var NumberProperty = ({
     PropertyBase,
     {
       ...baseProps,
-      onRemove,
+      onValueClear,
       hasValue,
       icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react29.Binary, { size: 24 }),
       children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
@@ -17019,7 +17447,7 @@ var NumberProperty = ({
                 onValueChange: (value2) => {
                   const numberValue = parseFloat(value2);
                   if (isNaN(numberValue)) {
-                    onRemove();
+                    onValueClear();
                   } else {
                     onValueChange?.(numberValue);
                   }
@@ -17027,7 +17455,7 @@ var NumberProperty = ({
                 onEditComplete: (value2) => {
                   const numberValue = parseFloat(value2);
                   if (isNaN(numberValue)) {
-                    onRemove();
+                    onValueClear();
                   } else {
                     onEditComplete?.(numberValue);
                   }
@@ -17098,7 +17526,6 @@ var import_jsx_runtime91 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
-  onRemove,
   onValueChange,
   onEditComplete,
   ...baseProps
@@ -17109,7 +17536,6 @@ var TextProperty = ({
     PropertyBase,
     {
       ...baseProps,
-      onRemove,
       hasValue,
       icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react31.Text, { size: 24 }),
       children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
@@ -17122,20 +17548,8 @@ var TextProperty = ({
           value: value ?? "",
           readOnly,
           placeholder: translation("text"),
-          onValueChange: (value2) => {
-            if (!value2) {
-              onRemove?.();
-            } else {
-              onValueChange?.(value2);
-            }
-          },
-          onEditComplete: (value2) => {
-            if (!value2) {
-              onRemove?.();
-            } else {
-              onEditComplete?.(value2);
-            }
-          }
+          onValueChange: (value2) => onValueChange?.(value2),
+          onEditComplete: (value2) => onEditComplete?.(value2)
         }
       )
     }
@@ -17745,6 +18159,7 @@ var PromiseUtils = {
   DateTimePickerDialog,
   DateTimePickerUncontrolled,
   DateUtils,
+  DatetimeFilter,
   DayPicker,
   DayPickerUncontrolled,
   Dialog,
@@ -17880,6 +18295,7 @@ var PromiseUtils = {
   TableWithSelectionProvider,
   TagIcon,
   TagsFilter,
+  TagsSingleFilter,
   TextFilter,
   TextImage,
   TextProperty,
@@ -17909,6 +18325,14 @@ var PromiseUtils = {
   createLoopingList,
   createLoopingListWithIndex,
   equalSizeGroups,
+  filterBoolean,
+  filterDate,
+  filterDatetime,
+  filterGeneric,
+  filterNumber,
+  filterTags,
+  filterTagsSingle,
+  filterText,
   formatDate,
   formatDateTime,
   getBetweenDuration,