@helpwave/hightide 0.6.11 → 0.6.13

package/dist/index.mjs

@@ -7089,17 +7089,17 @@ function useFormObserver({ formStore } = {}) {
     hasTriedSubmitting
   };
 }
-function useFormObserverKey({ formStore, key }) {
+function useFormObserverKey({ formStore, formKey }) {
   const context = useContext(FormContext);
   const store = formStore ?? context?.store;
   const subscribe = useCallback2((cb) => {
     if (!store) return () => {
     };
-    return store.subscribe(key, cb);
-  }, [store, key]);
-  const value = useSyncExternalStore(subscribe, () => store ? store.getValue(key) : void 0);
-  const error = useSyncExternalStore(subscribe, () => store ? store.getError(key) : void 0);
-  const touched = useSyncExternalStore(subscribe, () => store ? store.getTouched(key) : void 0);
+    return store.subscribe(formKey, cb);
+  }, [store, formKey]);
+  const value = useSyncExternalStore(subscribe, () => store ? store.getValue(formKey) : void 0);
+  const error = useSyncExternalStore(subscribe, () => store ? store.getError(formKey) : void 0);
+  const touched = useSyncExternalStore(subscribe, () => store ? store.getTouched(formKey) : void 0);
   if (!store) return null;
   return {
     store,
@@ -7151,8 +7151,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>");
   }
@@ -7408,11 +7408,11 @@ function useCreateForm({
   const callbacks = useMemo3(() => ({
     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()
@@ -7946,6 +7946,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`,
@@ -8091,6 +8092,14 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sorting": `Sortierung`,
+    "sSortingState": ({ sortDirection }) => {
+      return TranslationGen.resolveSelect(sortDirection, {
+        "asc": `Sortierung (Aktuell Aufsteigend)`,
+        "desc": `Sortierung (Aktuell Absteigend)`,
+        "other": `Sortierung (Aktuell Keine)`
+      });
+    },
     "startDate": `Start`,
     "startsWith": `Beginnt mit`,
     "sThemeMode": ({ theme }) => {
@@ -8243,6 +8252,7 @@ var hightideTranslation = {
     "between": `Between`,
     "cancel": `Cancel`,
     "carousel": `Carousel`,
+    "caseSensitive": `Case Sensitive`,
     "change": `Change`,
     "changeColumnDisplay": `Change column display`,
     "chooseLanguage": `Choose your language`,
@@ -8388,6 +8398,14 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sorting": `Sorting`,
+    "sSortingState": ({ sortDirection }) => {
+      return TranslationGen.resolveSelect(sortDirection, {
+        "asc": `Sorting (Currently Ascending)`,
+        "desc": `Sorting (Currently Descending)`,
+        "other": `Sorting (Currently None)`
+      });
+    },
     "startDate": `Start`,
     "startsWith": `Starts with`,
     "sThemeMode": ({ theme }) => {
@@ -12541,8 +12559,7 @@ var Pagination = ({
   pageIndex,
   pageCount,
   onPageIndexChanged,
-  className,
-  style
+  ...props
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useState25((pageIndex + 1).toString());
@@ -12559,7 +12576,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageIndexChanged(page);
   };
-  return /* @__PURE__ */ jsxs25("div", { className: clsx23("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ jsxs25("div", { ...props, className: clsx23("flex-row-1", props.className), children: [
     /* @__PURE__ */ jsx50(Tooltip, { tooltip: translation("first"), children: /* @__PURE__ */ jsx50(
       Button,
       {
@@ -12935,27 +12952,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;
@@ -12976,11 +12982,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;
@@ -13005,58 +13019,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);
@@ -13077,9 +13090,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":
@@ -13093,9 +13167,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) {
@@ -13130,11 +13203,19 @@ 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":
@@ -13142,13 +13223,73 @@ var genericFilter = (row, columnId, filterValue) => {
     default:
       return false;
   }
+}
+function filterGeneric(value, filterValue) {
+  const operator = filterValue.operator;
+  switch (operator) {
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    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
 };
 
@@ -13406,7 +13547,7 @@ var TableBody = React5.memo(function TableBodyVisual() {
 
 // src/components/layout/table/TableHeader.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import clsx33 from "clsx";
+import clsx34 from "clsx";
 
 // src/components/layout/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp as ChevronUp2 } from "lucide-react";
@@ -13432,31 +13573,41 @@ var TableSortButton = ({
     icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx57(ChevronUp2, { className: "size-4" }) : /* @__PURE__ */ jsx57(ChevronDown3, { className: "size-4" });
   }
   const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
-  return /* @__PURE__ */ jsx57(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs28(
-    Button,
+  return /* @__PURE__ */ jsx57(
+    Tooltip,
     {
-      layout: hasSortingIndex ? "default" : "icon",
-      color,
-      size,
-      className: clsx28("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx57(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx57(
-          "div",
-          {
-            className: clsx28("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__ */ jsxs28("div", { className: "flex-col-2", children: [
+        /* @__PURE__ */ jsx57("span", { children: translation("sSortingState", { sortDirection: sortDirection || "none" }) }),
+        /* @__PURE__ */ jsx57(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx57("span", { children: translation("rSortingOrderAfter", { otherSortings: index - 1 }) }) })
+      ] }),
+      position: "top",
+      children: /* @__PURE__ */ jsxs28(
+        Button,
+        {
+          layout: hasSortingIndex ? "default" : "icon",
+          color,
+          size,
+          className: clsx28("relative", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx57(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx57(
+              "div",
+              {
+                className: clsx28("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
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect30, useId as useId14, useMemo as useMemo26, useRef as useRef24, useState as useState32 } from "react";
+import { useEffect as useEffect30, useId as useId15, useMemo as useMemo26, useRef as useRef24, useState as useState32 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
 import { forwardRef as forwardRef14, useCallback as useCallback21, useEffect as useEffect29, useId as useId13, useImperativeHandle as useImperativeHandle9, useMemo as useMemo24, useRef as useRef23, useState as useState30 } from "react";
@@ -14386,7 +14537,7 @@ var DateTimeInput = forwardRef14(function DateTimeInput2({
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
-import { useMemo as useMemo25, useState as useState31 } from "react";
+import { useId as useId14, useMemo as useMemo25, useState as useState31 } from "react";
 
 // src/components/user-interaction/select/MultiSelect.tsx
 import { forwardRef as forwardRef15 } from "react";
@@ -14435,119 +14586,240 @@ import {
   CircleDashed,
   CircleDot
 } from "lucide-react";
+
+// src/components/user-interaction/Checkbox.tsx
+import { Check as Check2, Minus as Minus2 } from "lucide-react";
+import { useCallback as useCallback22 } from "react";
+import clsx33 from "clsx";
 import { jsx as jsx66, jsxs as jsxs37 } from "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 = useCallback22(() => {
+    onValueChange?.(!value);
+    onEditComplete?.(!value);
+  }, [onEditComplete, onValueChange, value]);
+  return /* @__PURE__ */ jsxs37(
+    "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: clsx33("checkbox", props.className),
+      children: [
+        /* @__PURE__ */ jsx66(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx66(Minus2, { className: "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx66(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx66(Check2, { className: "checkbox-indicator", "aria-hidden": true }) })
+      ]
+    }
+  );
+};
+var CheckboxUncontrolled = ({
+  value: initialValue,
+  onValueChange,
+  ...props
+}) => {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ jsx66(
+    Checkbox,
+    {
+      ...props,
+      value,
+      onValueChange: setValue
+    }
+  );
+};
+
+// src/components/layout/table/TableFilterPopups.tsx
+import { jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
 var getOperatorInfo = (operator) => {
   switch (operator) {
     case "textEquals":
-      return { icon: /* @__PURE__ */ jsx66(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ jsx67(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "textNotEquals":
-      return { icon: /* @__PURE__ */ jsx66(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ jsx67(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "textNotWhitespace":
-      return { icon: /* @__PURE__ */ jsx66(TextInitial, { className: "w-4 h-4" }), translationKey: "filterNonWhitespace" };
+      return { icon: /* @__PURE__ */ jsx67(TextInitial, { className: "w-4 h-4" }), translationKey: "filterNonWhitespace" };
     case "textContains":
-      return { icon: /* @__PURE__ */ jsx66(SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+      return { icon: /* @__PURE__ */ jsx67(SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
     case "textNotContains":
-      return { icon: /* @__PURE__ */ jsx66(SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+      return { icon: /* @__PURE__ */ jsx67(SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
     case "textStartsWith":
-      return { icon: /* @__PURE__ */ jsx66(ArrowRight, { className: "w-4 h-4" }), translationKey: "startsWith" };
+      return { icon: /* @__PURE__ */ jsx67(ArrowRight, { className: "w-4 h-4" }), translationKey: "startsWith" };
     case "textEndsWith":
-      return { icon: /* @__PURE__ */ jsx66(ArrowLeft, { className: "w-4 h-4" }), translationKey: "endsWith" };
+      return { icon: /* @__PURE__ */ jsx67(ArrowLeft, { className: "w-4 h-4" }), translationKey: "endsWith" };
     case "numberEquals":
-      return { icon: /* @__PURE__ */ jsx66(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ jsx67(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "numberNotEquals":
-      return { icon: /* @__PURE__ */ jsx66(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ jsx67(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "numberGreaterThan":
-      return { icon: /* @__PURE__ */ jsx66(ChevronRight4, { className: "w-4 h-4" }), translationKey: "greaterThan" };
+      return { icon: /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }), translationKey: "greaterThan" };
     case "numberGreaterThanOrEqual":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronRight4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "greaterThanOrEqual"
       };
     case "numberLessThan":
-      return { icon: /* @__PURE__ */ jsx66(ChevronLeft4, { className: "w-4 h-4" }), translationKey: "lessThan" };
+      return { icon: /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }), translationKey: "lessThan" };
     case "numberLessThanOrEqual":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronLeft4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "lessThanOrEqual"
       };
     case "numberBetween":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronRight4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(ChevronLeft4, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "between"
       };
     case "numberNotBetween":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronLeft4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(ChevronRight4, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "notBetween"
       };
     case "dateEquals":
-      return { icon: /* @__PURE__ */ jsx66(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ jsx67(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "dateNotEquals":
-      return { icon: /* @__PURE__ */ jsx66(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ jsx67(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "dateGreaterThan":
-      return { icon: /* @__PURE__ */ jsx66(ChevronRight4, { className: "w-4 h-4" }), translationKey: "after" };
+      return { icon: /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }), translationKey: "after" };
     case "dateGreaterThanOrEqual":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronRight4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "onOrAfter"
       };
     case "dateLessThan":
-      return { icon: /* @__PURE__ */ jsx66(ChevronLeft4, { className: "w-4 h-4" }), translationKey: "before" };
+      return { icon: /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }), translationKey: "before" };
     case "dateLessThanOrEqual":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronLeft4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "onOrBefore"
       };
     case "dateBetween":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronRight4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(ChevronLeft4, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "between"
       };
     case "dateNotBetween":
       return {
-        icon: /* @__PURE__ */ jsxs37("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ jsx66(ChevronLeft4, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx66(ChevronRight4, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "notBetween"
       };
     case "booleanIsTrue":
-      return { icon: /* @__PURE__ */ jsx66(CheckCircle2, { className: "w-4 h-4" }), translationKey: "isTrue" };
+      return { icon: /* @__PURE__ */ jsx67(CheckCircle2, { className: "w-4 h-4" }), translationKey: "isTrue" };
     case "booleanIsFalse":
-      return { icon: /* @__PURE__ */ jsx66(XCircle, { className: "w-4 h-4" }), translationKey: "isFalse" };
+      return { icon: /* @__PURE__ */ jsx67(XCircle, { className: "w-4 h-4" }), translationKey: "isFalse" };
     case "tagsEquals":
-      return { icon: /* @__PURE__ */ jsx66(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ jsx67(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "tagsNotEquals":
-      return { icon: /* @__PURE__ */ jsx66(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ jsx67(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "tagsContains":
-      return { icon: /* @__PURE__ */ jsx66(SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+      return { icon: /* @__PURE__ */ jsx67(SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
     case "tagsNotContains":
-      return { icon: /* @__PURE__ */ jsx66(SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+      return { icon: /* @__PURE__ */ jsx67(SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+    case "datetimeEquals":
+      return { icon: /* @__PURE__ */ jsx67(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+    case "datetimeNotEquals":
+      return { icon: /* @__PURE__ */ jsx67(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+    case "datetimeGreaterThan":
+      return { icon: /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }), translationKey: "after" };
+    case "datetimeGreaterThanOrEqual":
+      return {
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(Equal, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "onOrAfter"
+      };
+    case "datetimeLessThan":
+      return { icon: /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }), translationKey: "before" };
+    case "datetimeLessThanOrEqual":
+      return {
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(Equal, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "onOrBefore"
+      };
+    case "datetimeBetween":
+      return {
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "between"
+      };
+    case "datetimeNotBetween":
+      return {
+        icon: /* @__PURE__ */ jsxs38("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ jsx67(ChevronLeft4, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx67(ChevronRight4, { className: "-ml-1 w-4 h-4" })
+        ] }),
+        translationKey: "notBetween"
+      };
+    case "tagsSingleEquals":
+      return { icon: /* @__PURE__ */ jsx67(Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+    case "tagsSingleNotEquals":
+      return { icon: /* @__PURE__ */ jsx67(EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+    case "tagsSingleContains":
+      return { icon: /* @__PURE__ */ jsx67(SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+    case "tagsSingleNotContains":
+      return { icon: /* @__PURE__ */ jsx67(SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
     case "undefined":
-      return { icon: /* @__PURE__ */ jsx66(CircleDashed, { className: "w-4 h-4" }), translationKey: "filterUndefined" };
+      return { icon: /* @__PURE__ */ jsx67(CircleDashed, { className: "w-4 h-4" }), translationKey: "filterUndefined" };
     case "notUndefined":
-      return { icon: /* @__PURE__ */ jsx66(CircleDot, { className: "w-4 h-4" }), translationKey: "filterNotUndefined" };
+      return { icon: /* @__PURE__ */ jsx67(CircleDot, { className: "w-4 h-4" }), translationKey: "filterNotUndefined" };
     default:
       return { icon: null, translationKey: "undefined translation" };
   }
@@ -14556,22 +14828,23 @@ var OperatorLabel = ({ operator }) => {
   const translation = useHightideTranslation();
   const { icon, translationKey } = getOperatorInfo(operator);
   const label = typeof translationKey === "string" ? translation(translationKey) : translationKey;
-  return /* @__PURE__ */ jsxs37("div", { className: "flex-row-1 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs38("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 id = useId14();
   const availableOperators = useMemo25(() => [
     ...TableFilterOperator.text,
     ...TableFilterOperator.generic
   ], []);
   const needsParameterInput = !["textNotWhitespace", "undefined", "notUndefined"].includes(operator);
-  return /* @__PURE__ */ jsxs37("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ jsx67(
       Select,
       {
         value: operator,
@@ -14582,30 +14855,48 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ jsx66(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx66(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ jsx66("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsx66(
-      Input,
-      {
-        value: parameter.searchText ?? "",
-        placeholder: translation("search") + "...",
-        onValueChange: (searchText) => {
-          onFilterValueChange({
-            operator,
-            parameter: { searchText }
-          });
-        },
-        className: "min-w-64"
-      }
-    ) }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx66("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ jsx67("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ jsxs38(Visibility, { isVisible: needsParameterInput, children: [
+      /* @__PURE__ */ jsx67(
+        Input,
+        {
+          value: parameter.searchText ?? "",
+          placeholder: translation("search") + "...",
+          onValueChange: (searchText) => {
+            onFilterValueChange({
+              operator,
+              parameter: { ...parameter, searchText }
+            });
+          },
+          className: "min-w-64"
+        }
+      ),
+      /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 items-center gap-2", children: [
+        /* @__PURE__ */ jsx67(
+          Checkbox,
+          {
+            id,
+            value: parameter.isCaseSensitive ?? false,
+            onValueChange: (isCaseSensitive) => {
+              onFilterValueChange({
+                operator,
+                parameter: { ...parameter, isCaseSensitive }
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx67("label", { htmlFor: id, children: translation("caseSensitive") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx67("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 = useMemo25(() => [
     ...TableFilterOperator.number,
@@ -14613,8 +14904,8 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   ], []);
   const needsRangeInput = operator === "numberBetween" || operator === "numberNotBetween";
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ jsxs37("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ jsx67(
       Select,
       {
         value: operator,
@@ -14625,12 +14916,12 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ jsx66(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx66(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ jsx66("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs37("div", { className: "flex-col-2 gap-2", children: [
-      /* @__PURE__ */ jsx66(FormFieldLayout, { label: translation("min"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ jsx67(FormFieldLayout, { label: translation("min"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ jsx67(
         Input,
         {
           ...ariaAttributes,
@@ -14649,7 +14940,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
           className: "input-indicator-hidden min-w-64"
         }
       ) }),
-      /* @__PURE__ */ jsx66(FormFieldLayout, { label: translation("max"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ jsx66(
+      /* @__PURE__ */ jsx67(FormFieldLayout, { label: translation("max"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ jsx67(
         Input,
         {
           ...ariaAttributes,
@@ -14669,7 +14960,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx67(
       Input,
       {
         value: parameter.compareValue?.toString() ?? "",
@@ -14685,12 +14976,12 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx66("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx67("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] = useState31(null);
   const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState31(null);
@@ -14700,8 +14991,8 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
   ], []);
   const needsRangeInput = operator === "dateBetween" || operator === "dateNotBetween";
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ jsxs37("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ jsx67(
       Select,
       {
         value: operator,
@@ -14712,12 +15003,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ jsx66(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx66(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ jsx66("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs37("div", { className: "flex-col-2 gap-2", children: [
-      /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ jsx67(
         DateTimeInput,
         {
           value: temporaryMinDateValue ?? parameter.min ?? null,
@@ -14750,7 +15041,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
-      /* @__PURE__ */ jsx66(
+      /* @__PURE__ */ jsx67(
         DateTimeInput,
         {
           value: temporaryMaxDateValue ?? parameter.max ?? null,
@@ -14783,7 +15074,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx67(
       DateTimeInput,
       {
         value: parameter.compareDate ?? null,
@@ -14799,7 +15090,123 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx66("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx67("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] = useState31(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState31(null);
+  const availableOperators = useMemo25(() => [
+    ...TableFilterOperator.datetime,
+    ...TableFilterOperator.generic
+  ], []);
+  const needsRangeInput = operator === "datetimeBetween" || operator === "datetimeNotBetween";
+  const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
+  return /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ jsx67(
+      Select,
+      {
+        value: operator,
+        onValueChange: (newOperator) => {
+          onFilterValueChange({
+            operator: newOperator,
+            parameter: needsParameterInput ? parameter : {}
+          });
+        },
+        buttonProps: { className: "min-w-64" },
+        children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
+      }
+    ),
+    /* @__PURE__ */ jsx67("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ jsx67(
+        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__ */ jsx67(
+        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__ */ jsx67(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx67(
+      DateTimeInput,
+      {
+        value: parameter.compareDatetime ?? null,
+        placeholder: translation("date"),
+        onValueChange: (compareDatetime) => {
+          onFilterValueChange({
+            operator,
+            parameter: { compareDatetime }
+          });
+        },
+        allowRemove: true,
+        outsideClickCloses: false,
+        className: "min-w-64"
+      }
+    ) }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx67("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
@@ -14808,7 +15215,7 @@ var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
-  return /* @__PURE__ */ jsx66("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx67(
     Select,
     {
       value: operator,
@@ -14819,7 +15226,7 @@ var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
         });
       },
       buttonProps: { className: "min-w-64" },
-      children: availableOperators.map((op) => /* @__PURE__ */ jsx66(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx66(OperatorLabel, { operator: op }) }, op))
+      children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
     }
   ) });
 };
@@ -14841,8 +15248,8 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
     return null;
   }
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ jsxs37("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ jsx67(
       Select,
       {
         value: operator,
@@ -14853,12 +15260,12 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ jsx66(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx66(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ jsx66("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsx66(
-      MultiSelectUncontrolled,
+    /* @__PURE__ */ jsx67("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsx67(
+      MultiSelect,
       {
         value: Array.isArray(parameter.searchTags) ? parameter.searchTags.map((tag) => String(tag)) : [],
         onValueChange: (selectedTags) => {
@@ -14868,10 +15275,76 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ jsx66(MultiSelectOption, { value: tag, children: label }, tag))
+        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ jsx67(MultiSelectOption, { value: tag, children: label }, tag))
       }
     ) }),
-    /* @__PURE__ */ jsx66(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx66("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx67("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 = useMemo25(() => [
+    ...TableFilterOperator.tagsSingle,
+    ...TableFilterOperator.generic
+  ], []);
+  const availableTags = useMemo25(() => {
+    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__ */ jsxs38("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ jsx67(
+      Select,
+      {
+        value: operator,
+        onValueChange: (newOperator) => {
+          onFilterValueChange({
+            operator: newOperator,
+            parameter: needsParameterInput ? parameter : {}
+          });
+        },
+        buttonProps: { className: "min-w-64" },
+        children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
+      }
+    ),
+    /* @__PURE__ */ jsx67("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ jsx67(
+      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__ */ jsx67(MultiSelectOption, { value: tag, children: label }, tag))
+      }
+    ) }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: needsParameterInput && !needsMultiSelect, children: /* @__PURE__ */ jsx67(
+      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__ */ jsx67(SelectOption, { value: tag, children: label }, tag))
+      }
+    ) }),
+    /* @__PURE__ */ jsx67(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx67("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
@@ -14879,7 +15352,7 @@ var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const availableOperators = useMemo25(() => [
     ...TableFilterOperator.generic
   ], []);
-  return /* @__PURE__ */ jsx66("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx67(
     Select,
     {
       value: operator,
@@ -14890,31 +15363,35 @@ var GenericFilter = ({ filterValue, onFilterValueChange }) => {
         });
       },
       buttonProps: { className: "min-w-64" },
-      children: availableOperators.map((op) => /* @__PURE__ */ jsx66(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx66(OperatorLabel, { operator: op }) }, op))
+      children: availableOperators.map((op) => /* @__PURE__ */ jsx67(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ jsx67(OperatorLabel, { operator: op }) }, op))
     }
   ) });
 };
 var TableFilterContent = ({ filterType, ...props }) => {
   switch (filterType) {
     case "text":
-      return /* @__PURE__ */ jsx66(TextFilter, { ...props });
+      return /* @__PURE__ */ jsx67(TextFilter, { ...props });
     case "number":
-      return /* @__PURE__ */ jsx66(NumberFilter, { ...props });
+      return /* @__PURE__ */ jsx67(NumberFilter, { ...props });
     case "date":
-      return /* @__PURE__ */ jsx66(DateFilter, { ...props });
+      return /* @__PURE__ */ jsx67(DateFilter, { ...props });
+    case "datetime":
+      return /* @__PURE__ */ jsx67(DatetimeFilter, { ...props });
     case "boolean":
-      return /* @__PURE__ */ jsx66(BooleanFilter, { ...props });
+      return /* @__PURE__ */ jsx67(BooleanFilter, { ...props });
     case "tags":
-      return /* @__PURE__ */ jsx66(TagsFilter, { ...props });
+      return /* @__PURE__ */ jsx67(TagsFilter, { ...props });
+    case "tagsSingle":
+      return /* @__PURE__ */ jsx67(TagsSingleFilter, { ...props });
     case "generic":
-      return /* @__PURE__ */ jsx66(GenericFilter, { ...props });
+      return /* @__PURE__ */ jsx67(GenericFilter, { ...props });
     default:
       return null;
   }
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
@@ -14926,7 +15403,7 @@ var TableFilterButton = ({
   const anchorRef = useRef24(null);
   const containerRef = useRef24(null);
   const [isOpen, setIsOpen] = useState32(false);
-  const id = useId14();
+  const id = useId15();
   const ids = useMemo26(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
@@ -14938,8 +15415,8 @@ var TableFilterButton = ({
   if (filterType === "tags" && (!column.columnDef.meta?.filterData?.tags?.length || column.columnDef.meta.filterData.tags.length === 0)) {
     return null;
   }
-  return /* @__PURE__ */ jsxs38(Fragment8, { children: [
-    /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(Fragment8, { children: [
+    /* @__PURE__ */ jsx68(Tooltip, { tooltip: translation("filter"), position: "top", children: /* @__PURE__ */ jsxs39(
       Button,
       {
         ref: anchorRef,
@@ -14955,12 +15432,12 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "relative",
         children: [
-          /* @__PURE__ */ jsx67(FilterIcon, { className: "size-4" }),
-          /* @__PURE__ */ jsx67(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ jsx67("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
+          /* @__PURE__ */ jsx68(FilterIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx68(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ jsx68("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs38(
+    ) }),
+    /* @__PURE__ */ jsxs39(
       PopUp,
       {
         ref: containerRef,
@@ -14976,8 +15453,8 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "flex-col-2 p-2 items-start",
         children: [
-          /* @__PURE__ */ jsx67("span", { id: ids.label, className: "typography-label-lg font-semibold", children: translation("filter") }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68("span", { id: ids.label, className: "typography-label-lg font-semibold", children: translation("filter") }),
+          /* @__PURE__ */ jsx68(
             TableFilterContent,
             {
               columnId: column.id,
@@ -14986,12 +15463,12 @@ var TableFilterButton = ({
               onFilterValueChange: setFilterValue
             }
           ),
-          /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end w-full", children: [
-            hasFilter && /* @__PURE__ */ jsx67(Button, { color: "negative", size: "sm", onClick: () => {
+          /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 justify-end w-full", children: [
+            hasFilter && /* @__PURE__ */ jsx68(Button, { color: "negative", size: "sm", onClick: () => {
               column.setFilterValue(void 0);
               setIsOpen(false);
             }, children: translation("remove") }),
-            /* @__PURE__ */ jsx67(Button, { size: "sm", onClick: () => {
+            /* @__PURE__ */ jsx68(Button, { size: "sm", onClick: () => {
               if (filterValue) {
                 column.setFilterValue(filterValue);
               }
@@ -15005,12 +15482,12 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback22, useEffect as useEffect31 } from "react";
-import { Fragment as Fragment9, jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useCallback as useCallback23, useEffect as useEffect31 } from "react";
+import { Fragment as Fragment9, jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
 var TableHeader = ({ table: tableOverride, isSticky = false }) => {
   const { table: tableState } = useTableHeaderContext();
   const table = tableOverride ?? tableState;
-  const handleResizeMove = useCallback22((e) => {
+  const handleResizeMove = useCallback23((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);
@@ -15026,7 +15503,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = useCallback22(() => {
+  const handleResizeEnd = useCallback23(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -15052,8 +15529,8 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ jsxs39(Fragment9, { children: [
-    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx68("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs40(Fragment9, { children: [
+    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx69("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx69(
       "col",
       {
         style: {
@@ -15064,16 +15541,16 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       },
       header.id
     )) }, headerGroup.id)),
-    /* @__PURE__ */ jsx68("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx68("tr", { className: clsx33("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ jsxs39(
+    /* @__PURE__ */ jsx69("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx69("tr", { className: clsx34("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ jsxs40(
         "th",
         {
           colSpan: header.colSpan,
           "data-sticky": isSticky ? "" : void 0,
-          className: clsx33("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
+          className: clsx34("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ jsx68(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs39("div", { className: "flex-row-1 items-center", children: [
-              /* @__PURE__ */ jsx68(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx69(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs40("div", { className: "flex-row-1 items-center", children: [
+              /* @__PURE__ */ jsx69(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx69(
                 TableSortButton,
                 {
                   sortDirection: header.column.getIsSorted(),
@@ -15099,7 +15576,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsx68(Visibility, { isVisible: header.column.getCanFilter() && isTableFilterCategory(header.column.columnDef.filterFn), children: /* @__PURE__ */ jsx68(
+              /* @__PURE__ */ jsx69(Visibility, { isVisible: header.column.getCanFilter() && isTableFilterCategory(header.column.columnDef.filterFn), children: /* @__PURE__ */ jsx69(
                 TableFilterButton,
                 {
                   column: header.column,
@@ -15111,7 +15588,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
                 header.getContext()
               )
             ] }) }),
-            /* @__PURE__ */ jsx68(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx69(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx69(
               "div",
               {
                 onPointerDown: (e) => {
@@ -15142,8 +15619,8 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-import clsx34 from "clsx";
-import { jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
+import clsx35 from "clsx";
+import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
 var TableDisplay = ({
   children,
   containerProps,
@@ -15153,19 +15630,19 @@ var TableDisplay = ({
   const { table } = useTableDataContext();
   const { containerRef } = useTableContainerContext();
   const { sizeVars } = useTableHeaderContext();
-  return /* @__PURE__ */ jsx69("div", { ...containerProps, ref: containerRef, className: clsx34("table-container", containerProps?.className), children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx70("div", { ...containerProps, ref: containerRef, className: clsx35("table-container", containerProps?.className), children: /* @__PURE__ */ jsxs41(
     "table",
     {
       ...props,
-      className: clsx34("table", props.className),
+      className: clsx35("table", props.className),
       style: {
         ...sizeVars,
         width: Math.floor(Math.max(table.getTotalSize(), containerRef.current?.offsetWidth ?? table.getTotalSize()))
       },
       children: [
         children,
-        /* @__PURE__ */ jsx69(TableHeader, { ...tableHeaderProps }),
-        /* @__PURE__ */ jsx69(TableBody, {})
+        /* @__PURE__ */ jsx70(TableHeader, { ...tableHeaderProps }),
+        /* @__PURE__ */ jsx70(TableBody, {})
       ]
     }
   ) });
@@ -15173,9 +15650,9 @@ var TableDisplay = ({
 
 // src/components/layout/table/TablePagination.tsx
 import { useEffect as useEffect32 } from "react";
-import clsx35 from "clsx";
-import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
-var TablePaginationMenu = () => {
+import clsx36 from "clsx";
+import { jsx as jsx71, jsxs as jsxs42 } from "react/jsx-runtime";
+var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableDataContext();
   useEffect32(() => {
     const { pageIndex } = table.getState().pagination;
@@ -15184,12 +15661,16 @@ var TablePaginationMenu = () => {
       table.setPageIndex(MathUtil.clamp(pageIndex, [0, pageCount - 1]));
     }
   }, [table]);
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     Pagination,
     {
+      ...props,
       pageIndex: table.getState().pagination.pageIndex,
       pageCount: table.getPageCount(),
-      onPageIndexChanged: (page) => table.setPageIndex(page)
+      onPageIndexChanged: (page) => {
+        table.setPageIndex(page);
+        props.onPageIndexChanged?.(page);
+      }
     }
   );
 };
@@ -15200,92 +15681,21 @@ var TablePageSizeSelect = ({
 }) => {
   const { table } = useTableDataContext();
   const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     Select,
     {
       ...props,
       value: currentPageSize.toString(),
       onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx70(SelectOption, { value: size.toString(), children: size }, size))
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx71(SelectOption, { value: size.toString(), children: size }, size))
     }
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ jsx70("div", { ...props, className: clsx35("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx70(TablePaginationMenu, {}),
-    /* @__PURE__ */ jsx70(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx70(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
-import { Check as Check2, Minus as Minus2 } from "lucide-react";
-import { useCallback as useCallback23 } from "react";
-import clsx36 from "clsx";
-import { jsx as jsx71, jsxs as jsxs42 } from "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 = useCallback23(() => {
-    onValueChange?.(!value);
-    onEditComplete?.(!value);
-  }, [onEditComplete, onValueChange, value]);
-  return /* @__PURE__ */ jsxs42(
-    "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: clsx36("checkbox", props.className),
-      children: [
-        /* @__PURE__ */ jsx71(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx71(Minus2, { className: "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsx71(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx71(Check2, { className: "checkbox-indicator", "aria-hidden": true }) })
-      ]
-    }
-  );
-};
-var CheckboxUncontrolled = ({
-  value: initialValue,
-  onValueChange,
-  ...props
-}) => {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx71(
-    Checkbox,
-    {
-      ...props,
-      value,
-      onValueChange: setValue
-    }
-  );
+  return /* @__PURE__ */ jsxs42("div", { ...props, className: clsx36("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+    /* @__PURE__ */ jsx71(TablePaginationMenu, {}),
+    /* @__PURE__ */ jsx71(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx71(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
+  ] });
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
@@ -15301,6 +15711,7 @@ var TableWithSelectionProvider = ({
   onRowClick,
   ...props
 }) => {
+  const translation = useHightideTranslation();
   const columnDef = useMemo27(() => [
     {
       id: selectionRowId,
@@ -15333,10 +15744,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__ */ jsx72(
     TableProvider,
     {
@@ -15437,14 +15851,14 @@ var TableColumn = (props) => {
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo29, useRef as useRef25, useId as useId15 } from "react";
+import { useMemo as useMemo29, useRef as useRef25, useId as useId16 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx75, jsxs as jsxs44 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableDataContext();
   const translation = useHightideTranslation();
   const containerRef = useRef25(null);
-  const generatedId = useId15();
+  const generatedId = useId16();
   const ids = useMemo29(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
@@ -15555,6 +15969,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;
@@ -16101,7 +16519,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-import { forwardRef as forwardRef16, useId as useId16 } from "react";
+import { forwardRef as forwardRef16, useId as useId17 } from "react";
 import clsx41 from "clsx";
 import { jsx as jsx79, jsxs as jsxs48 } from "react/jsx-runtime";
 var Textarea = forwardRef16(function Textarea2({
@@ -16164,7 +16582,7 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = useId16();
+  const genId = useId17();
   const usedId = id ?? genId;
   return /* @__PURE__ */ jsxs48(
     "div",
@@ -16237,7 +16655,7 @@ var TimeDisplay = ({
 };
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-import { useId as useId17 } from "react";
+import { useId as useId18 } from "react";
 import { forwardRef as forwardRef17, useState as useState37 } from "react";
 import clsx42 from "clsx";
 import { jsx as jsx81, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -16248,7 +16666,7 @@ var InsideLabelInput = forwardRef17(function InsideLabelInput2({
 }, forwardedRef) {
   const { value } = props;
   const [isFocused, setIsFocused] = useState37(false);
-  const generatedId = useId17();
+  const generatedId = useId18();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs49("div", { className: clsx42("relative"), children: [
     /* @__PURE__ */ jsx81(
@@ -16754,9 +17172,9 @@ import { Binary } from "lucide-react";
 import { jsx as jsx89, jsxs as jsxs55 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
-  onRemove,
   onValueChange,
   onEditComplete,
+  onValueClear,
   readOnly,
   suffix,
   ...baseProps
@@ -16767,7 +17185,7 @@ var NumberProperty = ({
     PropertyBase,
     {
       ...baseProps,
-      onRemove,
+      onValueClear,
       hasValue,
       icon: /* @__PURE__ */ jsx89(Binary, { size: 24 }),
       children: ({ invalid }) => /* @__PURE__ */ jsxs55(
@@ -16789,7 +17207,7 @@ var NumberProperty = ({
                 onValueChange: (value2) => {
                   const numberValue = parseFloat(value2);
                   if (isNaN(numberValue)) {
-                    onRemove();
+                    onValueClear();
                   } else {
                     onValueChange?.(numberValue);
                   }
@@ -16797,7 +17215,7 @@ var NumberProperty = ({
                 onEditComplete: (value2) => {
                   const numberValue = parseFloat(value2);
                   if (isNaN(numberValue)) {
-                    onRemove();
+                    onValueClear();
                   } else {
                     onEditComplete?.(numberValue);
                   }
@@ -16868,7 +17286,6 @@ import { jsx as jsx91 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
-  onRemove,
   onValueChange,
   onEditComplete,
   ...baseProps
@@ -16879,7 +17296,6 @@ var TextProperty = ({
     PropertyBase,
     {
       ...baseProps,
-      onRemove,
       hasValue,
       icon: /* @__PURE__ */ jsx91(Text, { size: 24 }),
       children: ({ invalid }) => /* @__PURE__ */ jsx91(
@@ -16892,20 +17308,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)
         }
       )
     }
@@ -17514,6 +17918,7 @@ export {
   DateTimePickerDialog,
   DateTimePickerUncontrolled,
   DateUtils,
+  DatetimeFilter,
   DayPicker,
   DayPickerUncontrolled,
   Dialog,
@@ -17649,6 +18054,7 @@ export {
   TableWithSelectionProvider,
   TagIcon,
   TagsFilter,
+  TagsSingleFilter,
   TextFilter,
   TextImage,
   TextProperty,
@@ -17678,6 +18084,14 @@ export {
   createLoopingList,
   createLoopingListWithIndex,
   equalSizeGroups,
+  filterBoolean,
+  filterDate,
+  filterDatetime,
+  filterGeneric,
+  filterNumber,
+  filterTags,
+  filterTagsSingle,
+  filterText,
   formatDate,
   formatDateTime,
   getBetweenDuration,