@helpwave/hightide 0.9.2 → 0.9.4

package/dist/index.js

@@ -6925,6 +6925,7 @@ __export(index_exports, {
   SimpleSearch: () => SimpleSearch,
   SimpleSearchWithMapping: () => SimpleSearchWithMapping,
   SingleSelectProperty: () => SingleSelectProperty,
+  SortingList: () => SortingList,
   StepperBar: () => StepperBar,
   StorageListener: () => StorageListener,
   Switch: () => Switch,
@@ -8604,6 +8605,7 @@ var hightideTranslation = {
   "de-DE": {
     "add": `Hinzuf\xFCgen`,
     "addFilter": `Filter hinzuf\xFCgen`,
+    "addSorting": `Sortierung hinzuf\xFCgen`,
     "addTime": `Uhrzeit hinzuf\xFCgen`,
     "after": `Nach`,
     "age": `Alter`,
@@ -8815,6 +8817,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sortierung`,
     "sSortingState": ({ sortDirection }) => {
       return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
@@ -8971,6 +8975,7 @@ var hightideTranslation = {
   "en-US": {
     "add": `Add`,
     "addFilter": `Add filter`,
+    "addSorting": `Add sorting`,
     "addTime": `Add Time`,
     "after": `After`,
     "age": `Age`,
@@ -9182,6 +9187,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sorting`,
     "sSortingState": ({ sortDirection }) => {
       return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
@@ -14636,40 +14643,40 @@ function isParameterValidForOperator(dataType, operator, parameter) {
   }
   switch (dataType) {
     case "text": {
-      return typeof parameter.searchText === "string";
+      return typeof parameter.stringValue === "string";
     }
     case "number": {
       if (operator === "between" || operator === "notBetween") {
-        const min = parameter.minNumber;
-        const max = parameter.maxNumber;
+        const min = parameter.numberMin;
+        const max = parameter.numberMax;
         return typeof min === "number" && !Number.isNaN(min) && typeof max === "number" && !Number.isNaN(max) && min <= max;
       }
-      const v = parameter.compareValue;
+      const v = parameter.numberValue;
       return typeof v === "number" && !Number.isNaN(v);
     }
     case "date":
     case "dateTime": {
       if (operator === "between" || operator === "notBetween") {
-        const minDate = DateUtils.tryParseDate(parameter.minDate);
-        const maxDate = DateUtils.tryParseDate(parameter.maxDate);
+        const minDate = DateUtils.tryParseDate(parameter.dateMin);
+        const maxDate = DateUtils.tryParseDate(parameter.dateMax);
         if (!minDate || !maxDate) return false;
         const minNorm = dataType === "date" ? DateUtils.toOnlyDate(minDate).getTime() : DateUtils.toDateTimeOnly(minDate).getTime();
         const maxNorm = dataType === "date" ? DateUtils.toOnlyDate(maxDate).getTime() : DateUtils.toDateTimeOnly(maxDate).getTime();
         return minNorm <= maxNorm;
       }
-      return DateUtils.tryParseDate(parameter.compareDate) != null;
+      return DateUtils.tryParseDate(parameter.dateValue) != null;
     }
     case "boolean":
       return true;
     case "multiTags": {
-      return Array.isArray(parameter.multiOptionSearch);
+      return Array.isArray(parameter.uuidValues);
     }
     case "singleTag": {
       if (operator === "contains" || operator === "notContains") {
-        return Array.isArray(parameter.multiOptionSearch);
+        return Array.isArray(parameter.uuidValues);
       }
       if (operator === "equals" || operator === "notEquals") {
-        return typeof parameter.singleOptionSearch === "string";
+        return typeof parameter.uuidValue === "string";
       }
       return true;
     }
@@ -14691,9 +14698,8 @@ var FilterValueUtils = {
   isValid: isFilterValueValid
 };
 function filterText(value, operator, parameter) {
-  const isCaseSensitive = parameter.isCaseSensitive ?? false;
-  const searchText = isCaseSensitive ? parameter.searchText ?? "" : (parameter.searchText ?? "").toLowerCase();
-  const cellText = isCaseSensitive ? value?.toString() ?? "" : value?.toString().toLowerCase() ?? "";
+  const searchText = parameter.stringValue ?? "";
+  const cellText = value?.toString() ?? "";
   switch (operator) {
     case "equals":
       return cellText === searchText;
@@ -14727,21 +14733,21 @@ function filterNumber(value, operator, parameter) {
   }
   switch (operator) {
     case "equals":
-      return value === parameter.compareValue;
+      return value === parameter.numberValue;
     case "notEquals":
-      return value !== parameter.compareValue;
+      return value !== parameter.numberValue;
     case "greaterThan":
-      return value > (parameter.compareValue ?? 0);
+      return value > (parameter.numberValue ?? 0);
     case "greaterThanOrEqual":
-      return value >= (parameter.compareValue ?? 0);
+      return value >= (parameter.numberValue ?? 0);
     case "lessThan":
-      return value < (parameter.compareValue ?? 0);
+      return value < (parameter.numberValue ?? 0);
     case "lessThanOrEqual":
-      return value <= (parameter.compareValue ?? 0);
+      return value <= (parameter.numberValue ?? 0);
     case "between":
-      return value >= (parameter.minNumber ?? -Infinity) && value <= (parameter.maxNumber ?? Infinity);
+      return value >= (parameter.numberMin ?? -Infinity) && value <= (parameter.numberMax ?? Infinity);
     case "notBetween":
-      return value < (parameter.minNumber ?? -Infinity) || value > (parameter.maxNumber ?? Infinity);
+      return value < (parameter.numberMin ?? -Infinity) || value > (parameter.numberMax ?? Infinity);
     case "isUndefined":
       return value === void 0 || value === null;
     case "isNotUndefined":
@@ -14764,44 +14770,44 @@ function filterDate(value, operator, parameter) {
   const normalizedDate = DateUtils.toOnlyDate(date);
   switch (operator) {
     case "equals": {
-      const filterDate2 = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDate2 = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDate2) return false;
       return normalizedDate.getTime() === DateUtils.toOnlyDate(filterDate2).getTime();
     }
     case "notEquals": {
-      const filterDate2 = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDate2 = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDate2) return false;
       return normalizedDate.getTime() !== DateUtils.toOnlyDate(filterDate2).getTime();
     }
     case "greaterThan": {
-      const filterDate2 = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDate2 = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDate2) return false;
       return normalizedDate > DateUtils.toOnlyDate(filterDate2);
     }
     case "greaterThanOrEqual": {
-      const filterDate2 = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDate2 = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDate2) return false;
       return normalizedDate >= DateUtils.toOnlyDate(filterDate2);
     }
     case "lessThan": {
-      const filterDate2 = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDate2 = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDate2) return false;
       return normalizedDate < DateUtils.toOnlyDate(filterDate2);
     }
     case "lessThanOrEqual": {
-      const filterDate2 = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDate2 = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDate2) return false;
       return normalizedDate <= DateUtils.toOnlyDate(filterDate2);
     }
     case "between": {
-      const minDate = DateUtils.tryParseDate(parameter.minDate);
-      const maxDate = DateUtils.tryParseDate(parameter.maxDate);
+      const minDate = DateUtils.tryParseDate(parameter.dateMin);
+      const maxDate = DateUtils.tryParseDate(parameter.dateMax);
       if (!minDate || !maxDate) return false;
       return normalizedDate >= DateUtils.toOnlyDate(minDate) && normalizedDate <= DateUtils.toOnlyDate(maxDate);
     }
     case "notBetween": {
-      const minDate = DateUtils.tryParseDate(parameter.minDate);
-      const maxDate = DateUtils.tryParseDate(parameter.maxDate);
+      const minDate = DateUtils.tryParseDate(parameter.dateMin);
+      const maxDate = DateUtils.tryParseDate(parameter.dateMax);
       if (!minDate || !maxDate) return false;
       return normalizedDate < DateUtils.toOnlyDate(minDate) || normalizedDate > DateUtils.toOnlyDate(maxDate);
     }
@@ -14823,44 +14829,44 @@ function filterDateTime(value, operator, parameter) {
   const normalizedDatetime = DateUtils.toDateTimeOnly(dateTime);
   switch (operator) {
     case "equals": {
-      const filterDatetime = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDatetime = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDatetime) return false;
       return normalizedDatetime.getTime() === DateUtils.toDateTimeOnly(filterDatetime).getTime();
     }
     case "notEquals": {
-      const filterDatetime = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDatetime = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDatetime) return false;
       return normalizedDatetime.getTime() !== DateUtils.toDateTimeOnly(filterDatetime).getTime();
     }
     case "greaterThan": {
-      const filterDatetime = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDatetime = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDatetime) return false;
       return normalizedDatetime > DateUtils.toDateTimeOnly(filterDatetime);
     }
     case "greaterThanOrEqual": {
-      const filterDatetime = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDatetime = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDatetime) return false;
       return normalizedDatetime >= DateUtils.toDateTimeOnly(filterDatetime);
     }
     case "lessThan": {
-      const filterDatetime = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDatetime = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDatetime) return false;
       return normalizedDatetime < DateUtils.toDateTimeOnly(filterDatetime);
     }
     case "lessThanOrEqual": {
-      const filterDatetime = DateUtils.tryParseDate(parameter.compareDate);
+      const filterDatetime = DateUtils.tryParseDate(parameter.dateValue);
       if (!filterDatetime) return false;
       return normalizedDatetime <= DateUtils.toDateTimeOnly(filterDatetime);
     }
     case "between": {
-      const minDatetime = DateUtils.tryParseDate(parameter.minDate);
-      const maxDatetime = DateUtils.tryParseDate(parameter.maxDate);
+      const minDatetime = DateUtils.tryParseDate(parameter.dateMin);
+      const maxDatetime = DateUtils.tryParseDate(parameter.dateMax);
       if (!minDatetime || !maxDatetime) return false;
       return normalizedDatetime >= DateUtils.toDateTimeOnly(minDatetime) && normalizedDatetime <= DateUtils.toDateTimeOnly(maxDatetime);
     }
     case "notBetween": {
-      const minDatetime = DateUtils.tryParseDate(parameter.minDate);
-      const maxDatetime = DateUtils.tryParseDate(parameter.maxDate);
+      const minDatetime = DateUtils.tryParseDate(parameter.dateMin);
+      const maxDatetime = DateUtils.tryParseDate(parameter.dateMax);
       if (!minDatetime || !maxDatetime) return false;
       return normalizedDatetime < DateUtils.toDateTimeOnly(minDatetime) || normalizedDatetime > DateUtils.toDateTimeOnly(maxDatetime);
     }
@@ -14885,28 +14891,28 @@ function filterBoolean(value, operator) {
 function filterMultiTags(value, operator, parameter) {
   switch (operator) {
     case "equals": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.multiOptionSearch)) return false;
-      if (value.length !== parameter.multiOptionSearch.length) return false;
+      if (!Array.isArray(value) || !Array.isArray(parameter.uuidValues)) return false;
+      if (value.length !== parameter.uuidValues.length) return false;
       const valueSet = new Set(value);
-      const searchTagsSet = new Set(parameter.multiOptionSearch);
+      const searchTagsSet = new Set(parameter.uuidValues);
       if (valueSet.size !== searchTagsSet.size) return false;
       return Array.from(valueSet).every((tag) => searchTagsSet.has(tag));
     }
     case "notEquals": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.multiOptionSearch)) return true;
-      if (value.length !== parameter.multiOptionSearch.length) return true;
+      if (!Array.isArray(value) || !Array.isArray(parameter.uuidValues)) return true;
+      if (value.length !== parameter.uuidValues.length) return true;
       const valueSet = new Set(value);
-      const searchTagsSet = new Set(parameter.multiOptionSearch);
+      const searchTagsSet = new Set(parameter.uuidValues);
       if (valueSet.size !== searchTagsSet.size) return true;
       return !Array.from(valueSet).every((tag) => searchTagsSet.has(tag));
     }
     case "contains": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.multiOptionSearch)) return false;
-      return parameter.multiOptionSearch.every((tag) => value.includes(tag));
+      if (!Array.isArray(value) || !Array.isArray(parameter.uuidValues)) return false;
+      return parameter.uuidValues.every((tag) => value.includes(tag));
     }
     case "notContains": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.multiOptionSearch)) return true;
-      return !parameter.multiOptionSearch.every((tag) => value.includes(tag));
+      if (!Array.isArray(value) || !Array.isArray(parameter.uuidValues)) return true;
+      return !parameter.uuidValues.every((tag) => value.includes(tag));
     }
     case "isUndefined":
       return value === void 0 || value === null;
@@ -14919,13 +14925,13 @@ function filterMultiTags(value, operator, parameter) {
 function filterSingleTag(value, operator, parameter) {
   switch (operator) {
     case "equals":
-      return value === parameter.singleOptionSearch;
+      return value === parameter.uuidValue;
     case "notEquals":
-      return value !== parameter.singleOptionSearch;
+      return value !== parameter.uuidValue;
     case "contains":
-      return parameter.multiOptionSearch?.includes(value) ?? false;
+      return parameter.uuidValues?.includes(value) ?? false;
     case "notContains":
-      return !(parameter.multiOptionSearch?.includes(value) ?? false);
+      return !(parameter.uuidValues?.includes(value) ?? false);
     case "isUndefined":
       return value === void 0 || value === null;
     case "isNotUndefined":
@@ -14973,81 +14979,81 @@ function useFilterValueTranslation() {
     switch (value.operator) {
       case "equals":
         if (value.dataType === "date" || value.dataType === "dateTime") {
-          return translation("rEquals", { value: formatDateParam(p.compareDate, locale, dateFormat) ?? "-" });
+          return translation("rEquals", { value: formatDateParam(p.dateValue, locale, dateFormat) ?? "-" });
         }
         if (value.dataType === "singleTag") {
-          return translation("rEquals", { value: tagToLabel(tags, p.singleOptionSearch) });
+          return translation("rEquals", { value: tagToLabel(tags, p.uuidValue) });
         }
         if (value.dataType === "multiTags") {
-          const valueStr = (p.multiOptionSearch ?? []).map((v) => tagToLabel(tags, v)).join(", ");
+          const valueStr = (p.uuidValues ?? []).map((v) => tagToLabel(tags, v)).join(", ");
           return translation("rEquals", { value: valueStr });
         }
-        return translation("rEquals", { value: String(p.searchText ?? p.compareValue ?? "") });
+        return translation("rEquals", { value: String(p.stringValue ?? p.numberValue ?? "") });
       case "notEquals":
         if (value.dataType === "date" || value.dataType === "dateTime") {
-          return translation("rNotEquals", { value: formatDateParam(p.compareDate, locale, dateFormat) });
+          return translation("rNotEquals", { value: formatDateParam(p.dateValue, locale, dateFormat) });
         }
         if (value.dataType === "singleTag") {
-          return translation("rNotEquals", { value: tagToLabel(tags, p.singleOptionSearch) });
+          return translation("rNotEquals", { value: tagToLabel(tags, p.uuidValue) });
         }
         if (value.dataType === "multiTags") {
-          const valueStr = (p.multiOptionSearch ?? []).map((v) => tagToLabel(tags, v)).join(", ");
+          const valueStr = (p.uuidValues ?? []).map((v) => tagToLabel(tags, v)).join(", ");
           return translation("rNotEquals", { value: valueStr });
         }
-        return translation("rNotEquals", { value: String(p.searchText ?? p.compareValue ?? "") });
+        return translation("rNotEquals", { value: String(p.stringValue ?? p.numberValue ?? "") });
       case "contains":
         if (value.dataType === "multiTags" || value.dataType === "singleTag") {
-          const valueStr = value.dataType === "singleTag" ? tagToLabel(tags, p.singleOptionSearch) : (p.multiOptionSearch ?? []).map((v) => tagToLabel(tags, v)).join(", ");
+          const valueStr = value.dataType === "singleTag" ? tagToLabel(tags, p.uuidValue) : (p.uuidValues ?? []).map((v) => tagToLabel(tags, v)).join(", ");
           return translation("rContains", { value: valueStr });
         }
-        return translation("rContains", { value: String(p.searchText ?? "") });
+        return translation("rContains", { value: String(p.stringValue ?? "") });
       case "notContains":
         if (value.dataType === "multiTags" || value.dataType === "singleTag") {
-          const valueStr = value.dataType === "singleTag" ? tagToLabel(tags, p.singleOptionSearch) : (p.multiOptionSearch ?? []).map((v) => tagToLabel(tags, v)).join(", ");
+          const valueStr = value.dataType === "singleTag" ? tagToLabel(tags, p.uuidValue) : (p.uuidValues ?? []).map((v) => tagToLabel(tags, v)).join(", ");
           return translation("rNotContains", { value: valueStr });
         }
-        return translation("rNotContains", { value: `"${String(p.searchText ?? "")}"` });
+        return translation("rNotContains", { value: `"${String(p.stringValue ?? "")}"` });
       case "startsWith":
-        return translation("rStartsWith", { value: `"${String(p.searchText ?? "")}"` });
+        return translation("rStartsWith", { value: `"${String(p.stringValue ?? "")}"` });
       case "endsWith":
-        return translation("rEndsWith", { value: `"${String(p.searchText ?? "")}"` });
+        return translation("rEndsWith", { value: `"${String(p.stringValue ?? "")}"` });
       case "greaterThan":
         return translation("rGreaterThan", {
-          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.compareDate, locale, dateFormat) ?? "-" : String(p.compareValue ?? "-")
+          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.dateValue, locale, dateFormat) ?? "-" : String(p.numberValue ?? "-")
         });
       case "greaterThanOrEqual":
         return translation("rGreaterThanOrEqual", {
-          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.compareDate, locale, dateFormat) ?? "-" : String(p.compareValue ?? "-")
+          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.dateValue, locale, dateFormat) ?? "-" : String(p.numberValue ?? "-")
         });
       case "lessThan":
         return translation("rLessThan", {
-          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.compareDate, locale, dateFormat) ?? "-" : String(p.compareValue ?? "-")
+          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.dateValue, locale, dateFormat) ?? "-" : String(p.numberValue ?? "-")
         });
       case "lessThanOrEqual":
         return translation("rLessThanOrEqual", {
-          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.compareDate, locale, dateFormat) ?? "-" : String(p.compareValue ?? "-")
+          value: value.dataType === "date" || value.dataType === "dateTime" ? formatDateParam(p.dateValue, locale, dateFormat) ?? "-" : String(p.numberValue ?? "-")
         });
       case "between":
         if (value.dataType === "date" || value.dataType === "dateTime") {
           return translation("rBetween", {
-            value1: formatDateParam(p.minDate, locale, dateFormat) ?? "-",
-            value2: formatDateParam(p.maxDate, locale, dateFormat) ?? "-"
+            value1: formatDateParam(p.dateMin, locale, dateFormat) ?? "-",
+            value2: formatDateParam(p.dateMax, locale, dateFormat) ?? "-"
           });
         }
         return translation("rBetween", {
-          value1: String(p.minNumber ?? "-"),
-          value2: String(p.maxNumber ?? "-")
+          value1: String(p.numberMin ?? "-"),
+          value2: String(p.numberMax ?? "-")
         });
       case "notBetween":
         if (value.dataType === "date" || value.dataType === "dateTime") {
           return translation("rNotBetween", {
-            value1: formatDateParam(p.minDate, locale, dateFormat) ?? "-",
-            value2: formatDateParam(p.maxDate, locale, dateFormat) ?? "-"
+            value1: formatDateParam(p.dateMin, locale, dateFormat) ?? "-",
+            value2: formatDateParam(p.dateMax, locale, dateFormat) ?? "-"
           });
         }
         return translation("rNotBetween", {
-          value1: String(p.minNumber ?? "-"),
-          value2: String(p.maxNumber ?? "-")
+          value1: String(p.numberMin ?? "-"),
+          value2: String(p.numberMax ?? "-")
         });
       case "isTrue":
         return translation("isTrue");
@@ -15456,85 +15462,22 @@ var TableSortButton = ({
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_lucide_react21 = require("lucide-react");
-var import_react88 = require("react");
-var import_react_table3 = require("@tanstack/react-table");
-
-// src/components/user-interaction/data/FilterPopUp.tsx
 var import_lucide_react20 = require("lucide-react");
 var import_react87 = require("react");
+var import_react_table3 = require("@tanstack/react-table");
 
-// src/components/user-interaction/Checkbox.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_react72 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var Checkbox = ({
-  value: controlledValue,
-  initialValue = false,
-  indeterminate,
-  required = false,
-  invalid = false,
-  disabled = false,
-  readOnly = false,
-  onValueChange,
-  onEditComplete,
-  size = "md",
-  alwaysShowCheckIcon = false,
-  ...props
-}) => {
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react72.useCallback)((value2) => {
-    onValueChangeStable(value2);
-    onEditCompleteStable(value2);
-  }, [onValueChangeStable, onEditCompleteStable]);
-  const [value, setValue] = useControlledState({
-    value: controlledValue,
-    onValueChange: onChangeWrapper,
-    defaultValue: initialValue
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-    "div",
-    {
-      ...props,
-      onClick: (event) => {
-        if (!disabled) {
-          setValue((prev) => !prev);
-        }
-        props.onClick?.(event);
-      },
-      onKeyDown: (event) => {
-        if (disabled) return;
-        if (event.key === " " || event.key === "Enter") {
-          event.preventDefault();
-          setValue((prev) => !prev);
-        }
-        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),
-      "data-name": props["data-name"] ?? "checkbox",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react16.Minus, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react16.Check, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
-      ]
-    }
-  );
-};
+// src/components/user-interaction/data/FilterPopUp.tsx
+var import_lucide_react19 = require("lucide-react");
+var import_react86 = require("react");
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_react78 = require("react");
-var import_lucide_react18 = require("lucide-react");
+var import_react77 = require("react");
+var import_lucide_react17 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
-var import_react73 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react72 = require("react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var TimePicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -15552,11 +15495,11 @@ var TimePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const minuteRef = (0, import_react73.useRef)(null);
-  const hourRef = (0, import_react73.useRef)(null);
+  const minuteRef = (0, import_react72.useRef)(null);
+  const hourRef = (0, import_react72.useRef)(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  const minutes = (0, import_react73.useMemo)(() => {
+  const minutes = (0, import_react72.useMemo)(() => {
     const full = range(60);
     switch (minuteIncrement) {
       case "5min":
@@ -15569,7 +15512,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [minuteIncrement]);
-  const seconds = (0, import_react73.useMemo)(() => {
+  const seconds = (0, import_react72.useMemo)(() => {
     const full = range(60);
     switch (secondIncrement) {
       case "1s":
@@ -15584,7 +15527,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [secondIncrement]);
-  const milliseconds = (0, import_react73.useMemo)(() => {
+  const milliseconds = (0, import_react72.useMemo)(() => {
     const full = range(1e3);
     switch (millisecondIncrement) {
       case "1ms":
@@ -15605,17 +15548,17 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 500 === 0);
     }
   }, [millisecondIncrement]);
-  const closestMinute = (0, import_react73.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
-  const closestSecond = (0, import_react73.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
-  const closestMillisecond = (0, import_react73.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
+  const closestMinute = (0, import_react72.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = (0, import_react72.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = (0, import_react72.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
-  (0, import_react73.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -15627,10 +15570,10 @@ var TimePicker = ({
     setValue(newDate);
     onEditComplete?.(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { "data-name": "time-picker-container", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-name": "time-picker-container", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
       const isSelected = hour2 === value.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           size: "sm",
@@ -15643,9 +15586,9 @@ var TimePicker = ({
         hour2
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
       const isSelected = minute === closestMinute;
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           size: "sm",
@@ -15658,9 +15601,9 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
       const isSelected = second === closestSecond;
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           size: "sm",
@@ -15673,9 +15616,9 @@ var TimePicker = ({
         second + secondIncrement
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
       const isSelected = millisecond === closestMillisecond;
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           size: "sm",
@@ -15688,8 +15631,8 @@ var TimePicker = ({
         millisecond + millisecondIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { "data-name": "time-picker-value-column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-name": "time-picker-value-column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           size: "sm",
@@ -15699,7 +15642,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Button,
         {
           size: "sm",
@@ -15714,13 +15657,13 @@ var TimePicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_react76 = require("react");
-var import_lucide_react17 = require("lucide-react");
+var import_react75 = require("react");
+var import_lucide_react16 = require("lucide-react");
 var import_clsx23 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
-var import_react74 = require("react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_react73 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
   initialDisplayedMonth,
@@ -15748,33 +15691,33 @@ var DayPicker = ({
   });
   const month = displayedMonth.getMonth();
   const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
-  const selectedButtonRef = (0, import_react74.useRef)(null);
-  const isValueInDisplayedWeeks = (0, import_react74.useMemo)(
+  const selectedButtonRef = (0, import_react73.useRef)(null);
+  const isValueInDisplayedWeeks = (0, import_react73.useMemo)(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = (0, import_react74.useCallback)(
+  const firstDayOfMonth = (0, import_react73.useCallback)(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
   const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
-  const end = (0, import_react74.useMemo)(() => {
+  const end = (0, import_react73.useMemo)(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = (0, import_react74.useMemo)(() => {
+  const start = (0, import_react73.useMemo)(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = (0, import_react74.useCallback)((date) => {
+  const clampToRange = (0, import_react73.useCallback)((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = (0, import_react74.useCallback)((candidate) => {
+  const navigateTo = (0, import_react73.useCallback)((candidate) => {
     const clamped = clampToRange(candidate);
     if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
@@ -15783,7 +15726,7 @@ var DayPicker = ({
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = (0, import_react74.useCallback)(
+  const onKeyDown = (0, import_react73.useCallback)(
     (event) => {
       PropsUtil.aria.navigate({
         left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
@@ -15794,15 +15737,15 @@ var DayPicker = ({
     },
     [focusTargetDate, navigateTo]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { "data-name": "day-picker-container", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { "data-name": "day-picker-container", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
       const isSelected = !!value && DateUtils.equalDate(value, date);
       const isFocused = !!focusTargetDate && DateUtils.equalDate(focusTargetDate, date);
       const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = DateUtils.between(date, start, end);
-      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "div",
         {
           ref: isFocused ? selectedButtonRef : void 0,
@@ -15840,10 +15783,10 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-var import_react75 = require("react");
+var import_react74 = require("react");
 var import_clsx22 = __toESM(require("clsx"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var YearRow = (0, import_react75.memo)(function YearRow2({
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var YearRow = (0, import_react74.memo)(function YearRow2({
   year,
   selectedMonthIndex,
   minTimestamp,
@@ -15851,31 +15794,31 @@ var YearRow = (0, import_react75.memo)(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = (0, import_react75.useRef)(null);
+  const ref = (0, import_react74.useRef)(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = (0, import_react75.useState)(false);
-  (0, import_react75.useEffect)(() => {
+  const [isExpanded, setIsExpanded] = (0, import_react74.useState)(false);
+  (0, import_react74.useEffect)(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = (0, import_react75.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  const monthGrid = (0, import_react74.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     ExpandableRoot,
     {
       ref: isSelectedYear ? ref : void 0,
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ExpandableHeader, { className: (0, import_clsx22.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-43", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-row-1", children: group.map((month) => {
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ExpandableHeader, { className: (0, import_clsx22.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-43", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex-row-1", children: group.map((month) => {
           const monthIndex = DateUtils.monthsList.indexOf(month);
           const currentTimestamp = new Date(year, monthIndex).getTime();
           const isAfterStart = minTimestamp === void 0 || currentTimestamp >= minTimestamp;
           const isBeforeEnd = maxTimestamp === void 0 || currentTimestamp <= maxTimestamp;
           const isValid = isAfterStart && isBeforeEnd;
           const isSelectedMonth = monthIndex === selectedMonthIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             Button,
             {
               disabled: !isValid,
@@ -15914,27 +15857,27 @@ var YearMonthPicker = ({
     defaultValue: initialValue
   });
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const monthNames = (0, import_react75.useMemo)(() => {
+  const monthNames = (0, import_react74.useMemo)(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = (0, import_react75.useMemo)(
+  const years = (0, import_react74.useMemo)(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = (0, import_react75.useMemo)(() => {
+  const minTimestamp = (0, import_react74.useMemo)(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = (0, import_react75.useMemo)(() => {
+  const maxTimestamp = (0, import_react74.useMemo)(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = (0, import_react75.useCallback)((newDate) => {
+  const handleSelect = (0, import_react74.useCallback)((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     InfiniteScroll,
     {
       itemCount: years.length,
@@ -15944,7 +15887,7 @@ var YearMonthPicker = ({
         const year = years[index];
         const isSelectedYear = value.getFullYear() === year;
         const selectedMonthIndex = isSelectedYear ? value.getMonth() : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           YearRow,
           {
             year,
@@ -15962,7 +15905,7 @@ var YearMonthPicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var DatePicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -15983,11 +15926,11 @@ var DatePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [displayedMonth, setDisplayedMonth] = (0, import_react76.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = (0, import_react76.useState)(initialDisplay);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx23.default)("flex-col-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  const [displayedMonth, setDisplayedMonth] = (0, import_react75.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = (0, import_react75.useState)(initialDisplay);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_clsx23.default)("flex-col-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
         Button,
         {
           size: "sm",
@@ -15998,12 +15941,12 @@ var DatePicker = ({
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronDown, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react16.ChevronDown, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           IconButton,
           {
             tooltip: translation("time.today"),
@@ -16015,10 +15958,10 @@ var DatePicker = ({
               setValue(newDate);
               setDisplayedMonth(newDate);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Calendar, { className: "size-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react16.Calendar, { className: "size-5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           IconButton,
           {
             tooltip: translation("time.previousMonth"),
@@ -16027,10 +15970,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react16.ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           IconButton,
           {
             tooltip: translation("time.nextMonth"),
@@ -16039,12 +15982,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react16.ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -16061,7 +16004,7 @@ var DatePicker = ({
         },
         className: "h-60 max-h-60"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       DayPicker,
       {
         ...dayPickerProps,
@@ -16080,7 +16023,7 @@ var DatePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -16108,7 +16051,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -16124,7 +16067,7 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       TimePicker,
       {
         ...timePickerProps,
@@ -16139,15 +16082,15 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
     dateDisplay,
     timeDisplay
   ] });
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
-var import_react77 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var DateTimePickerDialog = ({
   initialValue = null,
   value,
@@ -16174,12 +16117,12 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [pickerState, setPickerState] = (0, import_react77.useState)(state ?? /* @__PURE__ */ new Date());
-  (0, import_react77.useEffect)(() => {
+  const [pickerState, setPickerState] = (0, import_react76.useState)(state ?? /* @__PURE__ */ new Date());
+  (0, import_react76.useEffect)(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "span",
       {
         id: labelId,
@@ -16187,7 +16130,7 @@ var DateTimePickerDialog = ({
         children: label ?? translation("sDateTimeSelect", { datetimeMode: mode })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       DateTimePicker,
       {
         ...pickerProps,
@@ -16206,8 +16149,8 @@ var DateTimePickerDialog = ({
         precision
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: allowRemove && !!state, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: allowRemove && !!state, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Button,
         {
           size: "md",
@@ -16220,7 +16163,7 @@ var DateTimePickerDialog = ({
           children: translation("clear")
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: !state, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !state, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Button,
         {
           size: "md",
@@ -16233,7 +16176,7 @@ var DateTimePickerDialog = ({
           children: translation("cancel")
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Button,
         {
           size: "md",
@@ -16249,8 +16192,8 @@ var DateTimePickerDialog = ({
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var DateTimeInput = (0, import_react77.forwardRef)(function DateTimeInput2({
   id: inputId,
   value,
   initialValue = null,
@@ -16279,37 +16222,35 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react77.useState)(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = (0, import_react78.useState)(state);
-  const [stringInputState, setStringInputState] = (0, import_react78.useState)({
+  const [dialogValue, setDialogValue] = (0, import_react77.useState)(state);
+  const [stringInputState, setStringInputState] = (0, import_react77.useState)({
     state: state ? DateUtils.toInputString(state, mode, precision) : "",
-    date: void 0
+    date: void 0,
+    mode
   });
-  (0, import_react78.useEffect)(() => {
-    setDialogValue(state);
-    setStringInputState({
-      state: state ? DateUtils.toInputString(state, mode) : "",
-      date: void 0
-    });
-  }, [mode, state]);
-  const changeOpenWrapper = (0, import_react78.useCallback)((isOpen2) => {
+  const safeInputString = (0, import_react77.useMemo)(() => {
+    if (!state) return "";
+    return stringInputState.mode !== mode ? DateUtils.toInputString(state, mode, precision) : stringInputState.state;
+  }, [stringInputState.mode, stringInputState.state, mode, state, precision]);
+  const changeOpenWrapper = (0, import_react77.useCallback)((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
-  const generatedId = (0, import_react78.useId)();
-  const ids = (0, import_react78.useMemo)(() => ({
+  const generatedId = (0, import_react77.useId)();
+  const ids = (0, import_react77.useMemo)(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
-  const innerRef = (0, import_react78.useRef)(null);
-  (0, import_react78.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react78.useEffect)(() => {
+  const innerRef = (0, import_react77.useRef)(null);
+  (0, import_react77.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react77.useEffect)(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
@@ -16318,21 +16259,26 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
     restartTimer,
     clearTimer
   } = useDelay({ delay: 2e3, disabled: disabled || readOnly });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...containerProps, className: (0, import_clsx24.default)("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...containerProps, className: (0, import_clsx24.default)("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         "input",
         {
           ...props,
           ref: innerRef,
           id: ids.input,
-          value: stringInputState.state,
+          value: safeInputString,
           onClick: (event) => {
             event.preventDefault();
           },
           onFocus: (event) => {
             event.preventDefault();
           },
+          onKeyDown: (event) => {
+            if (event.key === " ") {
+              event.preventDefault();
+            }
+          },
           onChange: (event) => {
             const date = new Date(event.target.value ?? "");
             const isValid = !isNaN(date.getTime());
@@ -16347,7 +16293,8 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
             }
             setStringInputState({
               state: event.target.value,
-              date: isValid ? date : void 0
+              date: isValid ? date : void 0,
+              mode
             });
           },
           onBlur: (event) => {
@@ -16362,7 +16309,8 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
               }
               setStringInputState({
                 state: state ? DateUtils.toInputString(state, mode) : "",
-                date: void 0
+                date: void 0,
+                mode
               });
             }
           },
@@ -16373,9 +16321,9 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
           ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex-row-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex-row-0", children: [
         actions,
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           IconButton,
           {
             tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
@@ -16389,12 +16337,12 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
             "aria-haspopup": "dialog",
             "aria-expanded": isOpen,
             "aria-controls": isOpen ? ids.popup : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react18.CalendarIcon, { className: "size-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react17.CalendarIcon, { className: "size-5" })
           }
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       PopUp,
       {
         id: ids.popup,
@@ -16413,7 +16361,7 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
         role: "dialog",
         "aria-labelledby": ids.label,
         className: "flex-col-2 p-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           DateTimePickerDialog,
           {
             value: dialogValue,
@@ -16443,25 +16391,25 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
-var import_react86 = require("react");
+var import_react85 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-var import_react82 = require("react");
+var import_react81 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
-var import_react79 = require("react");
-var MultiSelectContext = (0, import_react79.createContext)(null);
+var import_react78 = require("react");
+var MultiSelectContext = (0, import_react78.createContext)(null);
 function useMultiSelectContext() {
-  const ctx = (0, import_react79.useContext)(MultiSelectContext);
+  const ctx = (0, import_react78.useContext)(MultiSelectContext);
   if (!ctx) throw new Error("useMultiSelectContext must be used within MultiSelectRoot");
   return ctx;
 }
 
 // src/components/user-interaction/MultiSelect/useMultiSelect.ts
-var import_react81 = require("react");
+var import_react80 = require("react");
 
 // src/hooks/useMultiSelection.ts
-var import_react80 = require("react");
+var import_react79 = require("react");
 function useMultiSelection({
   options: optionsList,
   value,
@@ -16475,8 +16423,8 @@ function useMultiSelection({
     defaultValue: [...initialSelection],
     isControlled
   });
-  const isSelected = (0, import_react80.useCallback)((id) => selection.includes(id), [selection]);
-  const toggleSelection = (0, import_react80.useCallback)(
+  const isSelected = (0, import_react79.useCallback)((id) => selection.includes(id), [selection]);
+  const toggleSelection = (0, import_react79.useCallback)(
     (id) => {
       const option = optionsList.find((o) => o.id === id);
       if (!option || option.disabled) return;
@@ -16484,11 +16432,11 @@ function useMultiSelection({
     },
     [optionsList, setSelection]
   );
-  const setSelectionValue = (0, import_react80.useCallback)(
+  const setSelectionValue = (0, import_react79.useCallback)(
     (next) => setSelection(Array.from(next)),
     [setSelection]
   );
-  return (0, import_react80.useMemo)(
+  return (0, import_react79.useMemo)(
     () => ({
       selection,
       setSelection: setSelectionValue,
@@ -16510,9 +16458,9 @@ function useMultiSelect({
   initialIsOpen = false,
   typeAheadResetMs = 500
 }) {
-  const [isOpen, setIsOpen] = (0, import_react81.useState)(initialIsOpen);
-  const [searchQuery, setSearchQuery] = (0, import_react81.useState)("");
-  const selectionOptions = (0, import_react81.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react80.useState)(initialIsOpen);
+  const [searchQuery, setSearchQuery] = (0, import_react80.useState)("");
+  const selectionOptions = (0, import_react80.useMemo)(
     () => options.map((o) => ({ id: o.id, disabled: o.disabled })),
     [options]
   );
@@ -16528,13 +16476,13 @@ function useMultiSelect({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery,
-    toTags: (0, import_react81.useCallback)((o) => [o.label ?? ""], [])
+    toTags: (0, import_react80.useCallback)((o) => [o.label ?? ""], [])
   });
-  const visibleOptionIds = (0, import_react81.useMemo)(
+  const visibleOptionIds = (0, import_react80.useMemo)(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptions = (0, import_react81.useMemo)(
+  const enabledOptions = (0, import_react80.useMemo)(
     () => visibleOptions.filter((o) => !o.disabled),
     [visibleOptions]
   );
@@ -16547,7 +16495,7 @@ function useMultiSelect({
     options: enabledOptions,
     resetTimer: typeAheadResetMs,
     toString: (o) => o.label ?? "",
-    onResultChange: (0, import_react81.useCallback)(
+    onResultChange: (0, import_react80.useCallback)(
       (option) => {
         if (option) listNav.highlight(option.id);
       },
@@ -16555,14 +16503,14 @@ function useMultiSelect({
     )
   });
   const { reset: typeAheadReset, addToTypeAhead } = typeAhead;
-  (0, import_react81.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
-  const highlightItem = (0, import_react81.useCallback)((id) => {
+  const highlightItem = (0, import_react80.useCallback)((id) => {
     if (!enabledOptions.some((o) => o.id === id)) return;
     listNavHighlight(id);
   }, [enabledOptions, listNavHighlight]);
-  const toggleSelectionValue = (0, import_react81.useCallback)((id, newIsSelected) => {
+  const toggleSelectionValue = (0, import_react80.useCallback)((id, newIsSelected) => {
     const next = newIsSelected ?? !isSelected(id);
     if (next) {
       toggleSelection(id);
@@ -16571,7 +16519,7 @@ function useMultiSelect({
     }
     highlightItem(id);
   }, [toggleSelection, setSelection, highlightItem, isSelected, selection]);
-  const setIsOpenWrapper = (0, import_react81.useCallback)(
+  const setIsOpenWrapper = (0, import_react80.useCallback)(
     (open, behavior) => {
       setIsOpen(open);
       behavior = behavior ?? "first";
@@ -16602,13 +16550,13 @@ function useMultiSelect({
       enabledOptions
     ]
   );
-  const toggleOpenWrapper = (0, import_react81.useCallback)(
+  const toggleOpenWrapper = (0, import_react80.useCallback)(
     (behavior) => {
       setIsOpenWrapper(!isOpen, behavior);
     },
     [isOpen, setIsOpenWrapper]
   );
-  const state = (0, import_react81.useMemo)(
+  const state = (0, import_react80.useMemo)(
     () => ({
       value: [...selection],
       highlightedId: listNav.highlightedId,
@@ -16624,11 +16572,11 @@ function useMultiSelect({
       options
     ]
   );
-  const computedState = (0, import_react81.useMemo)(
+  const computedState = (0, import_react80.useMemo)(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = (0, import_react81.useMemo)(
+  const actions = (0, import_react80.useMemo)(
     () => ({
       setIsOpen: setIsOpenWrapper,
       toggleOpen: toggleOpenWrapper,
@@ -16657,7 +16605,7 @@ function useMultiSelect({
       addToTypeAhead
     ]
   );
-  return (0, import_react81.useMemo)(
+  return (0, import_react80.useMemo)(
     () => ({
       ...state,
       ...computedState,
@@ -16668,7 +16616,7 @@ function useMultiSelect({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function MultiSelectRoot({
   children,
   value,
@@ -16685,16 +16633,16 @@ function MultiSelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = (0, import_react82.useState)(null);
-  const [options, setOptions] = (0, import_react82.useState)([]);
-  const generatedId = (0, import_react82.useId)();
-  const [ids, setIds] = (0, import_react82.useState)({
+  const [triggerRef, setTriggerRef] = (0, import_react81.useState)(null);
+  const [options, setOptions] = (0, import_react81.useState)([]);
+  const generatedId = (0, import_react81.useId)();
+  const [ids, setIds] = (0, import_react81.useState)({
     trigger: "multi-select-" + generatedId,
     content: "multi-select-content-" + generatedId,
     listbox: "multi-select-listbox-" + generatedId,
     searchInput: "multi-select-search-" + generatedId
   });
-  const registerOption = (0, import_react82.useCallback)((item) => {
+  const registerOption = (0, import_react81.useCallback)((item) => {
     setOptions((prev) => {
       const next = prev.filter((o) => o.id !== item.id);
       next.push(item);
@@ -16703,12 +16651,12 @@ function MultiSelectRoot({
     });
     return () => setOptions((prev) => prev.filter((o) => o.id !== item.id));
   }, []);
-  const registerTrigger = (0, import_react82.useCallback)((ref) => {
+  const registerTrigger = (0, import_react81.useCallback)((ref) => {
     setTriggerRef(ref);
     return () => setTriggerRef(null);
   }, []);
-  const compare = (0, import_react82.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
-  const idToOptionMap = (0, import_react82.useMemo)(
+  const compare = (0, import_react81.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
+  const idToOptionMap = (0, import_react81.useMemo)(
     () => options.reduce(
       (acc, o) => {
         acc[o.id] = o;
@@ -16718,22 +16666,22 @@ function MultiSelectRoot({
     ),
     [options]
   );
-  const mappedValueIds = (0, import_react82.useMemo)(() => {
+  const mappedValueIds = (0, import_react81.useMemo)(() => {
     if (value == null) return void 0;
     return value.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, value, compare]);
-  const mappedInitialValueIds = (0, import_react82.useMemo)(() => {
+  const mappedInitialValueIds = (0, import_react81.useMemo)(() => {
     if (initialValue == null) return [];
     return initialValue.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, initialValue, compare]);
-  const onValueChangeStable = (0, import_react82.useCallback)(
+  const onValueChangeStable = (0, import_react81.useCallback)(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onValueChange?.(values);
     },
     [idToOptionMap, onValueChange]
   );
-  const onEditCompleteStable = (0, import_react82.useCallback)(
+  const onEditCompleteStable = (0, import_react81.useCallback)(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onEditComplete?.(values);
@@ -16750,12 +16698,12 @@ function MultiSelectRoot({
     onClose
   });
   const { setSearchQuery } = state;
-  (0, import_react82.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     if (showSearch === false) {
       setSearchQuery("");
     }
   }, [showSearch, setSearchQuery]);
-  const contextValue = (0, import_react82.useMemo)(() => {
+  const contextValue = (0, import_react81.useMemo)(() => {
     const valueT = state.value.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
     return {
       invalid,
@@ -16809,7 +16757,7 @@ function MultiSelectRoot({
     registerTrigger,
     showSearch
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MultiSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MultiSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     PopUpContext.Provider,
     {
       value: {
@@ -16826,16 +16774,16 @@ function MultiSelectRoot({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-var import_react84 = require("react");
+var import_react83 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
 var import_clsx25 = __toESM(require("clsx"));
-var import_lucide_react19 = require("lucide-react");
-var import_react83 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var MultiSelectOptionDisplayContext = (0, import_react83.createContext)(null);
+var import_lucide_react18 = require("lucide-react");
+var import_react82 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var MultiSelectOptionDisplayContext = (0, import_react82.createContext)(null);
 function useMultiSelectOptionDisplayLocation() {
-  const context = (0, import_react83.useContext)(MultiSelectOptionDisplayContext);
+  const context = (0, import_react82.useContext)(MultiSelectOptionDisplayContext);
   if (!context) {
     throw new Error(
       "useMultiSelectOptionDisplayLocation must be used within a MultiSelectOptionDisplayContext"
@@ -16843,7 +16791,7 @@ function useMultiSelectOptionDisplayLocation() {
   }
   return context;
 }
-var MultiSelectOption = (0, import_react83.forwardRef)(function MultiSelectOption2({
+var MultiSelectOption = (0, import_react82.forwardRef)(function MultiSelectOption2({
   children,
   label,
   value,
@@ -16853,12 +16801,12 @@ var MultiSelectOption = (0, import_react83.forwardRef)(function MultiSelectOptio
 }, ref) {
   const context = useMultiSelectContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react83.useRef)(null);
+  const itemRef = (0, import_react82.useRef)(null);
   const display = children ?? label;
   const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
-  const generatedId = (0, import_react83.useId)();
+  const generatedId = (0, import_react82.useId)();
   const optionId = props?.id ?? "multi-select-option-" + generatedId;
-  (0, import_react83.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -16871,7 +16819,7 @@ var MultiSelectOption = (0, import_react83.forwardRef)(function MultiSelectOptio
   const isHighlighted = context.highlightedId === optionId;
   const isSelected = context.selectedIds.includes(optionId);
   const isVisible = context.visibleOptionIds.includes(optionId);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "li",
     {
       ...props,
@@ -16904,16 +16852,16 @@ var MultiSelectOption = (0, import_react83.forwardRef)(function MultiSelectOptio
         }
       },
       children: [
-        iconAppearanceResolved === "left" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-          import_lucide_react19.CheckIcon,
+        iconAppearanceResolved === "left" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          import_lucide_react18.CheckIcon,
           {
             className: (0, import_clsx25.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MultiSelectOptionDisplayContext.Provider, { value: "list", children: display }),
-        iconAppearanceResolved === "right" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-          import_lucide_react19.CheckIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MultiSelectOptionDisplayContext.Provider, { value: "list", children: display }),
+        iconAppearanceResolved === "right" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          import_lucide_react18.CheckIcon,
           {
             className: (0, import_clsx25.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
             "aria-hidden": true
@@ -16925,8 +16873,8 @@ var MultiSelectOption = (0, import_react83.forwardRef)(function MultiSelectOptio
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var MultiSelectButton = (0, import_react84.forwardRef)(function MultiSelectButton2({
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var MultiSelectButton = (0, import_react83.forwardRef)(function MultiSelectButton2({
   id,
   placeholder,
   disabled: disabledOverride,
@@ -16939,12 +16887,12 @@ var MultiSelectButton = (0, import_react84.forwardRef)(function MultiSelectButto
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  (0, import_react84.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = (0, import_react84.useRef)(null);
-  (0, import_react84.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react84.useEffect)(() => {
+  const innerRef = (0, import_react83.useRef)(null);
+  (0, import_react83.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react83.useEffect)(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -16952,7 +16900,7 @@ var MultiSelectButton = (0, import_react84.forwardRef)(function MultiSelectButto
   const invalid = context.invalid;
   const hasValue = context.value.length > 0;
   const selectedOptions = context.selectedIds.map((id2) => context.idToOptionMap[id2]).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       ...props,
@@ -16996,34 +16944,34 @@ var MultiSelectButton = (0, import_react84.forwardRef)(function MultiSelectButto
       "aria-expanded": context.isOpen,
       "aria-controls": context.isOpen ? context.config.ids.content : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(MultiSelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(context.value) ?? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex flex-wrap gap-x-1 gap-y-2", children: selectedOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MultiSelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(context.value) ?? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex flex-wrap gap-x-1 gap-y-2", children: selectedOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { children: [
           opt.display,
-          index < selectedOptions.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { children: "," })
+          index < selectedOptions.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: "," })
         ] }, opt.id)) }) : placeholder ?? translation("clickToSelect") }),
-        !hideExpansionIcon && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ExpansionIcon, { isExpanded: context.isOpen })
+        !hideExpansionIcon && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ExpansionIcon, { isExpanded: context.isOpen })
       ]
     }
   );
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-var import_react85 = require("react");
+var import_react84 = require("react");
 var import_clsx26 = __toESM(require("clsx"));
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var MultiSelectContent = (0, import_react84.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = (0, import_react85.useRef)(null);
-  const searchInputRef = (0, import_react85.useRef)(null);
-  (0, import_react85.useImperativeHandle)(ref, () => innerRef.current);
+  const innerRef = (0, import_react84.useRef)(null);
+  const searchInputRef = (0, import_react84.useRef)(null);
+  (0, import_react84.useImperativeHandle)(ref, () => innerRef.current);
   const context = useMultiSelectContext();
   const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
   const { setIds } = config;
-  (0, import_react85.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = (0, import_react85.useCallback)(
+  const keyHandler = (0, import_react84.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -17060,7 +17008,7 @@ var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectCont
     },
     [showSearch, handleTypeaheadKey, toggleSelection, highlightedId, highlightNext, highlightPrevious, highlightFirst, highlightLast]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
     PopUp,
     {
       ...props,
@@ -17076,7 +17024,7 @@ var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectCont
       "aria-labelledby": context.config.ids.trigger,
       className: (0, import_clsx26.default)("gap-y-1", props.className),
       children: [
-        showSearch && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           Input,
           {
             ...searchInputProps,
@@ -17095,7 +17043,7 @@ var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectCont
             className: (0, import_clsx26.default)("mx-2 mt-2 shrink-0", searchInputProps?.className)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
           "ul",
           {
             ref: innerRef,
@@ -17110,7 +17058,7 @@ var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectCont
             className: (0, import_clsx26.default)("flex-col-1 p-2 overflow-auto"),
             children: [
               props.children,
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: showSearch, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Visibility, { isVisible: showSearch, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "li",
                 {
                   role: "option",
@@ -17136,12 +17084,12 @@ var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectCont
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react86.forwardRef)(
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var MultiSelect = (0, import_react85.forwardRef)(
   function MultiSelect2({ children, contentPanelProps, buttonProps, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(MultiSelectRoot, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(MultiSelectButton, { ref, ...buttonProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(MultiSelectContent, { ...contentPanelProps, children })
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(MultiSelectRoot, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(MultiSelectButton, { ref, ...buttonProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(MultiSelectContent, { ...contentPanelProps, children })
     ] });
   }
 );
@@ -17150,41 +17098,51 @@ var MultiSelect = (0, import_react86.forwardRef)(
 var import_clsx27 = __toESM(require("clsx"));
 
 // src/components/user-interaction/data/FilterOperatorLabel.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var FilterOperatorLabel = ({ operator }) => {
   const translation = useHightideTranslation();
   const { icon, translationKey } = FilterOperatorUtils.getInfo(operator);
   const label = typeof translationKey === "string" ? translation(translationKey) : translationKey;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-1 items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex-row-1 items-center gap-2", children: [
     icon,
     label
   ] });
 };
 
 // src/components/user-interaction/data/FilterPopUp.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var FilterBasePopUp = (0, import_react87.forwardRef)(function FilterBasePopUp2({
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var FilterBasePopUp = (0, import_react86.forwardRef)(function FilterBasePopUp2({
   children,
   name,
   operator,
   onOperatorChange,
   onRemove,
   allowedOperators,
+  operatorOverrides,
   noParameterRequired = false,
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  const operators = (0, import_react86.useMemo)(() => {
+    if (!operatorOverrides || operatorOverrides.length === 0) return allowedOperators;
+    return allowedOperators.filter((op) => operatorOverrides.includes(op));
+  }, [allowedOperators, operatorOverrides]);
+  (0, import_react86.useEffect)(() => {
+    if (operators.length === 0) {
+      onRemove();
+    }
+  }, [operators, onRemove]);
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     PopUp,
     {
       ref,
       ...props,
       className: (0, import_clsx27.default)("flex-col-3 p-3 relative min-w-64", props.className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-4 justify-between w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-0.5 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-sm text-description", children: name ?? translation("filter") }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-4 justify-between w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-0.5 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "typography-label-sm text-description", children: name ?? translation("filter") }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               Select,
               {
                 value: operator,
@@ -17195,12 +17153,12 @@ var FilterBasePopUp = (0, import_react87.forwardRef)(function FilterBasePopUp2({
                   "selectedDisplay": (option) => option ? translation(FilterOperatorUtils.getInfo(option.value).translationKey) : ""
                 },
                 iconAppearance: "right",
-                children: allowedOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectOption, { value: op, label: translation(FilterOperatorUtils.getInfo(op).translationKey), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FilterOperatorLabel, { operator: op }) }, op))
+                children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(SelectOption, { value: op, label: translation(FilterOperatorUtils.getInfo(op).translationKey), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(FilterOperatorLabel, { operator: op }) }, op))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-0 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-0 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               IconButton,
               {
                 tooltip: translation("removeFilter"),
@@ -17208,29 +17166,29 @@ var FilterBasePopUp = (0, import_react87.forwardRef)(function FilterBasePopUp2({
                 color: "negative",
                 coloringStyle: "text",
                 size: "sm",
-                children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.TrashIcon, { className: "size-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react19.TrashIcon, { className: "size-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               IconButton,
               {
-                tooltip: translation("close"),
+                tooltip: translation("done"),
                 onClick: props.onClose,
                 color: "neutral",
                 coloringStyle: "text",
                 size: "sm",
-                children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.XIcon, { className: "size-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react19.Check, { className: "size-4" })
               }
             )
           ] })
         ] }),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: noParameterRequired, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex-row-0 items-center text-sm text-description h-element-sm", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: noParameterRequired, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex-row-0 items-center text-sm text-description h-element-sm", children: translation("noParameterRequired") }) })
       ]
     }
   );
 });
-var TextFilterPopUp = (0, import_react87.forwardRef)(function TextFilterPopUp2({
+var TextFilterPopUp = (0, import_react86.forwardRef)(function TextFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17238,12 +17196,12 @@ var TextFilterPopUp = (0, import_react87.forwardRef)(function TextFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react87.useId)();
+  const id = (0, import_react86.useId)();
   const ids = {
     search: `text-filter-search-${id}`,
     caseSensitive: `text-filter-case-sensitive-${id}`
   };
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.text(suggestion)) {
       return "contains";
@@ -17252,7 +17210,7 @@ var TextFilterPopUp = (0, import_react87.forwardRef)(function TextFilterPopUp2({
   }, [value]);
   const parameter = value?.parameter ?? {};
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     FilterBasePopUp,
     {
       ref,
@@ -17263,48 +17221,29 @@ var TextFilterPopUp = (0, import_react87.forwardRef)(function TextFilterPopUp2({
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.text,
       noParameterRequired: !needsParameterInput,
-      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: needsParameterInput, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.search, className: "typography-label-md", children: translation("search") }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-            Input,
-            {
-              id: ids.search,
-              value: parameter.searchText ?? "",
-              placeholder: translation("value"),
-              onValueChange: (searchText) => {
-                onValueChange({
-                  dataType: "text",
-                  operator,
-                  parameter: { ...parameter, searchText }
-                });
-              },
-              className: "min-w-64"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-2 items-center mt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-            Checkbox,
-            {
-              id: ids.caseSensitive,
-              value: parameter.isCaseSensitive ?? false,
-              onValueChange: (isCaseSensitive) => {
-                onValueChange({
-                  dataType: "text",
-                  operator,
-                  parameter: { ...parameter, isCaseSensitive }
-                });
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.caseSensitive, children: translation("caseSensitive") })
-        ] })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.search, className: "typography-label-md", children: translation("search") }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          Input,
+          {
+            id: ids.search,
+            value: parameter.stringValue ?? "",
+            placeholder: translation("value"),
+            onValueChange: (searchText) => {
+              onValueChange({
+                dataType: "text",
+                operator,
+                parameter: { ...parameter, stringValue: searchText }
+              });
+            },
+            className: "min-w-64"
+          }
+        )
+      ] }) })
     }
   );
 });
-var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopUp2({
+var NumberFilterPopUp = (0, import_react86.forwardRef)(function NumberFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17312,13 +17251,13 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react87.useId)();
+  const id = (0, import_react86.useId)();
   const ids = {
     min: `number-filter-min-${id}`,
     max: `number-filter-max-${id}`,
     compareValue: `number-filter-compare-value-${id}`
   };
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.number(suggestion)) {
       return "between";
@@ -17328,7 +17267,7 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
   const parameter = value?.parameter ?? {};
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     FilterBasePopUp,
     {
       ref,
@@ -17342,14 +17281,14 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
       allowedOperators: FilterOperatorUtils.operatorsByCategory.number,
       noParameterRequired: !needsParameterInput,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: needsRangeInput, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.min, className: "typography-label-md", children: translation("min") }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Visibility, { isVisible: needsRangeInput, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.min, className: "typography-label-md", children: translation("min") }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               Input,
               {
                 id: ids.min,
-                value: parameter.minNumber?.toString() ?? "",
+                value: parameter.numberMin?.toString() ?? "",
                 type: "number",
                 placeholder: "0",
                 onValueChange: (text) => {
@@ -17357,20 +17296,20 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
                   onValueChange({
                     dataType: "number",
                     operator,
-                    parameter: { ...parameter, minNumber: isNaN(num) ? void 0 : num }
+                    parameter: { ...parameter, numberMin: isNaN(num) ? void 0 : num }
                   });
                 },
                 className: "min-w-64"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.max, className: "typography-label-md", children: translation("max") }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.max, className: "typography-label-md", children: translation("max") }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               Input,
               {
                 id: ids.max,
-                value: parameter.maxNumber?.toString() ?? "",
+                value: parameter.numberMax?.toString() ?? "",
                 type: "number",
                 placeholder: "1",
                 onValueChange: (text) => {
@@ -17378,7 +17317,7 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
                   onValueChange({
                     dataType: "number",
                     operator,
-                    parameter: { ...parameter, maxNumber: isNaN(num) ? void 0 : num }
+                    parameter: { ...parameter, numberMax: isNaN(num) ? void 0 : num }
                   });
                 },
                 className: "min-w-64"
@@ -17386,10 +17325,10 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           Input,
           {
-            value: parameter.compareValue?.toString() ?? "",
+            value: parameter.numberValue?.toString() ?? "",
             type: "number",
             placeholder: "0",
             onValueChange: (text) => {
@@ -17397,7 +17336,7 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
               onValueChange({
                 dataType: "number",
                 operator,
-                parameter: { ...parameter, compareValue: isNaN(num) ? void 0 : num }
+                parameter: { ...parameter, numberValue: isNaN(num) ? void 0 : num }
               });
             },
             className: "min-w-64"
@@ -17407,7 +17346,7 @@ var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopU
     }
   );
 });
-var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
+var DateFilterPopUp = (0, import_react86.forwardRef)(function DateFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17415,13 +17354,13 @@ var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react87.useId)();
+  const id = (0, import_react86.useId)();
   const ids = {
     startDate: `date-filter-start-date-${id}`,
     endDate: `date-filter-end-date-${id}`,
     compareDate: `date-filter-compare-date-${id}`
   };
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.date(suggestion)) {
       return "between";
@@ -17429,11 +17368,11 @@ var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react87.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react87.useState)(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react86.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react86.useState)(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     FilterBasePopUp,
     {
       ref,
@@ -17445,36 +17384,36 @@ var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
       allowedOperators: FilterOperatorUtils.operatorsByCategory.date,
       noParameterRequired: !needsParameterInput,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: needsRangeInput, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Visibility, { isVisible: needsRangeInput, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               DateTimeInput,
               {
                 id: ids.startDate,
-                value: temporaryMinDateValue ?? parameter.minDate ?? null,
+                value: temporaryMinDateValue ?? parameter.dateMin ?? null,
                 onValueChange: setTemporaryMinDateValue,
                 onEditComplete: (dateValue) => {
-                  if (dateValue && parameter.maxDate && dateValue > parameter.maxDate) {
-                    if (!parameter.minDate) {
+                  if (dateValue && parameter.dateMax && dateValue > parameter.dateMax) {
+                    if (!parameter.dateMin) {
                       onValueChange({
                         dataType: "date",
                         operator,
-                        parameter: { ...parameter, minDate: parameter.maxDate, maxDate: dateValue }
+                        parameter: { ...parameter, dateMin: parameter.dateMax, dateMax: dateValue }
                       });
                     } else {
-                      const diff = parameter.maxDate.getTime() - parameter.minDate.getTime();
+                      const diff = parameter.dateMax.getTime() - parameter.dateMin.getTime();
                       onValueChange({
                         dataType: "date",
                         operator,
-                        parameter: { ...parameter, minDate: dateValue, maxDate: new Date(dateValue.getTime() + diff) }
+                        parameter: { ...parameter, dateMin: dateValue, dateMax: new Date(dateValue.getTime() + diff) }
                       });
                     }
                   } else {
                     onValueChange({
                       dataType: "date",
                       operator,
-                      parameter: { ...parameter, minDate: dateValue }
+                      parameter: { ...parameter, dateMin: dateValue }
                     });
                   }
                   setTemporaryMinDateValue(null);
@@ -17485,35 +17424,35 @@ var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               DateTimeInput,
               {
                 id: ids.endDate,
-                value: temporaryMaxDateValue ?? parameter.maxDate ?? null,
+                value: temporaryMaxDateValue ?? parameter.dateMax ?? null,
                 onValueChange: setTemporaryMaxDateValue,
                 onEditComplete: (dateValue) => {
-                  if (dateValue && parameter.minDate && dateValue < parameter.minDate) {
-                    if (!parameter.maxDate) {
+                  if (dateValue && parameter.dateMin && dateValue < parameter.dateMin) {
+                    if (!parameter.dateMax) {
                       onValueChange({
                         dataType: "date",
                         operator,
-                        parameter: { ...parameter, minDate: dateValue, maxDate: parameter.minDate }
+                        parameter: { ...parameter, dateMin: dateValue, dateMax: parameter.dateMin }
                       });
                     } else {
-                      const diff = parameter.maxDate.getTime() - parameter.minDate.getTime();
+                      const diff = parameter.dateMax.getTime() - parameter.dateMin.getTime();
                       onValueChange({
                         dataType: "date",
                         operator,
-                        parameter: { ...parameter, minDate: new Date(dateValue.getTime() - diff), maxDate: dateValue }
+                        parameter: { ...parameter, dateMin: new Date(dateValue.getTime() - diff), dateMax: dateValue }
                       });
                     }
                   } else {
                     onValueChange({
                       dataType: "date",
                       operator,
-                      parameter: { ...parameter, maxDate: dateValue }
+                      parameter: { ...parameter, dateMax: dateValue }
                     });
                   }
                   setTemporaryMaxDateValue(null);
@@ -17525,17 +17464,17 @@ var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             DateTimeInput,
             {
               id: ids.compareDate,
-              value: parameter.compareDate ?? null,
+              value: parameter.dateValue ?? null,
               onValueChange: (compareDate) => {
                 onValueChange({
                   ...value,
-                  parameter: { ...parameter, compareDate }
+                  parameter: { ...parameter, dateValue: compareDate }
                 });
               },
               allowRemove: true,
@@ -17544,12 +17483,12 @@ var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
 });
-var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilterPopUp2({
+var DatetimeFilterPopUp = (0, import_react86.forwardRef)(function DatetimeFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17557,13 +17496,13 @@ var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilter
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react87.useId)();
+  const id = (0, import_react86.useId)();
   const ids = {
     startDate: `datetime-filter-start-date-${id}`,
     endDate: `datetime-filter-end-date-${id}`,
     compareDate: `datetime-filter-compare-date-${id}`
   };
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.datetime(suggestion)) {
       return "between";
@@ -17571,11 +17510,11 @@ var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilter
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react87.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react87.useState)(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react86.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react86.useState)(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     FilterBasePopUp,
     {
       ref,
@@ -17586,37 +17525,37 @@ var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilter
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.dateTime,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             DateTimeInput,
             {
               id: ids.startDate,
               mode: "dateTime",
-              value: temporaryMinDateValue ?? parameter.minDate ?? null,
+              value: temporaryMinDateValue ?? parameter.dateMin ?? null,
               onValueChange: setTemporaryMinDateValue,
               onEditComplete: (dateValue) => {
-                if (dateValue && parameter.maxDate && dateValue > parameter.maxDate) {
-                  if (!parameter.minDate) {
+                if (dateValue && parameter.dateMax && dateValue > parameter.dateMax) {
+                  if (!parameter.dateMin) {
                     onValueChange({
                       dataType: "dateTime",
                       operator,
-                      parameter: { ...parameter, minDate: parameter.maxDate, maxDate: dateValue }
+                      parameter: { ...parameter, dateMin: parameter.dateMax, dateMax: dateValue }
                     });
                   } else {
-                    const diff = parameter.maxDate.getTime() - parameter.minDate.getTime();
+                    const diff = parameter.dateMax.getTime() - parameter.dateMin.getTime();
                     onValueChange({
                       dataType: "dateTime",
                       operator,
-                      parameter: { ...parameter, minDate: dateValue, maxDate: new Date(dateValue.getTime() + diff) }
+                      parameter: { ...parameter, dateMin: dateValue, dateMax: new Date(dateValue.getTime() + diff) }
                     });
                   }
                 } else {
                   onValueChange({
                     dataType: "dateTime",
                     operator,
-                    parameter: { ...parameter, minDate: dateValue }
+                    parameter: { ...parameter, dateMin: dateValue }
                   });
                 }
                 setTemporaryMinDateValue(null);
@@ -17626,35 +17565,35 @@ var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilter
               className: "min-w-64"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             DateTimeInput,
             {
               id: ids.endDate,
               mode: "dateTime",
-              value: temporaryMaxDateValue ?? parameter.maxDate ?? null,
+              value: temporaryMaxDateValue ?? parameter.dateMax ?? null,
               onValueChange: setTemporaryMaxDateValue,
               onEditComplete: (dateValue) => {
-                if (dateValue && parameter.minDate && dateValue < parameter.minDate) {
-                  if (!parameter.maxDate) {
+                if (dateValue && parameter.dateMin && dateValue < parameter.dateMin) {
+                  if (!parameter.dateMax) {
                     onValueChange({
                       dataType: "dateTime",
                       operator,
-                      parameter: { ...parameter, minDate: dateValue, maxDate: parameter.minDate }
+                      parameter: { ...parameter, dateMin: dateValue, dateMax: parameter.dateMin }
                     });
                   } else {
-                    const diff = parameter.maxDate.getTime() - parameter.minDate.getTime();
+                    const diff = parameter.dateMax.getTime() - parameter.dateMin.getTime();
                     onValueChange({
                       dataType: "dateTime",
                       operator,
-                      parameter: { ...parameter, minDate: new Date(dateValue.getTime() - diff), maxDate: dateValue }
+                      parameter: { ...parameter, dateMin: new Date(dateValue.getTime() - diff), dateMax: dateValue }
                     });
                   }
                 } else {
                   onValueChange({
                     dataType: "dateTime",
                     operator,
-                    parameter: { ...parameter, maxDate: dateValue }
+                    parameter: { ...parameter, dateMax: dateValue }
                   });
                 }
                 setTemporaryMaxDateValue(null);
@@ -17665,19 +17604,19 @@ var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilter
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             DateTimeInput,
             {
               id: ids.compareDate,
               mode: "dateTime",
-              value: parameter.compareDate ?? null,
+              value: parameter.dateValue ?? null,
               onValueChange: (compareDate) => {
                 onValueChange({
                   dataType: "dateTime",
                   operator,
-                  parameter: { ...parameter, compareDate }
+                  parameter: { ...parameter, dateValue: compareDate }
                 });
               },
               allowRemove: true,
@@ -17686,19 +17625,19 @@ var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilter
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
 });
-var BooleanFilterPopUp = (0, import_react87.forwardRef)(function BooleanFilterPopUp2({
+var BooleanFilterPopUp = (0, import_react86.forwardRef)(function BooleanFilterPopUp2({
   name,
   value,
   onValueChange,
   onRemove,
   ...props
 }, ref) {
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "isTrue";
     if (!FilterOperatorUtils.typeCheck.boolean(suggestion)) {
       return "isTrue";
@@ -17706,7 +17645,7 @@ var BooleanFilterPopUp = (0, import_react87.forwardRef)(function BooleanFilterPo
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     FilterBasePopUp,
     {
       ref,
@@ -17719,7 +17658,7 @@ var BooleanFilterPopUp = (0, import_react87.forwardRef)(function BooleanFilterPo
     }
   );
 });
-var TagsFilterPopUp = (0, import_react87.forwardRef)(function TagsFilterPopUp2({
+var TagsFilterPopUp = (0, import_react86.forwardRef)(function TagsFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17728,7 +17667,7 @@ var TagsFilterPopUp = (0, import_react87.forwardRef)(function TagsFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tags(suggestion)) {
       return "contains";
@@ -17736,12 +17675,12 @@ var TagsFilterPopUp = (0, import_react87.forwardRef)(function TagsFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const selectedTags = Array.isArray(parameter.multiOptionSearch) ? parameter.multiOptionSearch : [];
+  const selectedTags = Array.isArray(parameter.uuidValues) ? parameter.uuidValues : [];
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   if (availableTags.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     FilterBasePopUp,
     {
       ref,
@@ -17752,8 +17691,8 @@ var TagsFilterPopUp = (0, import_react87.forwardRef)(function TagsFilterPopUp2({
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.multiTags,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           MultiSelect,
           {
             value: selectedTags,
@@ -17761,19 +17700,19 @@ var TagsFilterPopUp = (0, import_react87.forwardRef)(function TagsFilterPopUp2({
               onValueChange({
                 dataType: "multiTags",
                 operator,
-                parameter: { ...parameter, multiOptionSearch: selected.length > 0 ? selected : void 0 }
+                parameter: { ...parameter, uuidValues: selected.length > 0 ? selected : void 0 }
               });
             },
             buttonProps: { className: "min-w-64" },
-            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(MultiSelectOption, { value: tag, label, children: label }, tag))
+            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(MultiSelectOption, { value: tag, label, children: label }, tag))
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
 });
-var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFilterPopUp2({
+var TagsSingleFilterPopUp = (0, import_react86.forwardRef)(function TagsSingleFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17782,7 +17721,7 @@ var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFi
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = (0, import_react87.useMemo)(() => {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
       return "contains";
@@ -17790,14 +17729,14 @@ var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFi
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const selectedTagsMulti = Array.isArray(parameter.multiOptionSearch) ? parameter.multiOptionSearch : [];
-  const selectedTagSingle = parameter.singleOptionSearch != null ? String(parameter.singleOptionSearch) : void 0;
+  const selectedTagsMulti = Array.isArray(parameter.uuidValues) ? parameter.uuidValues : [];
+  const selectedTagSingle = parameter.uuidValue != null ? String(parameter.uuidValue) : void 0;
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   const needsMultiSelect = operator === "contains" || operator === "notContains";
   if (availableTags.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     FilterBasePopUp,
     {
       ref,
@@ -17808,8 +17747,8 @@ var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFi
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.singleTag,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           MultiSelect,
           {
             value: selectedTagsMulti,
@@ -17817,14 +17756,14 @@ var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFi
               onValueChange({
                 dataType: "singleTag",
                 operator,
-                parameter: { ...parameter, multiOptionSearch: selected.length > 0 ? selected : void 0 }
+                parameter: { ...parameter, uuidValues: selected.length > 0 ? selected : void 0 }
               });
             },
             buttonProps: { className: "min-w-64" },
-            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(MultiSelectOption, { value: tag, label }, tag))
+            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(MultiSelectOption, { value: tag, label }, tag))
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsParameterInput && !needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: needsParameterInput && !needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           Select,
           {
             value: selectedTagSingle,
@@ -17832,27 +17771,27 @@ var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFi
               onValueChange({
                 dataType: "singleTag",
                 operator,
-                parameter: { ...parameter, singleOptionSearch: selectedTag ?? void 0 }
+                parameter: { ...parameter, uuidValue: selectedTag ?? void 0 }
               });
             },
             buttonProps: { className: "min-w-64" },
-            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectOption, { value: tag, label }, tag))
+            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(SelectOption, { value: tag, label }, tag))
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
 });
-var GenericFilterPopUp = (0, import_react87.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
-  const operator = (0, import_react87.useMemo)(() => {
+var GenericFilterPopUp = (0, import_react86.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
+  const operator = (0, import_react86.useMemo)(() => {
     const suggestion = value?.operator ?? "isNotUndefined";
     if (!FilterOperatorUtils.typeCheck.unknownType(suggestion)) {
       return "isNotUndefined";
     }
     return suggestion;
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     FilterBasePopUp,
     {
       ref,
@@ -17865,7 +17804,7 @@ var GenericFilterPopUp = (0, import_react87.forwardRef)(function GenericFilterPo
     }
   );
 });
-var FilterPopUp = (0, import_react87.forwardRef)(function FilterPopUp2({
+var FilterPopUp = (0, import_react86.forwardRef)(function FilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17875,26 +17814,26 @@ var FilterPopUp = (0, import_react87.forwardRef)(function FilterPopUp2({
 }, ref) {
   switch (dataType) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(NumberFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(NumberFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DateFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DateFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "dateTime":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DatetimeFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DatetimeFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "boolean":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(BooleanFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(BooleanFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "multiTags":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TagsFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TagsFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
     case "singleTag":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TagsSingleFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TagsSingleFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
     case "unknownType":
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(GenericFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(GenericFilterPopUp, { ref, name, value, onValueChange, ...props });
   }
 });
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   header
@@ -17902,18 +17841,18 @@ var TableFilterButton = ({
   const translation = useHightideTranslation();
   const column = header.column;
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react88.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react87.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = (0, import_react88.useRef)(null);
-  const containerRef = (0, import_react88.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react88.useState)(false);
-  const id = (0, import_react88.useId)();
-  const ids = (0, import_react88.useMemo)(() => ({
+  const anchorRef = (0, import_react87.useRef)(null);
+  const containerRef = (0, import_react87.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react87.useState)(false);
+  const id = (0, import_react87.useId)();
+  const ids = (0, import_react87.useMemo)(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -17921,8 +17860,8 @@ var TableFilterButton = ({
   if (isTagsFilter && !hasTagsMetaData) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
       IconButton,
       {
         ref: anchorRef,
@@ -17938,12 +17877,12 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "relative",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.FilterIcon, { className: "size-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.FilterIcon, { className: "size-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       FilterPopUp,
       {
         ref: containerRef,
@@ -17974,11 +17913,11 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-var import_react89 = require("react");
+var import_react88 = require("react");
 
 // src/components/user-interaction/data/data-types.tsx
-var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var dataTypes = [
   "text",
   "number",
@@ -18011,21 +17950,21 @@ var getDefaultValue = (type, selectOptions) => {
 function toIcon(type) {
   switch (type) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.TextIcon, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.TextIcon, { className: "size-4" });
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.Binary, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.Binary, { className: "size-4" });
     case "boolean":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.Check, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.Check, { className: "size-4" });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.Calendar, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.Calendar, { className: "size-4" });
     case "dateTime":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.CalendarClock, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.CalendarClock, { className: "size-4" });
     case "singleTag":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.Tag, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.Tag, { className: "size-4" });
     case "multiTags":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.Tags, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.Tags, { className: "size-4" });
     case "unknownType":
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.Database, { className: "size-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react21.Database, { className: "size-4" });
   }
 }
 var DataTypeUtils = {
@@ -18035,10 +17974,10 @@ var DataTypeUtils = {
 };
 
 // src/components/layout/table/TableHeader.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = (0, import_react89.useCallback)((e) => {
+  const handleResizeMove = (0, import_react88.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);
@@ -18054,7 +17993,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = (0, import_react89.useCallback)(() => {
+  const handleResizeEnd = (0, import_react88.useCallback)(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -18072,7 +18011,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -18080,8 +18019,8 @@ var TableHeader = ({ isSticky = false }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TableStateContext.Consumer, { children: ({ sizeVars }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("colgroup", { style: sizeVars, children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TableStateContext.Consumer, { children: ({ sizeVars }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("colgroup", { style: sizeVars, children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "col",
       {
         style: {
@@ -18092,8 +18031,8 @@ var TableHeader = ({ isSticky = false }) => {
       },
       header.id
     )) }) }, headerGroup.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { "data-name": "table-header-row", className: (0, import_clsx28.default)(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tr", { "data-name": "table-header-row", className: (0, import_clsx28.default)(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "th",
         {
           colSpan: header.colSpan,
@@ -18101,8 +18040,8 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: (0, import_clsx28.default)("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-row-1 items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex-row-1 items-center truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 TableSortButton,
                 {
                   sortDirection: header.column.getIsSorted(),
@@ -18128,7 +18067,7 @@ var TableHeader = ({ isSticky = false }) => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: header.column.getCanFilter() && DataTypeUtils.types.includes(header.column.columnDef.filterFn), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: header.column.getCanFilter() && DataTypeUtils.types.includes(header.column.columnDef.filterFn), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 TableFilterButton,
                 {
                   header,
@@ -18140,7 +18079,7 @@ var TableHeader = ({ isSticky = false }) => {
                 header.getContext()
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "div",
               {
                 onPointerDown: (e) => {
@@ -18171,7 +18110,7 @@ var TableHeader = ({ isSticky = false }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var TableDisplay = ({
   children,
   containerProps,
@@ -18180,7 +18119,7 @@ var TableDisplay = ({
 }) => {
   const { table } = useTableStateContext();
   const { containerRef } = useTableContainerContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     "table",
     {
       ...props,
@@ -18191,8 +18130,8 @@ var TableDisplay = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableHeader, { ...tableHeaderProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableBody, {})
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TableHeader, { ...tableHeaderProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TableBody, {})
       ]
     }
   ) });
@@ -18200,10 +18139,10 @@ var TableDisplay = ({
 
 // src/components/layout/table/TablePagination.tsx
 var import_clsx29 = __toESM(require("clsx"));
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     Pagination,
     {
       ...props,
@@ -18223,23 +18162,86 @@ var TablePageSizeSelect = ({
 }) => {
   const { table } = useTableStateWithoutSizingContext();
   const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     Select,
     {
       ...props,
       value: currentPageSize.toString(),
       onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SelectOption, { value: size.toString(), label: size.toString() }, size))
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SelectOption, { value: size.toString(), label: size.toString() }, size))
     }
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { ...props, className: (0, import_clsx29.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TablePaginationMenu, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { ...props, className: (0, import_clsx29.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TablePaginationMenu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
   ] });
 };
 
+// src/components/user-interaction/Checkbox.tsx
+var import_lucide_react22 = require("lucide-react");
+var import_react89 = require("react");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var Checkbox = ({
+  value: controlledValue,
+  initialValue = false,
+  indeterminate,
+  required = false,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  onValueChange,
+  onEditComplete,
+  size = "md",
+  alwaysShowCheckIcon = false,
+  ...props
+}) => {
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
+  const onChangeWrapper = (0, import_react89.useCallback)((value2) => {
+    onValueChangeStable(value2);
+    onEditCompleteStable(value2);
+  }, [onValueChangeStable, onEditCompleteStable]);
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange: onChangeWrapper,
+    defaultValue: initialValue
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    "div",
+    {
+      ...props,
+      onClick: (event) => {
+        if (!disabled) {
+          setValue((prev) => !prev);
+        }
+        props.onClick?.(event);
+      },
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === " " || event.key === "Enter") {
+          event.preventDefault();
+          setValue((prev) => !prev);
+        }
+        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),
+      "data-name": props["data-name"] ?? "checkbox",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react22.Minus, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react22.Check, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
+      ]
+    }
+  );
+};
+
 // src/components/layout/table/TableWithSelectionProvider.tsx
 var import_react90 = require("react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
@@ -18405,6 +18407,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
+  const enableHiding = table.options.enableHiding !== false;
+  const enableColumnPinning = table.options.enableColumnPinning !== false;
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
@@ -18609,7 +18613,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -18621,8 +18625,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
                   children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.EyeOff, { className: "size-4" })
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -18640,7 +18644,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
                   children: !isPinned ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Pin, { className: "size-4" })
                 }
-              )
+              ) })
             ] })
           ] }, columnId);
         }) })
@@ -18658,7 +18662,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.ArrowLeftRightIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Columns3Cog, { className: "size-5" })
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableColumnSwitcherPopUp, { ...props })
@@ -19667,9 +19671,9 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-1 flex-wrap gap-y-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(PopUpRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react26.PlusIcon, { className: "size-4" })
       ] }) }),
@@ -19718,10 +19722,10 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props, isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "md", children: [
-              item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : item.label + ": " + filterValueToLabel(columnFilter.value, { tags: item.tags }),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ExpansionIcon, { isExpanded: isOpen })
-            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "font-bold", children: item.label }),
+              filterValueToLabel(columnFilter.value, { tags: item.tags })
+            ] }) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
@@ -19729,11 +19733,12 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
                 onValueChange(value.filter((prevItem) => prevItem.id !== columnFilter.id));
                 setEditState(void 0);
               },
+              operatorOverrides: item.operatorOverrides,
               dataType: item.dataType,
               tags: item.tags,
               name: item.label,
               isOpen,
-              close: () => setIsOpen(false)
+              onClose: () => setIsOpen(false)
             }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
               FilterPopUp,
               {
@@ -19741,6 +19746,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
                 value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
                 dataType: item.dataType,
                 tags: item.tags,
+                operatorOverrides: item.operatorOverrides,
                 onValueChange: (value2) => {
                   setEditState({ ...columnFilter, value: value2 });
                 },
@@ -19759,8 +19765,142 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
   ] });
 };
 
-// src/components/user-interaction/date/TimeDisplay.tsx
+// src/components/user-interaction/data/SortingList.tsx
+var import_react107 = require("react");
+var import_lucide_react27 = require("lucide-react");
+var import_clsx37 = __toESM(require("clsx"));
 var import_jsx_runtime98 = require("react/jsx-runtime");
+var SortingList = ({ sorting, onSortingChange, availableItems }) => {
+  const translation = useHightideTranslation();
+  const activeIds = (0, import_react107.useMemo)(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = (0, import_react107.useMemo)(
+    () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
+    [availableItems, activeIds]
+  );
+  const itemRecord = (0, import_react107.useMemo)(
+    () => availableItems.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    ),
+    [availableItems]
+  );
+  const setSortDirection = (columnId, desc) => {
+    onSortingChange(sorting.map((s) => s.id === columnId ? { ...s, desc } : s));
+  };
+  const removeSort = (columnId) => {
+    onSortingChange(sorting.filter((s) => s.id !== columnId));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(PopUpRoot, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+        translation("addSorting"),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.PlusIcon, { className: "size-4" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        Combobox,
+        {
+          onItemClick: (id) => {
+            const item = itemRecord[id];
+            if (!item) return;
+            onSortingChange([...sorting, { id: item.id, desc: false }]);
+            setIsOpen(false);
+          },
+          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
+            DataTypeUtils.toIcon(item.dataType),
+            item.label
+          ] }, item.id))
+        }
+      ) }) })
+    ] }),
+    sorting.map((columnSort) => {
+      const item = itemRecord[columnSort.id];
+      if (!item) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(PopUpRoot, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowUpNarrowWide, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+          PopUp,
+          {
+            className: (0, import_clsx37.default)("flex-col-3 p-3 min-w-64"),
+            onClose: () => setIsOpen(false),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    IconButton,
+                    {
+                      tooltip: translation("removeFilter"),
+                      onClick: () => {
+                        removeSort(columnSort.id);
+                        setIsOpen(false);
+                      },
+                      color: "negative",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.TrashIcon, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    IconButton,
+                    {
+                      tooltip: translation("close"),
+                      onClick: () => setIsOpen(false),
+                      color: "neutral",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.XIcon, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "neutral" : "primary",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, false),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowUpNarrowWide, { className: "size-4" }),
+                      translation("sortAsc")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "primary" : "neutral",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, true),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowDownWideNarrow, { className: "size-4" }),
+                      translation("sortDesc")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] }, columnSort.id);
+    })
+  ] });
+};
+
+// src/components/user-interaction/date/TimeDisplay.tsx
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -19797,14 +19937,14 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: fullString });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-var import_react107 = require("react");
-var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDateTimeInput2({
+var import_react108 = require("react");
+var import_lucide_react28 = require("lucide-react");
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var FlexibleDateTimeInput = (0, import_react108.forwardRef)(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
   initialValue,
@@ -19819,26 +19959,30 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
     onValueChange,
     defaultValue: initialValue
   });
-  const fixedTime = (0, import_react107.useMemo)(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
-  const [preferredMode, setPreferredMode] = (0, import_react107.useState)(defaultMode);
-  const mode = (0, import_react107.useMemo)(() => {
-    if (!value) return preferredMode;
+  const fixedTime = (0, import_react108.useMemo)(() => fixedTimeOverride ?? new Date(1970, 0, 1, 23, 59, 59, 999), [fixedTimeOverride]);
+  const [preferredMode, setPreferredMode] = (0, import_react108.useState)(() => {
+    if (!value) return defaultMode;
     if (DateUtils.sameTime(value, fixedTime, true, true)) {
       return "date";
     }
     return "dateTime";
-  }, [preferredMode, value, fixedTime]);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     DateTimeInput,
     {
       ...props,
       ref: forwardedRef,
-      mode,
+      mode: preferredMode,
       value,
-      onValueChange: setValue,
+      onValueChange: (value2) => {
+        if (preferredMode === "date")
+          setValue(DateUtils.withTime(value2, fixedTime));
+        else
+          setValue(DateUtils.isLastMillisecondOfDay(value2) ? new Date(value2.getTime() - 1) : new Date(value2.getTime() + 1));
+      },
       actions: [
         ...actions,
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
           IconButton,
           {
             size: "sm",
@@ -19847,7 +19991,6 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
             tooltip: preferredMode === "date" ? translation("addTime") : translation("withoutTime"),
             onClick: () => {
               const newMode = preferredMode === "date" ? "dateTime" : "date";
-              setPreferredMode((prev) => prev === "date" ? "dateTime" : "date");
               if (value) {
                 if (newMode === "date") {
                   setValue(DateUtils.withTime(value, fixedTime));
@@ -19855,8 +19998,9 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
                   setValue(DateUtils.isLastMillisecondOfDay(value) ? new Date(value.getTime() - 1) : new Date(value.getTime() + 1));
                 }
               }
+              setPreferredMode(newMode);
             },
-            children: preferredMode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_lucide_react27.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_lucide_react27.ClockFading, { className: "size-5" })
+            children: preferredMode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react28.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react28.ClockFading, { className: "size-5" })
           },
           "date-mode"
         )
@@ -19866,11 +20010,11 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
 });
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-var import_react108 = require("react");
 var import_react109 = require("react");
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime100 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput2({
+var import_react110 = require("react");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react110.forwardRef)(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -19883,11 +20027,11 @@ var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = (0, import_react109.useState)(false);
-  const generatedId = (0, import_react108.useId)();
+  const [isFocused, setIsFocused] = (0, import_react110.useState)(false);
+  const generatedId = (0, import_react109.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: (0, import_clsx37.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_clsx38.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       Input,
       {
         ...props,
@@ -19904,16 +20048,16 @@ var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: (0, import_clsx37.default)("h-14 px-4 pb-2 py-6.5", props.className)
+        className: (0, import_clsx38.default)("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -19926,9 +20070,9 @@ var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput
 });
 
 // src/components/user-interaction/input/SearchBar.tsx
-var import_lucide_react28 = require("lucide-react");
-var import_clsx38 = require("clsx");
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_clsx39 = require("clsx");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -19944,8 +20088,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { ...containerProps, className: (0, import_clsx38.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { ...containerProps, className: (0, import_clsx39.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       Input,
       {
         ...inputProps,
@@ -19953,10 +20097,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx38.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx39.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       IconButton,
       {
         ...searchButtonProps,
@@ -19965,19 +20109,19 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx38.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_lucide_react28.Search, { className: "w-full h-full" })
+        className: (0, import_clsx39.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react110 = require("react");
-var import_lucide_react29 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime102 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react110.forwardRef)(function ToggleableInput2({
+var import_react111 = require("react");
+var import_lucide_react30 = require("lucide-react");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react111.forwardRef)(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -19990,16 +20134,16 @@ var ToggleableInput = (0, import_react110.forwardRef)(function ToggleableInput2(
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = (0, import_react110.useState)(initialState !== "display");
-  const innerRef = (0, import_react110.useRef)(null);
-  (0, import_react110.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react110.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react111.useState)(initialState !== "display");
+  const innerRef = (0, import_react111.useRef)(null);
+  (0, import_react111.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react111.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: (0, import_clsx39.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: (0, import_clsx40.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       Input,
       {
         ...props,
@@ -20023,20 +20167,20 @@ var ToggleableInput = (0, import_react110.forwardRef)(function ToggleableInput2(
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: (0, import_clsx39.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.Pencil, { className: (0, import_clsx39.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: (0, import_clsx40.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.Pencil, { className: (0, import_clsx40.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_lucide_react31 = require("lucide-react");
+var import_lucide_react32 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-var import_clsx40 = __toESM(require("clsx"));
-var import_lucide_react30 = require("lucide-react");
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_lucide_react31 = require("lucide-react");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
   children,
@@ -20055,36 +20199,36 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
     "div",
     {
-      className: (0, import_clsx40.default)("group/property", className),
+      className: (0, import_clsx41.default)("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { "data-name": "property-title-text", children: name })
               ] }) }),
-              invalid && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   IconButton,
                   {
                     tooltip: translation("clearValue"),
@@ -20093,10 +20237,10 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.X, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.X, { className: "size-force-5" })
                   }
                 ),
-                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   IconButton,
                   {
                     tooltip: translation("removeProperty"),
@@ -20104,7 +20248,7 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Trash, { className: "size-force-5" })
                   }
                 )
               ] })
@@ -20117,7 +20261,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -20126,15 +20270,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Check, { size: 24 }),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react32.Check, { size: 24 }),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -20147,7 +20291,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -20166,8 +20310,8 @@ var CheckboxProperty = ({
 };
 
 // src/components/user-interaction/properties/DateProperty.tsx
-var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_lucide_react33 = require("lucide-react");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onValueChange,
@@ -20177,13 +20321,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react32.CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react33.CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         DateTimeInput,
         {
           value,
@@ -20200,8 +20344,8 @@ var DateProperty = ({
 };
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
-var import_lucide_react33 = require("lucide-react");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_lucide_react34 = require("lucide-react");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   value,
@@ -20210,18 +20354,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react33.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react34.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
             MultiSelectChipDisplay,
             {
               value,
@@ -20247,8 +20391,8 @@ var MultiSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/NumberProperty.tsx
-var import_lucide_react34 = require("lucide-react");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_lucide_react35 = require("lucide-react");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onValueChange,
@@ -20260,20 +20404,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react34.Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react35.Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               Input,
               {
                 "data-name": "property-input",
@@ -20301,7 +20445,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               "span",
               {
                 "data-name": "property-suffix",
@@ -20317,8 +20461,8 @@ var NumberProperty = ({
 };
 
 // src/components/user-interaction/properties/SelectProperty.tsx
-var import_lucide_react35 = require("lucide-react");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_lucide_react36 = require("lucide-react");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -20327,18 +20471,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react35.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react36.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
             SelectRoot,
             {
               value,
@@ -20348,7 +20492,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -20356,7 +20500,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(SelectContent, { children })
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(SelectContent, { children })
               ]
             }
           )
@@ -20367,8 +20511,8 @@ var SingleSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/TextProperty.tsx
-var import_lucide_react36 = require("lucide-react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_lucide_react37 = require("lucide-react");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -20378,13 +20522,13 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react36.Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react37.Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
         Textarea,
         {
           "data-name": "property-input",
@@ -20404,29 +20548,29 @@ var TextProperty = ({
 
 // src/components/utils/Polymorphic.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react111 = require("react");
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var PolymorphicSlot = (0, import_react111.forwardRef)(function PolymorphicSlot2({
+var import_react112 = require("react");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var PolymorphicSlot = (0, import_react112.forwardRef)(function PolymorphicSlot2({
   children,
   asChild,
   defaultComponent = "div",
   ...props
 }, ref) {
   const Component = asChild ? import_react_slot.Slot : defaultComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Component, { ...props, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Component, { ...props, ref, children });
 });
 
 // src/components/utils/Transition.tsx
-var import_react112 = require("react");
+var import_react113 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react112.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react112.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react113.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react113.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react112.useEffect)(() => {
+  (0, import_react113.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -20451,18 +20595,18 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react113 = require("react");
+var import_react114 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -20500,7 +20644,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react113.useEffect)(() => {
+  (0, import_react114.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -20509,10 +20653,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react114 = __toESM(require("react"));
+var import_react115 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react114.default.useState(false);
-  (0, import_react114.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react115.default.useState(false);
+  (0, import_react115.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -20532,11 +20676,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-var import_react115 = require("react");
+var import_react116 = require("react");
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? import_react115.useLayoutEffect : import_react115.useEffect;
+var useIsomorphicEffect = isClient ? import_react116.useLayoutEffect : import_react116.useEffect;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react115.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react116.useState)(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -20547,10 +20691,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-var import_react116 = require("react");
+var import_react117 = require("react");
 function useHandleRefs(handleRef) {
-  const refs = (0, import_react116.useRef)([]);
-  (0, import_react116.useEffect)(() => {
+  const refs = (0, import_react117.useRef)([]);
+  (0, import_react117.useEffect)(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -20563,10 +20707,10 @@ function useHandleRefs(handleRef) {
 }
 
 // src/hooks/useLogUnstableDependencies.ts
-var import_react117 = __toESM(require("react"));
+var import_react118 = __toESM(require("react"));
 function useLogUnstableDependencies(name, value) {
-  const prev = import_react117.default.useRef(null);
-  import_react117.default.useEffect(() => {
+  const prev = import_react118.default.useRef(null);
+  import_react118.default.useEffect(() => {
     if (!prev.current) {
       prev.current = value;
       return;
@@ -20588,10 +20732,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-var import_react118 = require("react");
+var import_react119 = require("react");
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = (0, import_react118.useState)(overwriteValue);
-  (0, import_react118.useEffect)(() => {
+  const [state, setState] = (0, import_react119.useState)(overwriteValue);
+  (0, import_react119.useEffect)(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -20603,29 +20747,29 @@ var useOverwritableState = (overwriteValue, onChange) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react119 = require("react");
+var import_react120 = require("react");
 var useRerender = () => {
-  return (0, import_react119.useReducer)(() => ({}), {})[1];
+  return (0, import_react120.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useUpdatingDateString.ts
-var import_react120 = require("react");
+var import_react121 = require("react");
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
   const { locale: contextLocale } = useLocale();
   const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react120.useState)({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react121.useState)({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
     relative: DateUtils.formatRelative(date, locale)
   });
-  (0, import_react120.useEffect)(() => {
+  (0, import_react121.useEffect)(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale]);
-  (0, import_react120.useEffect)(() => {
+  (0, import_react121.useEffect)(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -20661,7 +20805,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-var import_react121 = require("react");
+var import_react122 = require("react");
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -20711,7 +20855,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return (0, import_react121.useMemo)(() => ({
+  return (0, import_react122.useMemo)(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -21113,6 +21257,7 @@ var PromiseUtils = {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
+  SortingList,
   StepperBar,
   StorageListener,
   Switch,