@helpwave/hightide 0.9.2 → 0.9.4

package/dist/index.mjs

@@ -8336,6 +8336,7 @@ var hightideTranslation = {
   "de-DE": {
     "add": `Hinzuf\xFCgen`,
     "addFilter": `Filter hinzuf\xFCgen`,
+    "addSorting": `Sortierung hinzuf\xFCgen`,
     "addTime": `Uhrzeit hinzuf\xFCgen`,
     "after": `Nach`,
     "age": `Alter`,
@@ -8547,6 +8548,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sortierung`,
     "sSortingState": ({ sortDirection }) => {
       return TranslationGen.resolveSelect(sortDirection, {
@@ -8703,6 +8706,7 @@ var hightideTranslation = {
   "en-US": {
     "add": `Add`,
     "addFilter": `Add filter`,
+    "addSorting": `Add sorting`,
     "addTime": `Add Time`,
     "after": `After`,
     "age": `Age`,
@@ -8914,6 +8918,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sorting`,
     "sSortingState": ({ sortDirection }) => {
       return TranslationGen.resolveSelect(sortDirection, {
@@ -14390,40 +14396,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;
     }
@@ -14445,9 +14451,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;
@@ -14481,21 +14486,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":
@@ -14518,44 +14523,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);
     }
@@ -14577,44 +14582,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);
     }
@@ -14639,28 +14644,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;
@@ -14673,13 +14678,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":
@@ -14727,81 +14732,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");
@@ -15211,84 +15216,21 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect41, useId as useId18, useMemo as useMemo34, useRef as useRef34, useState as useState33 } from "react";
+import { useEffect as useEffect42, useId as useId18, useMemo as useMemo34, useRef as useRef34, useState as useState33 } from "react";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 
 // src/components/user-interaction/data/FilterPopUp.tsx
-import { TrashIcon, XIcon as XIcon2 } from "lucide-react";
-import { forwardRef as forwardRef23, useId as useId17, useMemo as useMemo33, useState as useState32 } from "react";
-
-// src/components/user-interaction/Checkbox.tsx
-import { Check as Check2, Minus as Minus2 } from "lucide-react";
-import { useCallback as useCallback28 } from "react";
-import { jsx as jsx62, jsxs as jsxs33 } from "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 = useCallback28((value2) => {
-    onValueChangeStable(value2);
-    onEditCompleteStable(value2);
-  }, [onValueChangeStable, onEditCompleteStable]);
-  const [value, setValue] = useControlledState({
-    value: controlledValue,
-    onValueChange: onChangeWrapper,
-    defaultValue: initialValue
-  });
-  return /* @__PURE__ */ jsxs33(
-    "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__ */ jsx62(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx62(Minus2, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsx62(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx62(Check2, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
-      ]
-    }
-  );
-};
+import { Check as Check2, TrashIcon } from "lucide-react";
+import { forwardRef as forwardRef23, useEffect as useEffect41, useId as useId17, useMemo as useMemo33, useState as useState32 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef18, useCallback as useCallback31, useEffect as useEffect35, useId as useId14, useImperativeHandle as useImperativeHandle12, useMemo as useMemo29, useRef as useRef30, useState as useState29 } from "react";
+import { forwardRef as forwardRef18, useCallback as useCallback30, useEffect as useEffect35, useId as useId14, useImperativeHandle as useImperativeHandle12, useMemo as useMemo29, useRef as useRef30, useState as useState29 } from "react";
 import { CalendarIcon } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
 import { useEffect as useEffect31, useMemo as useMemo26, useRef as useRef27 } from "react";
-import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
 var TimePicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -15381,10 +15323,10 @@ var TimePicker = ({
     setValue(newDate);
     onEditComplete?.(newDate);
   };
-  return /* @__PURE__ */ jsxs34("div", { "data-name": "time-picker-container", className, children: [
-    /* @__PURE__ */ jsx63("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
+  return /* @__PURE__ */ jsxs33("div", { "data-name": "time-picker-container", className, children: [
+    /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
       const isSelected = hour2 === value.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -15397,9 +15339,9 @@ var TimePicker = ({
         hour2
       );
     }) }),
-    /* @__PURE__ */ jsx63("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
       const isSelected = minute === closestMinute;
-      return /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -15412,9 +15354,9 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
-    /* @__PURE__ */ jsx63(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ jsx63("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
+    /* @__PURE__ */ jsx62(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
       const isSelected = second === closestSecond;
-      return /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -15427,9 +15369,9 @@ var TimePicker = ({
         second + secondIncrement
       );
     }) }) }),
-    /* @__PURE__ */ jsx63(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ jsx63("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
+    /* @__PURE__ */ jsx62(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
       const isSelected = millisecond === closestMillisecond;
-      return /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -15442,8 +15384,8 @@ var TimePicker = ({
         millisecond + millisecondIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs34("div", { "data-name": "time-picker-value-column", children: [
-      /* @__PURE__ */ jsx63(
+    !is24HourFormat && /* @__PURE__ */ jsxs33("div", { "data-name": "time-picker-value-column", children: [
+      /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -15453,7 +15395,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -15473,8 +15415,8 @@ import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown4 } from "lucid
 import clsx23 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
-import { useCallback as useCallback29, useEffect as useEffect32, useMemo as useMemo27, useRef as useRef28 } from "react";
-import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useCallback as useCallback28, useEffect as useEffect32, useMemo as useMemo27, useRef as useRef28 } from "react";
+import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
   initialDisplayedMonth,
@@ -15507,7 +15449,7 @@ var DayPicker = ({
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = useCallback29(
+  const firstDayOfMonth = useCallback28(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
@@ -15523,12 +15465,12 @@ var DayPicker = ({
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = useCallback29((date) => {
+  const clampToRange = useCallback28((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = useCallback29((candidate) => {
+  const navigateTo = useCallback28((candidate) => {
     const clamped = clampToRange(candidate);
     if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
@@ -15537,7 +15479,7 @@ var DayPicker = ({
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = useCallback29(
+  const onKeyDown = useCallback28(
     (event) => {
       PropsUtil.aria.navigate({
         left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
@@ -15548,15 +15490,15 @@ var DayPicker = ({
     },
     [focusTargetDate, navigateTo]
   );
-  return /* @__PURE__ */ jsxs35("div", { "data-name": "day-picker-container", className, children: [
-    /* @__PURE__ */ jsx64("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx64("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__ */ jsx64("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs34("div", { "data-name": "day-picker-container", className, children: [
+    /* @__PURE__ */ jsx63("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx63("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__ */ jsx63("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__ */ jsx64(
+      return /* @__PURE__ */ jsx63(
         "div",
         {
           ref: isFocused ? selectedButtonRef : void 0,
@@ -15594,9 +15536,9 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback30, useEffect as useEffect33, useMemo as useMemo28, useRef as useRef29, useState as useState26 } from "react";
+import { memo, useCallback as useCallback29, useEffect as useEffect33, useMemo as useMemo28, useRef as useRef29, useState as useState26 } from "react";
 import clsx22 from "clsx";
-import { jsx as jsx65, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
   year,
   selectedMonthIndex,
@@ -15614,22 +15556,22 @@ var YearRow = memo(function YearRow2({
     }
   }, [isSelectedYear]);
   const monthGrid = useMemo28(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs35(
     ExpandableRoot,
     {
       ref: isSelectedYear ? ref : void 0,
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ jsx65(ExpandableHeader, { className: clsx22("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
-        /* @__PURE__ */ jsx65(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-43", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx65("div", { className: "flex-row-1", children: group.map((month) => {
+        /* @__PURE__ */ jsx64(ExpandableHeader, { className: clsx22("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ jsx64(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-43", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx64("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__ */ jsx65(
+          return /* @__PURE__ */ jsx64(
             Button,
             {
               disabled: !isValid,
@@ -15684,11 +15626,11 @@ var YearMonthPicker = ({
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = useCallback30((newDate) => {
+  const handleSelect = useCallback29((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx64(
     InfiniteScroll,
     {
       itemCount: years.length,
@@ -15698,7 +15640,7 @@ var YearMonthPicker = ({
         const year = years[index];
         const isSelectedYear = value.getFullYear() === year;
         const selectedMonthIndex = isSelectedYear ? value.getMonth() : void 0;
-        return /* @__PURE__ */ jsx65(
+        return /* @__PURE__ */ jsx64(
           YearRow,
           {
             year,
@@ -15716,7 +15658,7 @@ var YearMonthPicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-import { jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs36 } from "react/jsx-runtime";
 var DatePicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -15739,9 +15681,9 @@ var DatePicker = ({
   });
   const [displayedMonth, setDisplayedMonth] = useState27(new Date(value.getFullYear(), value.getMonth(), 1));
   const [displayMode, setDisplayMode] = useState27(initialDisplay);
-  return /* @__PURE__ */ jsxs37("div", { className: clsx23("flex-col-3", className), children: [
-    /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 items-center justify-between", children: [
-      /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs36("div", { className: clsx23("flex-col-3", className), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 items-center justify-between", children: [
+      /* @__PURE__ */ jsxs36(
         Button,
         {
           size: "sm",
@@ -15752,12 +15694,12 @@ var DatePicker = ({
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ jsx66(ChevronDown4, { size: 16 })
+            /* @__PURE__ */ jsx65(ChevronDown4, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ jsx66(
+      displayMode === "day" && /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ jsx65(
           IconButton,
           {
             tooltip: translation("time.today"),
@@ -15769,10 +15711,10 @@ var DatePicker = ({
               setValue(newDate);
               setDisplayedMonth(newDate);
             },
-            children: /* @__PURE__ */ jsx66(Calendar, { className: "size-5" })
+            children: /* @__PURE__ */ jsx65(Calendar, { className: "size-5" })
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx65(
           IconButton,
           {
             tooltip: translation("time.previousMonth"),
@@ -15781,10 +15723,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx66(ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ jsx65(ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx65(
           IconButton,
           {
             tooltip: translation("time.nextMonth"),
@@ -15793,12 +15735,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx66(ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ jsx65(ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx66(
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx65(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -15815,7 +15757,7 @@ var DatePicker = ({
         },
         className: "h-60 max-h-60"
       }
-    ) : /* @__PURE__ */ jsx66(
+    ) : /* @__PURE__ */ jsx65(
       DayPicker,
       {
         ...dayPickerProps,
@@ -15834,7 +15776,7 @@ var DatePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-import { jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -15862,7 +15804,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx67(
+    dateDisplay = /* @__PURE__ */ jsx66(
       DatePicker,
       {
         ...datePickerProps,
@@ -15878,7 +15820,7 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx67(
+    timeDisplay = /* @__PURE__ */ jsx66(
       TimePicker,
       {
         ...timePickerProps,
@@ -15893,7 +15835,7 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+  return /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
     dateDisplay,
     timeDisplay
   ] });
@@ -15901,7 +15843,7 @@ var DateTimePicker = ({
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
 import { useEffect as useEffect34, useState as useState28 } from "react";
-import { Fragment as Fragment6, jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
 var DateTimePickerDialog = ({
   initialValue = null,
   value,
@@ -15932,8 +15874,8 @@ var DateTimePickerDialog = ({
   useEffect34(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
-  return /* @__PURE__ */ jsxs39(Fragment6, { children: [
-    /* @__PURE__ */ jsx68("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs38(Fragment6, { children: [
+    /* @__PURE__ */ jsx67("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ jsx67(
       "span",
       {
         id: labelId,
@@ -15941,7 +15883,7 @@ var DateTimePickerDialog = ({
         children: label ?? translation("sDateTimeSelect", { datetimeMode: mode })
       }
     ) }),
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx67(
       DateTimePicker,
       {
         ...pickerProps,
@@ -15960,8 +15902,8 @@ var DateTimePickerDialog = ({
         precision
       }
     ),
-    /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 justify-end", children: [
-      /* @__PURE__ */ jsx68(Visibility, { isVisible: allowRemove && !!state, children: /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end", children: [
+      /* @__PURE__ */ jsx67(Visibility, { isVisible: allowRemove && !!state, children: /* @__PURE__ */ jsx67(
         Button,
         {
           size: "md",
@@ -15974,7 +15916,7 @@ var DateTimePickerDialog = ({
           children: translation("clear")
         }
       ) }),
-      /* @__PURE__ */ jsx68(Visibility, { isVisible: !state, children: /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx67(Visibility, { isVisible: !state, children: /* @__PURE__ */ jsx67(
         Button,
         {
           size: "md",
@@ -15987,7 +15929,7 @@ var DateTimePickerDialog = ({
           children: translation("cancel")
         }
       ) }),
-      /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx67(
         Button,
         {
           size: "md",
@@ -16003,7 +15945,7 @@ var DateTimePickerDialog = ({
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { Fragment as Fragment7, jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
 var DateTimeInput = forwardRef18(function DateTimeInput2({
   id: inputId,
   value,
@@ -16042,16 +15984,14 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
   const [dialogValue, setDialogValue] = useState29(state);
   const [stringInputState, setStringInputState] = useState29({
     state: state ? DateUtils.toInputString(state, mode, precision) : "",
-    date: void 0
+    date: void 0,
+    mode
   });
-  useEffect35(() => {
-    setDialogValue(state);
-    setStringInputState({
-      state: state ? DateUtils.toInputString(state, mode) : "",
-      date: void 0
-    });
-  }, [mode, state]);
-  const changeOpenWrapper = useCallback31((isOpen2) => {
+  const safeInputString = useMemo29(() => {
+    if (!state) return "";
+    return stringInputState.mode !== mode ? DateUtils.toInputString(state, mode, precision) : stringInputState.state;
+  }, [stringInputState.mode, stringInputState.state, mode, state, precision]);
+  const changeOpenWrapper = useCallback30((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
@@ -16072,21 +16012,26 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
     restartTimer,
     clearTimer
   } = useDelay({ delay: 2e3, disabled: disabled || readOnly });
-  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
-    /* @__PURE__ */ jsxs40("div", { ...containerProps, className: clsx24("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsxs39(Fragment7, { children: [
+    /* @__PURE__ */ jsxs39("div", { ...containerProps, className: clsx24("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ jsx68(
         "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());
@@ -16101,7 +16046,8 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
             }
             setStringInputState({
               state: event.target.value,
-              date: isValid ? date : void 0
+              date: isValid ? date : void 0,
+              mode
             });
           },
           onBlur: (event) => {
@@ -16116,7 +16062,8 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
               }
               setStringInputState({
                 state: state ? DateUtils.toInputString(state, mode) : "",
-                date: void 0
+                date: void 0,
+                mode
               });
             }
           },
@@ -16127,9 +16074,9 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
           ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
         }
       ),
-      /* @__PURE__ */ jsxs40("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex-row-0", children: [
+      /* @__PURE__ */ jsxs39("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex-row-0", children: [
         actions,
-        /* @__PURE__ */ jsx69(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx69(
+        /* @__PURE__ */ jsx68(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx68(
           IconButton,
           {
             tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
@@ -16143,12 +16090,12 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
             "aria-haspopup": "dialog",
             "aria-expanded": isOpen,
             "aria-controls": isOpen ? ids.popup : void 0,
-            children: /* @__PURE__ */ jsx69(CalendarIcon, { className: "size-5" })
+            children: /* @__PURE__ */ jsx68(CalendarIcon, { className: "size-5" })
           }
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx68(
       PopUp,
       {
         id: ids.popup,
@@ -16167,7 +16114,7 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
         role: "dialog",
         "aria-labelledby": ids.label,
         className: "flex-col-2 p-2",
-        children: /* @__PURE__ */ jsx69(
+        children: /* @__PURE__ */ jsx68(
           DateTimePickerDialog,
           {
             value: dialogValue,
@@ -16200,7 +16147,7 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
 import { forwardRef as forwardRef22 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-import { useCallback as useCallback34, useEffect as useEffect37, useId as useId15, useMemo as useMemo32, useState as useState31 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect37, useId as useId15, useMemo as useMemo32, useState as useState31 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
 import { createContext as createContext15, useContext as useContext17 } from "react";
@@ -16213,14 +16160,14 @@ function useMultiSelectContext() {
 
 // src/components/user-interaction/MultiSelect/useMultiSelect.ts
 import {
-  useCallback as useCallback33,
+  useCallback as useCallback32,
   useEffect as useEffect36,
   useMemo as useMemo31,
   useState as useState30
 } from "react";
 
 // src/hooks/useMultiSelection.ts
-import { useCallback as useCallback32, useMemo as useMemo30 } from "react";
+import { useCallback as useCallback31, useMemo as useMemo30 } from "react";
 function useMultiSelection({
   options: optionsList,
   value,
@@ -16234,8 +16181,8 @@ function useMultiSelection({
     defaultValue: [...initialSelection],
     isControlled
   });
-  const isSelected = useCallback32((id) => selection.includes(id), [selection]);
-  const toggleSelection = useCallback32(
+  const isSelected = useCallback31((id) => selection.includes(id), [selection]);
+  const toggleSelection = useCallback31(
     (id) => {
       const option = optionsList.find((o) => o.id === id);
       if (!option || option.disabled) return;
@@ -16243,7 +16190,7 @@ function useMultiSelection({
     },
     [optionsList, setSelection]
   );
-  const setSelectionValue = useCallback32(
+  const setSelectionValue = useCallback31(
     (next) => setSelection(Array.from(next)),
     [setSelection]
   );
@@ -16287,7 +16234,7 @@ function useMultiSelect({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery,
-    toTags: useCallback33((o) => [o.label ?? ""], [])
+    toTags: useCallback32((o) => [o.label ?? ""], [])
   });
   const visibleOptionIds = useMemo31(
     () => visibleOptions.map((o) => o.id),
@@ -16306,7 +16253,7 @@ function useMultiSelect({
     options: enabledOptions,
     resetTimer: typeAheadResetMs,
     toString: (o) => o.label ?? "",
-    onResultChange: useCallback33(
+    onResultChange: useCallback32(
       (option) => {
         if (option) listNav.highlight(option.id);
       },
@@ -16317,11 +16264,11 @@ function useMultiSelect({
   useEffect36(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
-  const highlightItem = useCallback33((id) => {
+  const highlightItem = useCallback32((id) => {
     if (!enabledOptions.some((o) => o.id === id)) return;
     listNavHighlight(id);
   }, [enabledOptions, listNavHighlight]);
-  const toggleSelectionValue = useCallback33((id, newIsSelected) => {
+  const toggleSelectionValue = useCallback32((id, newIsSelected) => {
     const next = newIsSelected ?? !isSelected(id);
     if (next) {
       toggleSelection(id);
@@ -16330,7 +16277,7 @@ function useMultiSelect({
     }
     highlightItem(id);
   }, [toggleSelection, setSelection, highlightItem, isSelected, selection]);
-  const setIsOpenWrapper = useCallback33(
+  const setIsOpenWrapper = useCallback32(
     (open, behavior) => {
       setIsOpen(open);
       behavior = behavior ?? "first";
@@ -16361,7 +16308,7 @@ function useMultiSelect({
       enabledOptions
     ]
   );
-  const toggleOpenWrapper = useCallback33(
+  const toggleOpenWrapper = useCallback32(
     (behavior) => {
       setIsOpenWrapper(!isOpen, behavior);
     },
@@ -16427,7 +16374,7 @@ function useMultiSelect({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function MultiSelectRoot({
   children,
   value,
@@ -16453,7 +16400,7 @@ function MultiSelectRoot({
     listbox: "multi-select-listbox-" + generatedId,
     searchInput: "multi-select-search-" + generatedId
   });
-  const registerOption = useCallback34((item) => {
+  const registerOption = useCallback33((item) => {
     setOptions((prev) => {
       const next = prev.filter((o) => o.id !== item.id);
       next.push(item);
@@ -16462,7 +16409,7 @@ function MultiSelectRoot({
     });
     return () => setOptions((prev) => prev.filter((o) => o.id !== item.id));
   }, []);
-  const registerTrigger = useCallback34((ref) => {
+  const registerTrigger = useCallback33((ref) => {
     setTriggerRef(ref);
     return () => setTriggerRef(null);
   }, []);
@@ -16485,14 +16432,14 @@ function MultiSelectRoot({
     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 = useCallback34(
+  const onValueChangeStable = useCallback33(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onValueChange?.(values);
     },
     [idToOptionMap, onValueChange]
   );
-  const onEditCompleteStable = useCallback34(
+  const onEditCompleteStable = useCallback33(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onEditComplete?.(values);
@@ -16568,7 +16515,7 @@ function MultiSelectRoot({
     registerTrigger,
     showSearch
   ]);
-  return /* @__PURE__ */ jsx70(MultiSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx69(MultiSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx69(
     PopUpContext.Provider,
     {
       value: {
@@ -16591,7 +16538,7 @@ import { forwardRef as forwardRef20, useEffect as useEffect39, useImperativeHand
 import clsx25 from "clsx";
 import { CheckIcon as CheckIcon2 } from "lucide-react";
 import { createContext as createContext16, forwardRef as forwardRef19, useContext as useContext18, useEffect as useEffect38, useId as useId16, useRef as useRef31 } from "react";
-import { jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs40 } from "react/jsx-runtime";
 var MultiSelectOptionDisplayContext = createContext16(null);
 function useMultiSelectOptionDisplayLocation() {
   const context = useContext18(MultiSelectOptionDisplayContext);
@@ -16630,7 +16577,7 @@ var MultiSelectOption = forwardRef19(function MultiSelectOption2({
   const isHighlighted = context.highlightedId === optionId;
   const isSelected = context.selectedIds.includes(optionId);
   const isVisible = context.visibleOptionIds.includes(optionId);
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs40(
     "li",
     {
       ...props,
@@ -16663,15 +16610,15 @@ var MultiSelectOption = forwardRef19(function MultiSelectOption2({
         }
       },
       children: [
-        iconAppearanceResolved === "left" && /* @__PURE__ */ jsx71(
+        iconAppearanceResolved === "left" && /* @__PURE__ */ jsx70(
           CheckIcon2,
           {
             className: clsx25("w-4 h-4", { "opacity-0": !isSelected || disabled }),
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx71(MultiSelectOptionDisplayContext.Provider, { value: "list", children: display }),
-        iconAppearanceResolved === "right" && /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx70(MultiSelectOptionDisplayContext.Provider, { value: "list", children: display }),
+        iconAppearanceResolved === "right" && /* @__PURE__ */ jsx70(
           CheckIcon2,
           {
             className: clsx25("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -16684,7 +16631,7 @@ var MultiSelectOption = forwardRef19(function MultiSelectOption2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-import { jsx as jsx72, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
 var MultiSelectButton = forwardRef20(function MultiSelectButton2({
   id,
   placeholder,
@@ -16711,7 +16658,7 @@ var MultiSelectButton = forwardRef20(function MultiSelectButton2({
   const invalid = context.invalid;
   const hasValue = context.value.length > 0;
   const selectedOptions = context.selectedIds.map((id2) => context.idToOptionMap[id2]).filter(Boolean);
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       ...props,
@@ -16755,20 +16702,20 @@ var MultiSelectButton = forwardRef20(function MultiSelectButton2({
       "aria-expanded": context.isOpen,
       "aria-controls": context.isOpen ? context.config.ids.content : void 0,
       children: [
-        /* @__PURE__ */ jsx72(MultiSelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(context.value) ?? /* @__PURE__ */ jsx72("div", { className: "flex flex-wrap gap-x-1 gap-y-2", children: selectedOptions.map((opt, index) => /* @__PURE__ */ jsxs42("span", { children: [
+        /* @__PURE__ */ jsx71(MultiSelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(context.value) ?? /* @__PURE__ */ jsx71("div", { className: "flex flex-wrap gap-x-1 gap-y-2", children: selectedOptions.map((opt, index) => /* @__PURE__ */ jsxs41("span", { children: [
           opt.display,
-          index < selectedOptions.length - 1 && /* @__PURE__ */ jsx72("span", { children: "," })
+          index < selectedOptions.length - 1 && /* @__PURE__ */ jsx71("span", { children: "," })
         ] }, opt.id)) }) : placeholder ?? translation("clickToSelect") }),
-        !hideExpansionIcon && /* @__PURE__ */ jsx72(ExpansionIcon, { isExpanded: context.isOpen })
+        !hideExpansionIcon && /* @__PURE__ */ jsx71(ExpansionIcon, { isExpanded: context.isOpen })
       ]
     }
   );
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-import { forwardRef as forwardRef21, useCallback as useCallback35, useEffect as useEffect40, useImperativeHandle as useImperativeHandle14, useRef as useRef33 } from "react";
+import { forwardRef as forwardRef21, useCallback as useCallback34, useEffect as useEffect40, useImperativeHandle as useImperativeHandle14, useRef as useRef33 } from "react";
 import clsx26 from "clsx";
-import { jsx as jsx73, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs42 } from "react/jsx-runtime";
 var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
   const innerRef = useRef33(null);
@@ -16782,7 +16729,7 @@ var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = useCallback35(
+  const keyHandler = useCallback34(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -16819,7 +16766,7 @@ var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options
     },
     [showSearch, handleTypeaheadKey, toggleSelection, highlightedId, highlightNext, highlightPrevious, highlightFirst, highlightLast]
   );
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs42(
     PopUp,
     {
       ...props,
@@ -16835,7 +16782,7 @@ var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options
       "aria-labelledby": context.config.ids.trigger,
       className: clsx26("gap-y-1", props.className),
       children: [
-        showSearch && /* @__PURE__ */ jsx73(
+        showSearch && /* @__PURE__ */ jsx72(
           Input,
           {
             ...searchInputProps,
@@ -16854,7 +16801,7 @@ var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options
             className: clsx26("mx-2 mt-2 shrink-0", searchInputProps?.className)
           }
         ),
-        /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs42(
           "ul",
           {
             ref: innerRef,
@@ -16869,7 +16816,7 @@ var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options
             className: clsx26("flex-col-1 p-2 overflow-auto"),
             children: [
               props.children,
-              /* @__PURE__ */ jsx73(Visibility, { isVisible: showSearch, children: /* @__PURE__ */ jsx73(
+              /* @__PURE__ */ jsx72(Visibility, { isVisible: showSearch, children: /* @__PURE__ */ jsx72(
                 "li",
                 {
                   role: "option",
@@ -16895,12 +16842,12 @@ var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
-import { jsx as jsx74, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs43 } from "react/jsx-runtime";
 var MultiSelect = forwardRef22(
   function MultiSelect2({ children, contentPanelProps, buttonProps, ...props }, ref) {
-    return /* @__PURE__ */ jsxs44(MultiSelectRoot, { ...props, children: [
-      /* @__PURE__ */ jsx74(MultiSelectButton, { ref, ...buttonProps }),
-      /* @__PURE__ */ jsx74(MultiSelectContent, { ...contentPanelProps, children })
+    return /* @__PURE__ */ jsxs43(MultiSelectRoot, { ...props, children: [
+      /* @__PURE__ */ jsx73(MultiSelectButton, { ref, ...buttonProps }),
+      /* @__PURE__ */ jsx73(MultiSelectContent, { ...contentPanelProps, children })
     ] });
   }
 );
@@ -16909,19 +16856,19 @@ var MultiSelect = forwardRef22(
 import clsx27 from "clsx";
 
 // src/components/user-interaction/data/FilterOperatorLabel.tsx
-import { jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsxs as jsxs44 } from "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__ */ jsxs45("div", { className: "flex-row-1 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs44("div", { className: "flex-row-1 items-center gap-2", children: [
     icon,
     label
   ] });
 };
 
 // src/components/user-interaction/data/FilterPopUp.tsx
-import { jsx as jsx75, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs45 } from "react/jsx-runtime";
 var FilterBasePopUp = forwardRef23(function FilterBasePopUp2({
   children,
   name,
@@ -16929,21 +16876,31 @@ var FilterBasePopUp = forwardRef23(function FilterBasePopUp2({
   onOperatorChange,
   onRemove,
   allowedOperators,
+  operatorOverrides,
   noParameterRequired = false,
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs46(
+  const operators = useMemo33(() => {
+    if (!operatorOverrides || operatorOverrides.length === 0) return allowedOperators;
+    return allowedOperators.filter((op) => operatorOverrides.includes(op));
+  }, [allowedOperators, operatorOverrides]);
+  useEffect41(() => {
+    if (operators.length === 0) {
+      onRemove();
+    }
+  }, [operators, onRemove]);
+  return /* @__PURE__ */ jsxs45(
     PopUp,
     {
       ref,
       ...props,
       className: clsx27("flex-col-3 p-3 relative min-w-64", props.className),
       children: [
-        /* @__PURE__ */ jsxs46("div", { className: "flex-row-4 justify-between w-full", children: [
-          /* @__PURE__ */ jsxs46("div", { className: "flex-row-0.5 items-center", children: [
-            /* @__PURE__ */ jsx75("span", { className: "typography-label-sm text-description", children: name ?? translation("filter") }),
-            /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsxs45("div", { className: "flex-row-4 justify-between w-full", children: [
+          /* @__PURE__ */ jsxs45("div", { className: "flex-row-0.5 items-center", children: [
+            /* @__PURE__ */ jsx74("span", { className: "typography-label-sm text-description", children: name ?? translation("filter") }),
+            /* @__PURE__ */ jsx74(
               Select,
               {
                 value: operator,
@@ -16954,12 +16911,12 @@ var FilterBasePopUp = forwardRef23(function FilterBasePopUp2({
                   "selectedDisplay": (option) => option ? translation(FilterOperatorUtils.getInfo(option.value).translationKey) : ""
                 },
                 iconAppearance: "right",
-                children: allowedOperators.map((op) => /* @__PURE__ */ jsx75(SelectOption, { value: op, label: translation(FilterOperatorUtils.getInfo(op).translationKey), children: /* @__PURE__ */ jsx75(FilterOperatorLabel, { operator: op }) }, op))
+                children: operators.map((op) => /* @__PURE__ */ jsx74(SelectOption, { value: op, label: translation(FilterOperatorUtils.getInfo(op).translationKey), children: /* @__PURE__ */ jsx74(FilterOperatorLabel, { operator: op }) }, op))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs46("div", { className: "flex-row-0 items-center", children: [
-            /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsxs45("div", { className: "flex-row-0 items-center", children: [
+            /* @__PURE__ */ jsx74(
               IconButton,
               {
                 tooltip: translation("removeFilter"),
@@ -16967,24 +16924,24 @@ var FilterBasePopUp = forwardRef23(function FilterBasePopUp2({
                 color: "negative",
                 coloringStyle: "text",
                 size: "sm",
-                children: /* @__PURE__ */ jsx75(TrashIcon, { className: "size-4" })
+                children: /* @__PURE__ */ jsx74(TrashIcon, { className: "size-4" })
               }
             ),
-            /* @__PURE__ */ jsx75(
+            /* @__PURE__ */ jsx74(
               IconButton,
               {
-                tooltip: translation("close"),
+                tooltip: translation("done"),
                 onClick: props.onClose,
                 color: "neutral",
                 coloringStyle: "text",
                 size: "sm",
-                children: /* @__PURE__ */ jsx75(XIcon2, { className: "size-4" })
+                children: /* @__PURE__ */ jsx74(Check2, { className: "size-4" })
               }
             )
           ] })
         ] }),
         children,
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: noParameterRequired, children: /* @__PURE__ */ jsx75("div", { className: "flex-row-0 items-center text-sm text-description h-element-sm", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: noParameterRequired, children: /* @__PURE__ */ jsx74("div", { className: "flex-row-0 items-center text-sm text-description h-element-sm", children: translation("noParameterRequired") }) })
       ]
     }
   );
@@ -17011,7 +16968,7 @@ var TextFilterPopUp = forwardRef23(function TextFilterPopUp2({
   }, [value]);
   const parameter = value?.parameter ?? {};
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx74(
     FilterBasePopUp,
     {
       ref,
@@ -17022,44 +16979,25 @@ var TextFilterPopUp = forwardRef23(function TextFilterPopUp2({
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.text,
       noParameterRequired: !needsParameterInput,
-      children: /* @__PURE__ */ jsxs46(Visibility, { isVisible: needsParameterInput, children: [
-        /* @__PURE__ */ jsxs46("div", { className: "flex-col-1", children: [
-          /* @__PURE__ */ jsx75("label", { htmlFor: ids.search, className: "typography-label-md", children: translation("search") }),
-          /* @__PURE__ */ jsx75(
-            Input,
-            {
-              id: ids.search,
-              value: parameter.searchText ?? "",
-              placeholder: translation("value"),
-              onValueChange: (searchText) => {
-                onValueChange({
-                  dataType: "text",
-                  operator,
-                  parameter: { ...parameter, searchText }
-                });
-              },
-              className: "min-w-64"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs46("div", { className: "flex-row-2 items-center mt-1", children: [
-          /* @__PURE__ */ jsx75(
-            Checkbox,
-            {
-              id: ids.caseSensitive,
-              value: parameter.isCaseSensitive ?? false,
-              onValueChange: (isCaseSensitive) => {
-                onValueChange({
-                  dataType: "text",
-                  operator,
-                  parameter: { ...parameter, isCaseSensitive }
-                });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx75("label", { htmlFor: ids.caseSensitive, children: translation("caseSensitive") })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsx74(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsxs45("div", { className: "flex-col-1", children: [
+        /* @__PURE__ */ jsx74("label", { htmlFor: ids.search, className: "typography-label-md", children: translation("search") }),
+        /* @__PURE__ */ jsx74(
+          Input,
+          {
+            id: ids.search,
+            value: parameter.stringValue ?? "",
+            placeholder: translation("value"),
+            onValueChange: (searchText) => {
+              onValueChange({
+                dataType: "text",
+                operator,
+                parameter: { ...parameter, stringValue: searchText }
+              });
+            },
+            className: "min-w-64"
+          }
+        )
+      ] }) })
     }
   );
 });
@@ -17087,7 +17025,7 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
   const parameter = value?.parameter ?? {};
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs45(
     FilterBasePopUp,
     {
       ref,
@@ -17101,14 +17039,14 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
       allowedOperators: FilterOperatorUtils.operatorsByCategory.number,
       noParameterRequired: !needsParameterInput,
       children: [
-        /* @__PURE__ */ jsxs46(Visibility, { isVisible: needsRangeInput, children: [
-          /* @__PURE__ */ jsxs46("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ jsx75("label", { htmlFor: ids.min, className: "typography-label-md", children: translation("min") }),
-            /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsxs45(Visibility, { isVisible: needsRangeInput, children: [
+          /* @__PURE__ */ jsxs45("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ jsx74("label", { htmlFor: ids.min, className: "typography-label-md", children: translation("min") }),
+            /* @__PURE__ */ jsx74(
               Input,
               {
                 id: ids.min,
-                value: parameter.minNumber?.toString() ?? "",
+                value: parameter.numberMin?.toString() ?? "",
                 type: "number",
                 placeholder: "0",
                 onValueChange: (text) => {
@@ -17116,20 +17054,20 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
                   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__ */ jsxs46("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ jsx75("label", { htmlFor: ids.max, className: "typography-label-md", children: translation("max") }),
-            /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsxs45("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ jsx74("label", { htmlFor: ids.max, className: "typography-label-md", children: translation("max") }),
+            /* @__PURE__ */ jsx74(
               Input,
               {
                 id: ids.max,
-                value: parameter.maxNumber?.toString() ?? "",
+                value: parameter.numberMax?.toString() ?? "",
                 type: "number",
                 placeholder: "1",
                 onValueChange: (text) => {
@@ -17137,7 +17075,7 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
                   onValueChange({
                     dataType: "number",
                     operator,
-                    parameter: { ...parameter, maxNumber: isNaN(num) ? void 0 : num }
+                    parameter: { ...parameter, numberMax: isNaN(num) ? void 0 : num }
                   });
                 },
                 className: "min-w-64"
@@ -17145,10 +17083,10 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx74(
           Input,
           {
-            value: parameter.compareValue?.toString() ?? "",
+            value: parameter.numberValue?.toString() ?? "",
             type: "number",
             placeholder: "0",
             onValueChange: (text) => {
@@ -17156,7 +17094,7 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
               onValueChange({
                 dataType: "number",
                 operator,
-                parameter: { ...parameter, compareValue: isNaN(num) ? void 0 : num }
+                parameter: { ...parameter, numberValue: isNaN(num) ? void 0 : num }
               });
             },
             className: "min-w-64"
@@ -17192,7 +17130,7 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
   const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState32(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs45(
     FilterBasePopUp,
     {
       ref,
@@ -17204,36 +17142,36 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
       allowedOperators: FilterOperatorUtils.operatorsByCategory.date,
       noParameterRequired: !needsParameterInput,
       children: [
-        /* @__PURE__ */ jsxs46(Visibility, { isVisible: needsRangeInput, children: [
-          /* @__PURE__ */ jsxs46("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ jsx75("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
-            /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsxs45(Visibility, { isVisible: needsRangeInput, children: [
+          /* @__PURE__ */ jsxs45("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ jsx74("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
+            /* @__PURE__ */ jsx74(
               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);
@@ -17244,35 +17182,35 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs46("div", { className: "flex-col-1", children: [
-            /* @__PURE__ */ jsx75("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
-            /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsxs45("div", { className: "flex-col-1", children: [
+            /* @__PURE__ */ jsx74("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
+            /* @__PURE__ */ jsx74(
               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);
@@ -17284,17 +17222,17 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs46(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
-          /* @__PURE__ */ jsx75("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
-          /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsxs45(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+          /* @__PURE__ */ jsx74("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+          /* @__PURE__ */ jsx74(
             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,
@@ -17303,7 +17241,7 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx75("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx74("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
@@ -17334,7 +17272,7 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
   const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState32(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs45(
     FilterBasePopUp,
     {
       ref,
@@ -17345,37 +17283,37 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.dateTime,
       children: [
-        /* @__PURE__ */ jsx75("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs46("div", { className: "flex-col-2 gap-2", children: [
-          /* @__PURE__ */ jsx75("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
-          /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx74("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs45("div", { className: "flex-col-2 gap-2", children: [
+          /* @__PURE__ */ jsx74("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
+          /* @__PURE__ */ jsx74(
             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);
@@ -17385,35 +17323,35 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
               className: "min-w-64"
             }
           ),
-          /* @__PURE__ */ jsx75("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
-          /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsx74("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
+          /* @__PURE__ */ jsx74(
             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);
@@ -17424,19 +17362,19 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs46(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
-          /* @__PURE__ */ jsx75("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
-          /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsxs45(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+          /* @__PURE__ */ jsx74("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+          /* @__PURE__ */ jsx74(
             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,
@@ -17445,7 +17383,7 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx75("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx74("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
@@ -17465,7 +17403,7 @@ var BooleanFilterPopUp = forwardRef23(function BooleanFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx74(
     FilterBasePopUp,
     {
       ref,
@@ -17495,12 +17433,12 @@ var TagsFilterPopUp = forwardRef23(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__ */ jsxs46(
+  return /* @__PURE__ */ jsxs45(
     FilterBasePopUp,
     {
       ref,
@@ -17511,8 +17449,8 @@ var TagsFilterPopUp = forwardRef23(function TagsFilterPopUp2({
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.multiTags,
       children: [
-        /* @__PURE__ */ jsx75("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx74("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsx74(
           MultiSelect,
           {
             value: selectedTags,
@@ -17520,14 +17458,14 @@ var TagsFilterPopUp = forwardRef23(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__ */ jsx75(MultiSelectOption, { value: tag, label, children: label }, tag))
+            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ jsx74(MultiSelectOption, { value: tag, label, children: label }, tag))
           }
         ) }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx75("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx74("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
@@ -17549,14 +17487,14 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
     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__ */ jsxs46(
+  return /* @__PURE__ */ jsxs45(
     FilterBasePopUp,
     {
       ref,
@@ -17567,8 +17505,8 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.singleTag,
       children: [
-        /* @__PURE__ */ jsx75("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx74("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ jsx74(
           MultiSelect,
           {
             value: selectedTagsMulti,
@@ -17576,14 +17514,14 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
               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__ */ jsx75(MultiSelectOption, { value: tag, label }, tag))
+            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ jsx74(MultiSelectOption, { value: tag, label }, tag))
           }
         ) }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: needsParameterInput && !needsMultiSelect, children: /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: needsParameterInput && !needsMultiSelect, children: /* @__PURE__ */ jsx74(
           Select,
           {
             value: selectedTagSingle,
@@ -17591,14 +17529,14 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
               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__ */ jsx75(SelectOption, { value: tag, label }, tag))
+            children: availableTags.map(({ tag, label }) => /* @__PURE__ */ jsx74(SelectOption, { value: tag, label }, tag))
           }
         ) }),
-        /* @__PURE__ */ jsx75(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx75("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+        /* @__PURE__ */ jsx74(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx74("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
       ]
     }
   );
@@ -17611,7 +17549,7 @@ var GenericFilterPopUp = forwardRef23(function GenericFilterPopUp2({ name, value
     }
     return suggestion;
   }, [value]);
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx74(
     FilterBasePopUp,
     {
       ref,
@@ -17634,26 +17572,26 @@ var FilterPopUp = forwardRef23(function FilterPopUp2({
 }, ref) {
   switch (dataType) {
     case "text":
-      return /* @__PURE__ */ jsx75(TextFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ jsx74(TextFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "number":
-      return /* @__PURE__ */ jsx75(NumberFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ jsx74(NumberFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "date":
-      return /* @__PURE__ */ jsx75(DateFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ jsx74(DateFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "dateTime":
-      return /* @__PURE__ */ jsx75(DatetimeFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ jsx74(DatetimeFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "boolean":
-      return /* @__PURE__ */ jsx75(BooleanFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ jsx74(BooleanFilterPopUp, { ref, name, value, onValueChange, ...props });
     case "multiTags":
-      return /* @__PURE__ */ jsx75(TagsFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
+      return /* @__PURE__ */ jsx74(TagsFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
     case "singleTag":
-      return /* @__PURE__ */ jsx75(TagsSingleFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
+      return /* @__PURE__ */ jsx74(TagsSingleFilterPopUp, { ref, name, value, onValueChange, tags, ...props });
     case "unknownType":
-      return /* @__PURE__ */ jsx75(GenericFilterPopUp, { ref, name, value, onValueChange, ...props });
+      return /* @__PURE__ */ jsx74(GenericFilterPopUp, { ref, name, value, onValueChange, ...props });
   }
 });
 
 // src/components/layout/table/TableFilterButton.tsx
-import { Fragment as Fragment8, jsx as jsx76, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx75, jsxs as jsxs46 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   header
@@ -17672,7 +17610,7 @@ var TableFilterButton = ({
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  useEffect41(() => {
+  useEffect42(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -17680,8 +17618,8 @@ var TableFilterButton = ({
   if (isTagsFilter && !hasTagsMetaData) {
     return null;
   }
-  return /* @__PURE__ */ jsxs47(Fragment8, { children: [
-    /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs46(Fragment8, { children: [
+    /* @__PURE__ */ jsxs46(
       IconButton,
       {
         ref: anchorRef,
@@ -17697,12 +17635,12 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "relative",
         children: [
-          /* @__PURE__ */ jsx76(FilterIcon, { className: "size-4" }),
-          /* @__PURE__ */ jsx76(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ jsx76("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
+          /* @__PURE__ */ jsx75(FilterIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx75(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ jsx75("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx75(
       FilterPopUp,
       {
         ref: containerRef,
@@ -17733,11 +17671,11 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback36, useEffect as useEffect42 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect43 } from "react";
 
 // src/components/user-interaction/data/data-types.tsx
 import { Binary, Calendar as Calendar2, CalendarClock, Check as Check3, Database, Tag, Tags, TextIcon } from "lucide-react";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var dataTypes = [
   "text",
   "number",
@@ -17770,21 +17708,21 @@ var getDefaultValue = (type, selectOptions) => {
 function toIcon(type) {
   switch (type) {
     case "text":
-      return /* @__PURE__ */ jsx77(TextIcon, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(TextIcon, { className: "size-4" });
     case "number":
-      return /* @__PURE__ */ jsx77(Binary, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(Binary, { className: "size-4" });
     case "boolean":
-      return /* @__PURE__ */ jsx77(Check3, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(Check3, { className: "size-4" });
     case "date":
-      return /* @__PURE__ */ jsx77(Calendar2, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(Calendar2, { className: "size-4" });
     case "dateTime":
-      return /* @__PURE__ */ jsx77(CalendarClock, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(CalendarClock, { className: "size-4" });
     case "singleTag":
-      return /* @__PURE__ */ jsx77(Tag, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(Tag, { className: "size-4" });
     case "multiTags":
-      return /* @__PURE__ */ jsx77(Tags, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(Tags, { className: "size-4" });
     case "unknownType":
-      return /* @__PURE__ */ jsx77(Database, { className: "size-4" });
+      return /* @__PURE__ */ jsx76(Database, { className: "size-4" });
   }
 }
 var DataTypeUtils = {
@@ -17794,10 +17732,10 @@ var DataTypeUtils = {
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { Fragment as Fragment9, jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx77, jsxs as jsxs47 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = useCallback36((e) => {
+  const handleResizeMove = useCallback35((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);
@@ -17813,7 +17751,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = useCallback36(() => {
+  const handleResizeEnd = useCallback35(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -17831,7 +17769,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  useEffect42(() => {
+  useEffect43(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -17839,8 +17777,8 @@ var TableHeader = ({ isSticky = false }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ jsxs48(Fragment9, { children: [
-    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx78(TableStateContext.Consumer, { children: ({ sizeVars }) => /* @__PURE__ */ jsx78("colgroup", { style: sizeVars, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsxs47(Fragment9, { children: [
+    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx77(TableStateContext.Consumer, { children: ({ sizeVars }) => /* @__PURE__ */ jsx77("colgroup", { style: sizeVars, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx77(
       "col",
       {
         style: {
@@ -17851,8 +17789,8 @@ var TableHeader = ({ isSticky = false }) => {
       },
       header.id
     )) }) }, headerGroup.id)),
-    /* @__PURE__ */ jsx78("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx78("tr", { "data-name": "table-header-row", className: clsx28(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ jsxs48(
+    /* @__PURE__ */ jsx77("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx77("tr", { "data-name": "table-header-row", className: clsx28(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ jsxs47(
         "th",
         {
           colSpan: header.colSpan,
@@ -17860,8 +17798,8 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: clsx28("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs48("div", { className: "flex-row-1 items-center", children: [
-              /* @__PURE__ */ jsx78(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx77(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs47("div", { className: "flex-row-1 items-center truncate", children: [
+              /* @__PURE__ */ jsx77(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx77(
                 TableSortButton,
                 {
                   sortDirection: header.column.getIsSorted(),
@@ -17887,7 +17825,7 @@ var TableHeader = ({ isSticky = false }) => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsx78(Visibility, { isVisible: header.column.getCanFilter() && DataTypeUtils.types.includes(header.column.columnDef.filterFn), children: /* @__PURE__ */ jsx78(
+              /* @__PURE__ */ jsx77(Visibility, { isVisible: header.column.getCanFilter() && DataTypeUtils.types.includes(header.column.columnDef.filterFn), children: /* @__PURE__ */ jsx77(
                 TableFilterButton,
                 {
                   header,
@@ -17899,7 +17837,7 @@ var TableHeader = ({ isSticky = false }) => {
                 header.getContext()
               )
             ] }) }),
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx77(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx77(
               "div",
               {
                 onPointerDown: (e) => {
@@ -17930,7 +17868,7 @@ var TableHeader = ({ isSticky = false }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-import { jsx as jsx79, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
 var TableDisplay = ({
   children,
   containerProps,
@@ -17939,7 +17877,7 @@ var TableDisplay = ({
 }) => {
   const { table } = useTableStateContext();
   const { containerRef } = useTableContainerContext();
-  return /* @__PURE__ */ jsx79("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsx78("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ jsxs48(
     "table",
     {
       ...props,
@@ -17950,8 +17888,8 @@ var TableDisplay = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx79(TableHeader, { ...tableHeaderProps }),
-        /* @__PURE__ */ jsx79(TableBody, {})
+        /* @__PURE__ */ jsx78(TableHeader, { ...tableHeaderProps }),
+        /* @__PURE__ */ jsx78(TableBody, {})
       ]
     }
   ) });
@@ -17959,10 +17897,10 @@ var TableDisplay = ({
 
 // src/components/layout/table/TablePagination.tsx
 import clsx29 from "clsx";
-import { jsx as jsx80, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs49 } from "react/jsx-runtime";
 var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx79(
     Pagination,
     {
       ...props,
@@ -17982,23 +17920,86 @@ var TablePageSizeSelect = ({
 }) => {
   const { table } = useTableStateWithoutSizingContext();
   const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx79(
     Select,
     {
       ...props,
       value: currentPageSize.toString(),
       onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx80(SelectOption, { value: size.toString(), label: size.toString() }, size))
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx79(SelectOption, { value: size.toString(), label: size.toString() }, size))
     }
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ jsxs50("div", { ...props, className: clsx29("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
-    /* @__PURE__ */ jsx80(TablePaginationMenu, {}),
-    /* @__PURE__ */ jsx80(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx80(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
+  return /* @__PURE__ */ jsxs49("div", { ...props, className: clsx29("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+    /* @__PURE__ */ jsx79(TablePaginationMenu, {}),
+    /* @__PURE__ */ jsx79(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx79(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
   ] });
 };
 
+// src/components/user-interaction/Checkbox.tsx
+import { Check as Check4, Minus as Minus2 } from "lucide-react";
+import { useCallback as useCallback36 } from "react";
+import { jsx as jsx80, jsxs as jsxs50 } from "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 = useCallback36((value2) => {
+    onValueChangeStable(value2);
+    onEditCompleteStable(value2);
+  }, [onValueChangeStable, onEditCompleteStable]);
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange: onChangeWrapper,
+    defaultValue: initialValue
+  });
+  return /* @__PURE__ */ jsxs50(
+    "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__ */ jsx80(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx80(Minus2, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx80(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx80(Check4, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
+      ]
+    }
+  );
+};
+
 // src/components/layout/table/TableWithSelectionProvider.tsx
 import { useCallback as useCallback37, useMemo as useMemo35 } from "react";
 import { jsx as jsx81 } from "react/jsx-runtime";
@@ -18116,7 +18117,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect43, useMemo as useMemo36, useState as useState34 } from "react";
+import { memo as memo2, useEffect as useEffect44, useMemo as useMemo36, useState as useState34 } from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -18132,7 +18133,7 @@ var TableColumnComponent = ({
     ...props,
     filterFn
   });
-  useEffect43(() => {
+  useEffect44(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -18153,7 +18154,7 @@ var TableColumn = (props) => {
 
 // src/components/layout/table/TableColumnSwitcher.tsx
 import { useMemo as useMemo37, useRef as useRef35, useId as useId19 } from "react";
-import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
+import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, Columns3Cog } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx84, jsxs as jsxs52 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
@@ -18164,6 +18165,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;
@@ -18368,7 +18371,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
             ] }) }),
             /* @__PURE__ */ jsx84("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
             /* @__PURE__ */ jsxs52(Fragment10, { children: [
-              /* @__PURE__ */ jsx84(
+              /* @__PURE__ */ jsx84(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx84(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -18380,8 +18383,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
                   children: isVisible ? /* @__PURE__ */ jsx84(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx84(EyeOff, { className: "size-4" })
                 }
-              ),
-              /* @__PURE__ */ jsx84(
+              ) }),
+              /* @__PURE__ */ jsx84(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ jsx84(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -18399,7 +18402,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
                   children: !isPinned ? /* @__PURE__ */ jsx84(PinOff, { className: "size-4" }) : /* @__PURE__ */ jsx84(Pin, { className: "size-4" })
                 }
-              )
+              ) })
             ] })
           ] }, columnId);
         }) })
@@ -18417,7 +18420,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ jsx84(ArrowLeftRightIcon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx84(Columns3Cog, { className: "size-5" })
       }
     ) }),
     /* @__PURE__ */ jsx84(TableColumnSwitcherPopUp, { ...props })
@@ -18674,7 +18677,7 @@ var ComboboxInput = forwardRef24(
 );
 
 // src/components/user-interaction/Combobox/ComboboxList.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect44, useRef as useRef36 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect45, useRef as useRef36 } from "react";
 import clsx31 from "clsx";
 import { jsx as jsx87, jsxs as jsxs53 } from "react/jsx-runtime";
 var ComboboxList = forwardRef25(
@@ -18684,7 +18687,7 @@ var ComboboxList = forwardRef25(
     const { layout } = context;
     const { registerList } = layout;
     const innerRef = useRef36(null);
-    useEffect44(() => {
+    useEffect45(() => {
       return registerList(innerRef);
     }, [registerList]);
     const setRefs = (node) => {
@@ -18751,7 +18754,7 @@ var Combobox = forwardRef26(function Combobox2({
 });
 
 // src/components/user-interaction/Combobox/ComboboxOption.tsx
-import { forwardRef as forwardRef27, useEffect as useEffect45, useId as useId21, useRef as useRef37 } from "react";
+import { forwardRef as forwardRef27, useEffect as useEffect46, useId as useId21, useRef as useRef37 } from "react";
 import clsx32 from "clsx";
 import { jsx as jsx89 } from "react/jsx-runtime";
 var ComboboxOption = forwardRef27(function ComboboxOption2({
@@ -18769,7 +18772,7 @@ var ComboboxOption = forwardRef27(function ComboboxOption2({
   const generatedId = useId21();
   const optionId = idProp ?? `combobox-option-${generatedId}`;
   const resolvedDisplay = children ?? label;
-  useEffect45(() => {
+  useEffect46(() => {
     return registerOption({
       id: optionId,
       value,
@@ -18779,7 +18782,7 @@ var ComboboxOption = forwardRef27(function ComboboxOption2({
       ref: itemRef
     });
   }, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (context.highlightedId === optionId) {
       itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
     }
@@ -18954,8 +18957,8 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef28, useEffect as useEffect46, useImperativeHandle as useImperativeHandle15, useRef as useRef39 } from "react";
-import { XIcon as XIcon3, Plus } from "lucide-react";
+import { forwardRef as forwardRef28, useEffect as useEffect47, useImperativeHandle as useImperativeHandle15, useRef as useRef39 } from "react";
+import { XIcon as XIcon2, Plus } from "lucide-react";
 import { jsx as jsx92, jsxs as jsxs57 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef28(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
   const translation = useHightideTranslation();
@@ -18963,12 +18966,12 @@ var MultiSelectChipDisplayButton = forwardRef28(function MultiSelectChipDisplayB
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  useEffect46(() => {
+  useEffect47(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
   const innerRef = useRef39(null);
   useImperativeHandle15(ref, () => innerRef.current);
-  useEffect46(() => {
+  useEffect47(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -19006,7 +19009,7 @@ var MultiSelectChipDisplayButton = forwardRef28(function MultiSelectChipDisplayB
               color: "negative",
               coloringStyle: "text",
               className: "flex-row-0 items-center size-7 p-1",
-              children: /* @__PURE__ */ jsx92(XIcon3, { className: "size-5" })
+              children: /* @__PURE__ */ jsx92(XIcon2, { className: "size-5" })
             }
           )
         ] }, opt.id)),
@@ -19058,7 +19061,7 @@ var MultiSelectChipDisplay = forwardRef28(
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback42, useEffect as useEffect47, useState as useState38 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect48, useState as useState38 } from "react";
 import clsx35 from "clsx";
 import { jsx as jsx93, jsxs as jsxs58 } from "react/jsx-runtime";
 var up = 1;
@@ -19178,7 +19181,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect47(() => {
+  useEffect48(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -19402,7 +19405,7 @@ var TextareaWithHeadline = ({
 // src/components/user-interaction/data/FilterList.tsx
 import { useMemo as useMemo40, useState as useState39 } from "react";
 import { PlusIcon } from "lucide-react";
-import { jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
@@ -19426,9 +19429,9 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ jsxs60("div", { className: "flex-row-1 flex-wrap gap-y-1", children: [
+  return /* @__PURE__ */ jsxs60("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
     /* @__PURE__ */ jsxs60(PopUpRoot, { children: [
-      /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "md", children: [
+      /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
         /* @__PURE__ */ jsx96(PlusIcon, { className: "size-4" })
       ] }) }),
@@ -19477,10 +19480,10 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props, isOpen }) => /* @__PURE__ */ jsxs60(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__ */ jsx96(ExpansionIcon, { isExpanded: isOpen })
-            ] }) }),
+            /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx96(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
+              /* @__PURE__ */ jsx96("span", { className: "font-bold", children: item.label }),
+              filterValueToLabel(columnFilter.value, { tags: item.tags })
+            ] }) }) }),
             /* @__PURE__ */ jsx96(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
@@ -19488,11 +19491,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__ */ jsx96(
               FilterPopUp,
               {
@@ -19500,6 +19504,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 });
                 },
@@ -19518,8 +19523,142 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
   ] });
 };
 
+// src/components/user-interaction/data/SortingList.tsx
+import { useMemo as useMemo41 } from "react";
+import { ArrowDownWideNarrow, ArrowUpNarrowWide, PlusIcon as PlusIcon2, TrashIcon as TrashIcon2, XIcon as XIcon3 } from "lucide-react";
+import clsx37 from "clsx";
+import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
+var SortingList = ({ sorting, onSortingChange, availableItems }) => {
+  const translation = useHightideTranslation();
+  const activeIds = useMemo41(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = useMemo41(
+    () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
+    [availableItems, activeIds]
+  );
+  const itemRecord = useMemo41(
+    () => 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__ */ jsxs61("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ jsxs61(PopUpRoot, { children: [
+      /* @__PURE__ */ jsx97(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs61(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+        translation("addSorting"),
+        /* @__PURE__ */ jsx97(PlusIcon2, { className: "size-4" })
+      ] }) }),
+      /* @__PURE__ */ jsx97(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx97(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx97(
+        Combobox,
+        {
+          onItemClick: (id) => {
+            const item = itemRecord[id];
+            if (!item) return;
+            onSortingChange([...sorting, { id: item.id, desc: false }]);
+            setIsOpen(false);
+          },
+          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs61(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__ */ jsxs61(PopUpRoot, { children: [
+        /* @__PURE__ */ jsx97(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs61(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ jsx97("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ jsx97(ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ jsx97(ArrowUpNarrowWide, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ jsx97(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsxs61(
+          PopUp,
+          {
+            className: clsx37("flex-col-3 p-3 min-w-64"),
+            onClose: () => setIsOpen(false),
+            children: [
+              /* @__PURE__ */ jsxs61("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ jsx97("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ jsxs61("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ jsx97(
+                    IconButton,
+                    {
+                      tooltip: translation("removeFilter"),
+                      onClick: () => {
+                        removeSort(columnSort.id);
+                        setIsOpen(false);
+                      },
+                      color: "negative",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ jsx97(TrashIcon2, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx97(
+                    IconButton,
+                    {
+                      tooltip: translation("close"),
+                      onClick: () => setIsOpen(false),
+                      color: "neutral",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ jsx97(XIcon3, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs61("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ jsxs61(
+                  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__ */ jsx97(ArrowUpNarrowWide, { className: "size-4" }),
+                      translation("sortAsc")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs61(
+                  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__ */ jsx97(ArrowDownWideNarrow, { className: "size-4" }),
+                      translation("sortDesc")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] }, columnSort.id);
+    })
+  ] });
+};
+
 // src/components/user-interaction/date/TimeDisplay.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -19556,13 +19695,13 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx97("span", { children: fullString });
+  return /* @__PURE__ */ jsx98("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-import { forwardRef as forwardRef30, useMemo as useMemo41, useState as useState40 } from "react";
+import { forwardRef as forwardRef30, useMemo as useMemo42, useState as useState40 } from "react";
 import { ClockFading, ClockPlus } from "lucide-react";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
@@ -19578,26 +19717,30 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const fixedTime = useMemo41(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
-  const [preferredMode, setPreferredMode] = useState40(defaultMode);
-  const mode = useMemo41(() => {
-    if (!value) return preferredMode;
+  const fixedTime = useMemo42(() => fixedTimeOverride ?? new Date(1970, 0, 1, 23, 59, 59, 999), [fixedTimeOverride]);
+  const [preferredMode, setPreferredMode] = useState40(() => {
+    if (!value) return defaultMode;
     if (DateUtils.sameTime(value, fixedTime, true, true)) {
       return "date";
     }
     return "dateTime";
-  }, [preferredMode, value, fixedTime]);
-  return /* @__PURE__ */ jsx98(
+  });
+  return /* @__PURE__ */ jsx99(
     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__ */ jsx98(
+        /* @__PURE__ */ jsx99(
           IconButton,
           {
             size: "sm",
@@ -19606,7 +19749,6 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
             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));
@@ -19614,8 +19756,9 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
                   setValue(DateUtils.isLastMillisecondOfDay(value) ? new Date(value.getTime() - 1) : new Date(value.getTime() + 1));
                 }
               }
+              setPreferredMode(newMode);
             },
-            children: preferredMode === "date" ? /* @__PURE__ */ jsx98(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx98(ClockFading, { className: "size-5" })
+            children: preferredMode === "date" ? /* @__PURE__ */ jsx99(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx99(ClockFading, { className: "size-5" })
           },
           "date-mode"
         )
@@ -19627,8 +19770,8 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId23 } from "react";
 import { forwardRef as forwardRef31, useState as useState41 } from "react";
-import clsx37 from "clsx";
-import { jsx as jsx99, jsxs as jsxs61 } from "react/jsx-runtime";
+import clsx38 from "clsx";
+import { jsx as jsx100, jsxs as jsxs62 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef31(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
@@ -19645,8 +19788,8 @@ var InsideLabelInput = forwardRef31(function InsideLabelInput2({
   const [isFocused, setIsFocused] = useState41(false);
   const generatedId = useId23();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs61("div", { className: clsx37("relative"), children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs62("div", { className: clsx38("relative"), children: [
+    /* @__PURE__ */ jsx100(
       Input,
       {
         ...props,
@@ -19663,16 +19806,16 @@ var InsideLabelInput = forwardRef31(function InsideLabelInput2({
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: clsx37("h-14 px-4 pb-2 py-6.5", props.className)
+        className: clsx38("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx100(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx37(
+        className: clsx38(
           // 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",
@@ -19686,8 +19829,8 @@ var InsideLabelInput = forwardRef31(function InsideLabelInput2({
 
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx38 } from "clsx";
-import { jsx as jsx100, jsxs as jsxs62 } from "react/jsx-runtime";
+import { clsx as clsx39 } from "clsx";
+import { jsx as jsx101, jsxs as jsxs63 } from "react/jsx-runtime";
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -19703,8 +19846,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsxs62("div", { ...containerProps, className: clsx38("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs63("div", { ...containerProps, className: clsx39("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx101(
       Input,
       {
         ...inputProps,
@@ -19712,10 +19855,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx38("pr-10 w-full", inputProps.className)
+        className: clsx39("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx101(
       IconButton,
       {
         ...searchButtonProps,
@@ -19724,18 +19867,18 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: clsx38("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx100(Search, { className: "w-full h-full" })
+        className: clsx39("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx101(Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef32, useEffect as useEffect48, useImperativeHandle as useImperativeHandle16, useRef as useRef40, useState as useState42 } from "react";
+import { forwardRef as forwardRef32, useEffect as useEffect49, useImperativeHandle as useImperativeHandle16, useRef as useRef40, useState as useState42 } from "react";
 import { Pencil } from "lucide-react";
-import clsx39 from "clsx";
-import { jsx as jsx101, jsxs as jsxs63 } from "react/jsx-runtime";
+import clsx40 from "clsx";
+import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef32(function ToggleableInput2({
   value: controlledValue,
   initialValue,
@@ -19752,13 +19895,13 @@ var ToggleableInput = forwardRef32(function ToggleableInput2({
   const [isEditing, setIsEditing] = useState42(initialState !== "display");
   const innerRef = useRef40(null);
   useImperativeHandle16(forwardedRef, () => innerRef.current);
-  useEffect48(() => {
+  useEffect49(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs63("div", { className: clsx39("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsxs64("div", { className: clsx40("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx102(
       Input,
       {
         ...props,
@@ -19782,20 +19925,20 @@ var ToggleableInput = forwardRef32(function ToggleableInput2({
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs63("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx101("span", { className: clsx39(" truncate"), children: value }),
-      /* @__PURE__ */ jsx101(Pencil, { className: clsx39(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs64("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx102("span", { className: clsx40(" truncate"), children: value }),
+      /* @__PURE__ */ jsx102(Pencil, { className: clsx40(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { Check as Check4 } from "lucide-react";
+import { Check as Check5 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-import clsx40 from "clsx";
+import clsx41 from "clsx";
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
-import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -19814,36 +19957,36 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsxs65(
     "div",
     {
-      className: clsx40("group/property", className),
+      className: clsx41("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsx102(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs64("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ jsx102("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ jsx102("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ jsx103(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs65("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ jsx103("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ jsx103("span", { "data-name": "property-title-text", children: name })
               ] }) }),
-              invalid && /* @__PURE__ */ jsx102(AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ jsx103(AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsxs64("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ jsx102(
+              showActionsContainer && /* @__PURE__ */ jsxs65("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ jsx103(
                   IconButton,
                   {
                     tooltip: translation("clearValue"),
@@ -19852,10 +19995,10 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx102(X3, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx103(X3, { className: "size-force-5" })
                   }
                 ),
-                isRemoveEnabled && /* @__PURE__ */ jsx102(
+                isRemoveEnabled && /* @__PURE__ */ jsx103(
                   IconButton,
                   {
                     tooltip: translation("removeProperty"),
@@ -19863,7 +20006,7 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx102(Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx103(Trash, { className: "size-force-5" })
                   }
                 )
               ] })
@@ -19876,7 +20019,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs66 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -19885,15 +20028,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx104(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ jsx103(Check4, { size: 24 }),
-      children: () => /* @__PURE__ */ jsxs65("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx103(
+      icon: /* @__PURE__ */ jsx104(Check5, { size: 24 }),
+      children: () => /* @__PURE__ */ jsxs66("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx104(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -19906,7 +20049,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -19926,7 +20069,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onValueChange,
@@ -19936,13 +20079,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx105(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx104(CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx104(
+      icon: /* @__PURE__ */ jsx105(CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx105(
         DateTimeInput,
         {
           value,
@@ -19960,7 +20103,7 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   value,
@@ -19969,18 +20112,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx106(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx105(List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx105(
+      icon: /* @__PURE__ */ jsx106(List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx106(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx105(
+          children: /* @__PURE__ */ jsx106(
             MultiSelectChipDisplay,
             {
               value,
@@ -20007,7 +20150,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 import { Binary as Binary2 } from "lucide-react";
-import { jsx as jsx106, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onValueChange,
@@ -20019,20 +20162,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ jsx106(Binary2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsxs66(
+      icon: /* @__PURE__ */ jsx107(Binary2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsxs67(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ jsx106(
+            /* @__PURE__ */ jsx107(
               Input,
               {
                 "data-name": "property-input",
@@ -20060,7 +20203,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx106(
+            suffix && /* @__PURE__ */ jsx107(
               "span",
               {
                 "data-name": "property-suffix",
@@ -20077,7 +20220,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs68 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -20086,18 +20229,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx108(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx107(List2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx107(
+      icon: /* @__PURE__ */ jsx108(List2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx108(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsxs67(
+          children: /* @__PURE__ */ jsxs68(
             SelectRoot,
             {
               value,
@@ -20107,7 +20250,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ jsx107(
+                /* @__PURE__ */ jsx108(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -20115,7 +20258,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ jsx107(SelectContent, { children })
+                /* @__PURE__ */ jsx108(SelectContent, { children })
               ]
             }
           )
@@ -20127,7 +20270,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -20137,13 +20280,13 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx109(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx108(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx108(
+      icon: /* @__PURE__ */ jsx109(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx109(
         Textarea,
         {
           "data-name": "property-input",
@@ -20164,7 +20307,7 @@ var TextProperty = ({
 // src/components/utils/Polymorphic.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var PolymorphicSlot = forwardRef33(function PolymorphicSlot2({
   children,
   asChild,
@@ -20172,11 +20315,11 @@ var PolymorphicSlot = forwardRef33(function PolymorphicSlot2({
   ...props
 }, ref) {
   const Component = asChild ? Slot : defaultComponent;
-  return /* @__PURE__ */ jsx109(Component, { ...props, ref, children });
+  return /* @__PURE__ */ jsx110(Component, { ...props, ref, children });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect49, useState as useState43 } from "react";
+import { useEffect as useEffect50, useState as useState43 } from "react";
 function Transition({
   children,
   show,
@@ -20185,7 +20328,7 @@ function Transition({
   const [isOpen, setIsOpen] = useState43(show);
   const [isTransitioning, setIsTransitioning] = useState43(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect49(() => {
+  useEffect50(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -20210,18 +20353,18 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ jsx110(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx110(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx110(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ jsx111(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx111(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx111(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect50 } from "react";
+import { useEffect as useEffect51 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -20259,7 +20402,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect50(() => {
+  useEffect51(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -20268,10 +20411,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React5, { useEffect as useEffect51 } from "react";
+import React5, { useEffect as useEffect52 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React5.useState(false);
-  useEffect51(() => {
+  useEffect52(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -20291,9 +20434,9 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect52, useLayoutEffect as useLayoutEffect7, useState as useState44 } from "react";
+import { useEffect as useEffect53, useLayoutEffect as useLayoutEffect7, useState as useState44 } from "react";
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect52;
+var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect53;
 var useIsMounted = () => {
   const [isMounted, setIsMounted] = useState44(false);
   useIsomorphicEffect(() => {
@@ -20306,10 +20449,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-import { useEffect as useEffect53, useRef as useRef41 } from "react";
+import { useEffect as useEffect54, useRef as useRef41 } from "react";
 function useHandleRefs(handleRef) {
   const refs = useRef41([]);
-  useEffect53(() => {
+  useEffect54(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -20347,10 +20490,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect54, useState as useState45 } from "react";
+import { useEffect as useEffect55, useState as useState45 } from "react";
 var useOverwritableState = (overwriteValue, onChange) => {
   const [state, setState] = useState45(overwriteValue);
-  useEffect54(() => {
+  useEffect55(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -20368,7 +20511,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect55, useState as useState46 } from "react";
+import { useEffect as useEffect56, useState as useState46 } from "react";
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
   const { locale: contextLocale } = useLocale();
   const locale = localeOverride ?? contextLocale;
@@ -20377,14 +20520,14 @@ var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
     relative: DateUtils.formatRelative(date, locale)
   });
-  useEffect55(() => {
+  useEffect56(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale]);
-  useEffect55(() => {
+  useEffect56(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -20420,7 +20563,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-import { useMemo as useMemo42 } from "react";
+import { useMemo as useMemo43 } from "react";
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -20470,7 +20613,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return useMemo42(() => ({
+  return useMemo43(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -20871,6 +21014,7 @@ export {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
+  SortingList,
   StepperBar,
   StorageListener,
   Switch,