@helpwave/hightide 0.9.1 → 0.9.3

package/dist/index.js

@@ -6850,6 +6850,7 @@ __export(index_exports, {
   FilterOperatorUtils: () => FilterOperatorUtils,
   FilterPopUp: () => FilterPopUp,
   FilterValueUtils: () => FilterValueUtils,
+  FlexibleDateTimeInput: () => FlexibleDateTimeInput,
   FocusTrap: () => FocusTrap,
   FocusTrapWrapper: () => FocusTrapWrapper,
   FormContext: () => FormContext,
@@ -6924,6 +6925,7 @@ __export(index_exports, {
   SimpleSearch: () => SimpleSearch,
   SimpleSearchWithMapping: () => SimpleSearchWithMapping,
   SingleSelectProperty: () => SingleSelectProperty,
+  SortingList: () => SortingList,
   StepperBar: () => StepperBar,
   StorageListener: () => StorageListener,
   Switch: () => Switch,
@@ -8297,9 +8299,9 @@ var AnchoredFloatingContainer = (0, import_react12.forwardRef)(function Floating
   options = {},
   active = true,
   ...props
-}, forwardRef33) {
+}, forwardRef34) {
   const innerRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useImperativeHandle)(forwardRef33, () => innerRef.current);
+  (0, import_react12.useImperativeHandle)(forwardRef34, () => innerRef.current);
   const position = useAnchoredPosition({
     ...options,
     container: innerRef,
@@ -8603,6 +8605,8 @@ var hightideTranslation = {
   "de-DE": {
     "add": `Hinzuf\xFCgen`,
     "addFilter": `Filter hinzuf\xFCgen`,
+    "addSorting": `Sortierung hinzuf\xFCgen`,
+    "addTime": `Uhrzeit hinzuf\xFCgen`,
     "after": `Nach`,
     "age": `Alter`,
     "all": `Alle`,
@@ -8813,6 +8817,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sortierung`,
     "sSortingState": ({ sortDirection }) => {
       return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
@@ -8963,11 +8969,14 @@ var hightideTranslation = {
     "update": `Update`,
     "value": `Wert`,
     "welcome": `Willkommen`,
+    "withoutTime": `Ohne Uhrzeit`,
     "yes": `Ja`
   },
   "en-US": {
     "add": `Add`,
     "addFilter": `Add filter`,
+    "addSorting": `Add sorting`,
+    "addTime": `Add Time`,
     "after": `After`,
     "age": `Age`,
     "all": `All`,
@@ -9178,6 +9187,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sorting`,
     "sSortingState": ({ sortDirection }) => {
       return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
@@ -9328,6 +9339,7 @@ var hightideTranslation = {
     "update": `Update`,
     "value": `Value`,
     "welcome": `Welcome`,
+    "withoutTime": `Without Time`,
     "yes": `Yes`
   }
 };
@@ -9849,7 +9861,7 @@ var TooltipDisplay = (0, import_react19.forwardRef)(function TooltipAnchoredFloa
   isAnimated: isAnimatedOverwrite,
   anchor: anchorOverwrite,
   ...props
-}, forwardRef33) {
+}, forwardRef34) {
   const { config } = useHightideConfig();
   const tooltipContext = (0, import_react19.useContext)(TooltipContext);
   const disabled = disabledOverwrite ?? tooltipContext?.disabled;
@@ -9865,7 +9877,7 @@ var TooltipDisplay = (0, import_react19.forwardRef)(function TooltipAnchoredFloa
     [isAnimatedOverwrite, config.tooltip.isAnimated]
   );
   const container = (0, import_react21.useRef)(null);
-  (0, import_react19.useImperativeHandle)(forwardRef33, () => container.current);
+  (0, import_react19.useImperativeHandle)(forwardRef34, () => container.current);
   const isActive = !disabled && isShown;
   const { isVisible, transitionState } = useTransitionState(
     (0, import_react21.useMemo)(() => ({ isOpen: isShown, ref: container }), [isShown])
@@ -12113,10 +12125,10 @@ var InputDialog = ({
 };
 
 // src/components/user-interaction/Select/Select.tsx
-var import_react67 = require("react");
+var import_react57 = require("react");
 
 // src/components/user-interaction/Select/SelectRoot.tsx
-var import_react62 = require("react");
+var import_react51 = require("react");
 
 // src/components/user-interaction/Select/SelectContext.tsx
 var import_react44 = require("react");
@@ -12128,7 +12140,7 @@ function useSelectContext() {
 }
 
 // src/components/user-interaction/Select/useSelect.ts
-var import_react60 = require("react");
+var import_react49 = require("react");
 
 // src/hooks/useSingleSelection.ts
 var import_react45 = require("react");
@@ -12254,217 +12266,8 @@ function useListNavigation({
   }), [resolvedHighlightId, highlight, first, last, next, previous]);
 }
 
-// src/hooks/focus/useFocusGuards.ts
-var import_react47 = require("react");
-var selectorName = "data-hw-focus-guard";
-function FocusGuard() {
-  const element = document.createElement("div");
-  element.setAttribute(selectorName, "");
-  element.tabIndex = 0;
-  element.style.border = "none";
-  element.style.outline = "none";
-  element.style.boxShadow = "none";
-  element.style.opacity = "0";
-  element.style.position = "fixed";
-  element.style.pointerEvents = "none";
-  return element;
-}
-var FocusGuardsService = class _FocusGuardsService {
-  constructor() {
-    this.count = 0;
-  }
-  static getInstance() {
-    if (!_FocusGuardsService.instance) {
-      _FocusGuardsService.instance = new _FocusGuardsService();
-    }
-    return _FocusGuardsService.instance;
-  }
-  add() {
-    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
-    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
-    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
-    this.count++;
-  }
-  remove() {
-    if (this.count === 1) {
-      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
-    }
-    this.count--;
-  }
-};
-var useFocusGuards = () => {
-  (0, import_react47.useEffect)(() => {
-    FocusGuardsService.getInstance().add();
-    return () => {
-      FocusGuardsService.getInstance().remove();
-    };
-  }, []);
-};
-
-// src/hooks/focus/useFocusOnceVisible.ts
-var import_react48 = __toESM(require("react"));
-var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react48.default.useState(false);
-  (0, import_react48.useEffect)(() => {
-    if (disable || hasUsedFocus) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !hasUsedFocus) {
-        ref.current?.focus();
-        setHasUsedFocus(hasUsedFocus);
-      }
-    }, {
-      threshold: 0.1
-    });
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => observer.disconnect();
-  }, [disable, hasUsedFocus, ref]);
-};
-
-// src/hooks/focus/useIsMounted.ts
-var import_react49 = require("react");
-var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? import_react49.useLayoutEffect : import_react49.useEffect;
-var useIsMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react49.useState)(false);
-  useIsomorphicEffect(() => {
-    setIsMounted(true);
-    return () => {
-      setIsMounted(false);
-    };
-  }, []);
-  return isMounted;
-};
-
-// src/hooks/useHandleRefs.ts
-var import_react50 = require("react");
-function useHandleRefs(handleRef) {
-  const refs = (0, import_react50.useRef)([]);
-  (0, import_react50.useEffect)(() => {
-    refs.current = Object.keys(handleRef?.current ?? {}).map(
-      () => ({ current: null })
-    );
-    const values = Object.values(handleRef?.current ?? {});
-    values.forEach((el, i) => {
-      refs.current[i].current = el;
-    });
-  });
-  return refs.current;
-}
-
-// src/hooks/useLogUnstableDependencies.ts
-var import_react51 = __toESM(require("react"));
-function useLogUnstableDependencies(name, value) {
-  const prev = import_react51.default.useRef(null);
-  import_react51.default.useEffect(() => {
-    if (!prev.current) {
-      prev.current = value;
-      return;
-    }
-    const changes = {};
-    for (const key of Object.keys(value)) {
-      if (prev.current[key] !== value[key]) {
-        changes[key] = {
-          prev: prev.current[key],
-          next: value[key]
-        };
-      }
-    }
-    if (Object.keys(changes).length > 0) {
-      console.info(`[${name}] changed`, changes);
-    }
-    prev.current = value;
-  });
-}
-
-// src/hooks/useMultiSelection.ts
-var import_react52 = require("react");
-function useMultiSelection({
-  options: optionsList,
-  value,
-  onSelectionChange,
-  initialSelection = [],
-  isControlled
-}) {
-  const [selection, setSelection] = useControlledState({
-    value,
-    onValueChange: onSelectionChange,
-    defaultValue: [...initialSelection],
-    isControlled
-  });
-  const isSelected = (0, import_react52.useCallback)((id) => selection.includes(id), [selection]);
-  const toggleSelection = (0, import_react52.useCallback)(
-    (id) => {
-      const option = optionsList.find((o) => o.id === id);
-      if (!option || option.disabled) return;
-      setSelection((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]);
-    },
-    [optionsList, setSelection]
-  );
-  const setSelectionValue = (0, import_react52.useCallback)(
-    (next) => setSelection(Array.from(next)),
-    [setSelection]
-  );
-  return (0, import_react52.useMemo)(
-    () => ({
-      selection,
-      setSelection: setSelectionValue,
-      toggleSelection,
-      isSelected
-    }),
-    [selection, setSelectionValue, toggleSelection, isSelected]
-  );
-}
-
-// src/hooks/useOutsideClick.ts
-var import_react53 = require("react");
-var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
-  (0, import_react53.useEffect)(() => {
-    if (!active) return;
-    const listener = (event) => {
-      if (event.target === null) return;
-      if (refs.some((ref) => ref.current && ref.current.contains(event.target))) {
-        return;
-      }
-      onOutsideClick(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    document.addEventListener("pointerdown", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [refs, onOutsideClick, active]);
-};
-
-// src/hooks/useOverwritableState.ts
-var import_react54 = require("react");
-var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = (0, import_react54.useState)(overwriteValue);
-  (0, import_react54.useEffect)(() => {
-    setState(overwriteValue);
-  }, [overwriteValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(resolved);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/hooks/useRerender.ts
-var import_react55 = require("react");
-var useRerender = () => {
-  return (0, import_react55.useReducer)(() => ({}), {})[1];
-};
-
 // src/hooks/useSearch.ts
-var import_react56 = require("react");
+var import_react47 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -12503,18 +12306,18 @@ function useSearch({
 }) {
   const toTagsResolved = toTags ?? defaultToTags;
   const toTagsStable = useEventCallbackStabilizer(toTagsResolved);
-  const searchResult = (0, import_react56.useMemo)(() => {
+  const searchResult = (0, import_react47.useMemo)(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return items;
     return MultiSearchWithMapping(searchQuery, [...items], (item) => toTagsStable(item));
   }, [items, searchQuery, toTagsStable]);
-  return (0, import_react56.useMemo)(() => ({
+  return (0, import_react47.useMemo)(() => ({
     searchResult
   }), [searchResult]);
 }
 
 // src/hooks/useTypeAheadSearch.ts
-var import_react57 = require("react");
+var import_react48 = require("react");
 function defaultToString(value) {
   return String(value);
 }
@@ -12524,12 +12327,12 @@ function useTypeAheadSearch({
   toString: toStringProp,
   onResultChange
 }) {
-  const bufferRef = (0, import_react57.useRef)("");
-  const timeoutRef = (0, import_react57.useRef)(null);
+  const bufferRef = (0, import_react48.useRef)("");
+  const timeoutRef = (0, import_react48.useRef)(null);
   const toString = toStringProp ?? defaultToString;
   const toStringStable = useEventCallbackStabilizer(toString);
   const onResultChangeStable = useEventCallbackStabilizer(onResultChange);
-  const reset = (0, import_react57.useCallback)(() => {
+  const reset = (0, import_react48.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -12537,10 +12340,10 @@ function useTypeAheadSearch({
     bufferRef.current = "";
     onResultChangeStable(null);
   }, [onResultChangeStable]);
-  (0, import_react57.useEffect)(() => () => {
+  (0, import_react48.useEffect)(() => () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
   }, []);
-  const addToTypeAhead = (0, import_react57.useCallback)((str) => {
+  const addToTypeAhead = (0, import_react48.useCallback)((str) => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     bufferRef.current += str;
     timeoutRef.current = setTimeout(() => {
@@ -12562,397 +12365,43 @@ function useTypeAheadSearch({
   return { addToTypeAhead, reset };
 }
 
-// src/hooks/useUpdatingDateString.ts
-var import_react58 = require("react");
-
-// src/utils/date.ts
-var timesInSeconds = {
-  second: 1,
-  minute: 60,
-  hour: 3600,
-  day: 86400,
-  week: 604800,
-  monthImprecise: 2629800,
-  // 30.4375 days
-  yearImprecise: 31557600
-  // 365.25 days
-};
-var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
-var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-var changeDuration = (date, duration, isAdding) => {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    hours = 0,
-    minutes = 0,
-    seconds = 0,
-    milliseconds = 0
-  } = duration;
-  if (years < 0) {
-    console.error(`Range error years must be greater than 0: received ${years}`);
-    return new Date(date);
-  }
-  if (months < 0 || months > 11) {
-    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
-    return new Date(date);
-  }
-  if (days < 0) {
-    console.error(`Range error days must be greater than 0: received ${days}`);
-    return new Date(date);
-  }
-  if (hours < 0 || hours > 23) {
-    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
-    return new Date(date);
-  }
-  if (minutes < 0 || minutes > 59) {
-    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
-    return new Date(date);
-  }
-  if (seconds < 0 || seconds > 59) {
-    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
-    return new Date(date);
-  }
-  if (milliseconds < 0) {
-    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
-    return new Date(date);
-  }
-  const multiplier = isAdding ? 1 : -1;
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
-  newDate.setMonth(newDate.getMonth() + multiplier * months);
-  newDate.setDate(newDate.getDate() + multiplier * days);
-  newDate.setHours(newDate.getHours() + multiplier * hours);
-  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
-  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
-  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
-  return newDate;
-};
-var addDuration = (date, duration) => {
-  return changeDuration(date, duration, true);
-};
-var subtractDuration = (date, duration) => {
-  return changeDuration(date, duration, false);
-};
-var between = (value, startDate, endDate) => {
-  if (startDate && endDate) {
-    console.assert(startDate <= endDate);
-    return startDate <= value && value <= endDate;
-  } else if (startDate) {
-    return startDate <= value;
-  } else if (endDate) {
-    return endDate >= value;
-  } else {
-    return true;
-  }
-};
-var equalDate = (date1, date2) => {
-  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
-};
-var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
-  const month = date.getMonth();
-  const year = date.getFullYear();
-  const dayList = [];
-  let currentDate = new Date(year, month, 1);
-  const weekStartIndex = weekDayList.indexOf(weekStart);
-  while (currentDate.getDay() !== weekStartIndex) {
-    currentDate = subtractDuration(currentDate, { days: 1 });
-  }
-  while (dayList.length < 7 * weeks) {
-    const date2 = new Date(currentDate);
-    date2.setHours(date2.getHours(), date2.getMinutes());
-    dayList.push(date2);
-    currentDate = addDuration(currentDate, { days: 1 });
-  }
-  return equalSizeGroups(dayList, 7);
-};
-var formatAbsolute = (date, locale, format) => {
-  let options;
-  switch (format) {
-    case "date":
-      options = {
-        year: "2-digit",
-        month: "2-digit",
-        day: "2-digit"
-      };
-      break;
-    case "time":
-      options = {
-        hour: "2-digit",
-        minute: "2-digit"
-      };
-      break;
-    case "dateTime":
-      options = {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit"
-      };
-      break;
-  }
-  return new Intl.DateTimeFormat(locale, options).format(date);
-};
-var formatRelative = (date, locale) => {
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-  const now = /* @__PURE__ */ new Date();
-  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
-  if (Math.abs(diffInSeconds) < timesInSeconds.minute) return rtf.format(Math.round(diffInSeconds), "second");
-  if (Math.abs(diffInSeconds) < timesInSeconds.hour) return rtf.format(Math.round(diffInSeconds / timesInSeconds.minute), "minute");
-  if (Math.abs(diffInSeconds) < timesInSeconds.day) return rtf.format(Math.round(diffInSeconds / timesInSeconds.hour), "hour");
-  if (Math.abs(diffInSeconds) < timesInSeconds.week) return rtf.format(Math.round(diffInSeconds / timesInSeconds.day), "day");
-  if (Math.abs(diffInSeconds) < timesInSeconds.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.week), "week");
-  if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
-  return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
-};
-var toInputString = (date, format, precision = "minute", isLocalTime = true) => {
-  const pad = (n, l = 2) => String(n).padStart(l, "0");
-  const parts = isLocalTime ? {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    min: date.getMinutes(),
-    s: date.getSeconds(),
-    ms: date.getMilliseconds()
-  } : {
-    y: date.getUTCFullYear(),
-    m: date.getUTCMonth() + 1,
-    d: date.getUTCDate(),
-    h: date.getUTCHours(),
-    min: date.getUTCMinutes(),
-    s: date.getUTCSeconds(),
-    ms: date.getUTCMilliseconds()
-  };
-  const dateStr = `${pad(parts.y, 4)}-${pad(parts.m)}-${pad(parts.d)}`;
-  let timeStr = `${pad(parts.h)}:${pad(parts.min)}`;
-  if (precision === "second" || precision === "millisecond") {
-    timeStr += `:${pad(parts.s)}`;
-  }
-  if (precision === "millisecond") {
-    timeStr += `.${pad(parts.ms, 3)}`;
-  }
-  switch (format) {
-    case "date":
-      return dateStr;
-    case "time":
-      return timeStr;
-    case "dateTime":
-      return `${dateStr}T${timeStr}`;
-  }
-};
-function tryParseDate(dateValue) {
-  if (!dateValue) return null;
-  if (dateValue instanceof Date) return dateValue;
-  if (typeof dateValue === "string" || typeof dateValue === "number") {
-    const parsed = new Date(dateValue);
-    return isNaN(parsed.getTime()) ? null : parsed;
-  }
-  return null;
-}
-function normalizeToDateOnly(date) {
-  const normalized = new Date(date);
-  normalized.setHours(0, 0, 0, 0);
-  return normalized;
-}
-function normalizeDatetime(dateTime) {
-  const normalized = new Date(dateTime);
-  normalized.setSeconds(0, 0);
-  return normalized;
-}
-var DateUtils = {
-  monthsList,
-  weekDayList,
-  equalDate,
-  formatAbsolute,
-  formatRelative,
-  addDuration,
-  subtractDuration,
-  between,
-  weeksForCalenderMonth,
-  timesInSeconds,
-  toInputString,
-  tryParseDate,
-  toOnlyDate: normalizeToDateOnly,
-  /**
-   * Normalizes a datetime by removing seconds and milliseconds.
-   */
-  toDateTimeOnly: normalizeDatetime
-};
-
-// src/hooks/useUpdatingDateString.ts
-var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
-  const { locale: contextLocale } = useLocale();
-  const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react58.useState)({
-    compareDate: date,
-    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-    relative: DateUtils.formatRelative(date, locale)
-  });
-  (0, import_react58.useEffect)(() => {
-    setDateAndTimeStrings({
-      compareDate: date,
-      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-      relative: DateUtils.formatRelative(date, locale)
-    });
-  }, [date, absoluteFormat, locale]);
-  (0, import_react58.useEffect)(() => {
-    let timeoutId;
-    const startTimer = () => {
-      const now = /* @__PURE__ */ new Date();
-      const diff = Math.abs((date.getTime() - now.getTime()) / 1e3);
-      let delayInSeconds;
-      if (diff < DateUtils.timesInSeconds.minute) {
-        delayInSeconds = DateUtils.timesInSeconds.second;
-      } else if (diff < DateUtils.timesInSeconds.hour) {
-        delayInSeconds = DateUtils.timesInSeconds.minute;
-      } else {
-        delayInSeconds = DateUtils.timesInSeconds.hour;
-      }
-      timeoutId = setInterval(() => {
-        setDateAndTimeStrings({
-          compareDate: date,
-          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-          relative: DateUtils.formatRelative(date, locale)
-        });
-      }, delayInSeconds * 1e3 / 2);
-    };
-    startTimer();
-    return () => clearInterval(timeoutId);
-  }, [absoluteFormat, date, locale]);
-  return {
-    absolute: dateAndTimeStrings.absolute,
-    relative: dateAndTimeStrings.relative
-  };
-};
-
-// src/utils/emailValidation.ts
-var validateEmail = (email) => {
-  return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
-};
-
-// src/hooks/useValidators.ts
-var import_react59 = require("react");
-var notEmpty = (value) => {
-  if (!value) {
-    return "notEmpty";
-  }
-};
-var boundsValidator = (length, bounds) => {
-  const [min, max] = bounds;
-  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
-    return "range";
-  }
-  if (min !== void 0 && (length === void 0 || length < min)) {
-    return "lower";
-  }
-  if (max !== void 0 && length !== void 0 && length > max) {
-    return "upper";
-  }
-  return "none";
-};
-var lengthValidator = (value, bounds) => {
-  const mapping = {
-    range: "outOfRangeString",
-    lower: "tooShort",
-    upper: "tooLong",
-    none: void 0
-  };
-  return mapping[boundsValidator(value?.length, bounds)];
-};
-var selectionValidator = (value, bounds) => {
-  const mapping = {
-    range: "outOfRangeSelectionItems",
-    lower: "tooFewSelectionItems",
-    upper: "tooManySelectionItems",
-    none: void 0
-  };
-  return mapping[boundsValidator(value?.length, bounds)];
-};
-var emailValidator = (value) => {
-  if (!value || !validateEmail(value)) {
-    return "invalidEmail";
-  }
-};
-var UseValidators = {
-  notEmpty,
-  length: lengthValidator,
-  email: emailValidator,
-  selection: selectionValidator
-};
-var useTranslatedValidators = () => {
-  const translation = useHightideTranslation();
-  return (0, import_react59.useMemo)(() => ({
-    notEmpty: (value) => {
-      const result = notEmpty(value);
-      if (result) {
-        return translation(result);
-      }
-    },
-    length: (value, length) => {
-      const [min, max] = length;
-      const result = lengthValidator(value, length);
-      if (result) {
-        return translation(result, { min, max });
-      }
-    },
-    email: (value) => {
-      const result = emailValidator(value ?? "");
-      if (result) {
-        return translation(result);
-      }
-    },
-    selection: (value, length) => {
-      const [min, max] = length;
-      const result = selectionValidator(value, length);
-      if (result) {
-        return translation(
-          result,
-          { min, max }
-        );
-      }
-    }
-  }), [translation]);
-};
-
-// src/components/user-interaction/Select/useSelect.ts
-function useSelect({
-  options,
-  value: controlledValue,
-  onValueChange,
-  onEditComplete,
-  initialValue = null,
-  onClose,
-  onIsOpenChange,
-  initialIsOpen = false,
-  typeAheadResetMs = 500
-}) {
-  const [isOpen, setIsOpen] = (0, import_react60.useState)(initialIsOpen);
-  const [searchQuery, setSearchQuery] = (0, import_react60.useState)("");
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onCloseStable = useEventCallbackStabilizer(onClose);
-  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange);
-  const onSelectionChangeWrapper = (0, import_react60.useCallback)((id) => {
-    if (id === null) return;
-    onValueChangeStable(id);
-    onEditCompleteStable(id);
-    setIsOpen(false);
-  }, [onValueChangeStable, onEditCompleteStable, setIsOpen]);
-  const { selection, selectValue } = useSingleSelection({
-    options,
-    selection: controlledValue,
-    onSelectionChange: onSelectionChangeWrapper,
-    initialSelection: initialValue
-  });
-  const { searchResult: visibleOptions } = useSearch({
-    items: options,
-    searchQuery,
-    toTags: (0, import_react60.useCallback)((o) => [o.label], [])
-  });
-  const visibleOptionIds = (0, import_react60.useMemo)(() => visibleOptions.map((o) => o.id), [visibleOptions]);
-  const enabledOptions = (0, import_react60.useMemo)(() => visibleOptions.filter((o) => !o.disabled), [visibleOptions]);
+// src/components/user-interaction/Select/useSelect.ts
+function useSelect({
+  options,
+  value: controlledValue,
+  onValueChange,
+  onEditComplete,
+  initialValue = null,
+  onClose,
+  onIsOpenChange,
+  initialIsOpen = false,
+  typeAheadResetMs = 500
+}) {
+  const [isOpen, setIsOpen] = (0, import_react49.useState)(initialIsOpen);
+  const [searchQuery, setSearchQuery] = (0, import_react49.useState)("");
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
+  const onCloseStable = useEventCallbackStabilizer(onClose);
+  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange);
+  const onSelectionChangeWrapper = (0, import_react49.useCallback)((id) => {
+    if (id === null) return;
+    onValueChangeStable(id);
+    onEditCompleteStable(id);
+    setIsOpen(false);
+  }, [onValueChangeStable, onEditCompleteStable, setIsOpen]);
+  const { selection, selectValue } = useSingleSelection({
+    options,
+    selection: controlledValue,
+    onSelectionChange: onSelectionChangeWrapper,
+    initialSelection: initialValue
+  });
+  const { searchResult: visibleOptions } = useSearch({
+    items: options,
+    searchQuery,
+    toTags: (0, import_react49.useCallback)((o) => [o.label], [])
+  });
+  const visibleOptionIds = (0, import_react49.useMemo)(() => visibleOptions.map((o) => o.id), [visibleOptions]);
+  const enabledOptions = (0, import_react49.useMemo)(() => visibleOptions.filter((o) => !o.disabled), [visibleOptions]);
   const {
     highlightedId,
     highlight: listNavHighlight,
@@ -12968,28 +12417,28 @@ function useSelect({
     options: enabledOptions,
     resetTimer: typeAheadResetMs,
     toString: (o) => o.label ?? "",
-    onResultChange: (0, import_react60.useCallback)((option) => {
+    onResultChange: (0, import_react49.useCallback)((option) => {
       if (option) listNavHighlight(option.id);
     }, [listNavHighlight])
   });
-  (0, import_react60.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
-  const state = (0, import_react60.useMemo)(() => ({
+  const state = (0, import_react49.useMemo)(() => ({
     value: selection,
     highlightedValue: highlightedId,
     isOpen,
     searchQuery,
     options
   }), [selection, highlightedId, isOpen, searchQuery, options]);
-  const computedState = (0, import_react60.useMemo)(() => ({
+  const computedState = (0, import_react49.useMemo)(() => ({
     visibleOptionIds
   }), [visibleOptionIds]);
-  const highlightItem = (0, import_react60.useCallback)((value) => {
+  const highlightItem = (0, import_react49.useCallback)((value) => {
     if (!enabledOptions.some((o) => o.id === value)) return;
     listNavHighlight(value);
   }, [enabledOptions, listNavHighlight]);
-  const setIsOpenWrapper = (0, import_react60.useCallback)((isOpen2, behavior) => {
+  const setIsOpenWrapper = (0, import_react49.useCallback)((isOpen2, behavior) => {
     behavior = behavior ?? "first";
     if (isOpen2) {
       if (selection == null) {
@@ -13008,11 +12457,11 @@ function useSelect({
     setIsOpen(isOpen2);
     onIsOpenChangeStable(isOpen2);
   }, [setIsOpen, highlightItem, onCloseStable, setSearchQuery, onIsOpenChangeStable, selection, listNavFirst, listNavLast]);
-  const toggleOpenWrapper = (0, import_react60.useCallback)((behavior) => {
+  const toggleOpenWrapper = (0, import_react49.useCallback)((behavior) => {
     const next = !isOpen;
     setIsOpenWrapper(next, behavior);
   }, [isOpen, setIsOpenWrapper]);
-  const actions = (0, import_react60.useMemo)(() => ({
+  const actions = (0, import_react49.useMemo)(() => ({
     selectValue: (id) => selectValue(id),
     setIsOpen: setIsOpenWrapper,
     toggleOpen: toggleOpenWrapper,
@@ -13024,7 +12473,7 @@ function useSelect({
     highlightItem,
     handleTypeaheadKey: addToTypeAhead
   }), [selectValue, setIsOpenWrapper, listNavFirst, listNavLast, listNavNext, listNavPrevious, highlightItem, addToTypeAhead, toggleOpenWrapper]);
-  return (0, import_react60.useMemo)(() => ({
+  return (0, import_react49.useMemo)(() => ({
     ...state,
     ...computedState,
     ...actions
@@ -13043,10 +12492,10 @@ var DOMUtils = {
 };
 
 // src/components/layout/popup/PopUpContext.tsx
-var import_react61 = require("react");
-var PopUpContext = (0, import_react61.createContext)(null);
+var import_react50 = require("react");
+var PopUpContext = (0, import_react50.createContext)(null);
 function usePopUpContext() {
-  const context = (0, import_react61.useContext)(PopUpContext);
+  const context = (0, import_react50.useContext)(PopUpContext);
   if (!context) {
     throw new Error("usePopUpContext must be used within a <PopUpContext.Provider>");
   }
@@ -13072,16 +12521,16 @@ function SelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = (0, import_react62.useState)(null);
-  const [options, setOptions] = (0, import_react62.useState)([]);
-  const generatedId = (0, import_react62.useId)();
-  const [ids, setIds] = (0, import_react62.useState)({
+  const [triggerRef, setTriggerRef] = (0, import_react51.useState)(null);
+  const [options, setOptions] = (0, import_react51.useState)([]);
+  const generatedId = (0, import_react51.useId)();
+  const [ids, setIds] = (0, import_react51.useState)({
     trigger: "select-" + generatedId,
     content: "select-content-" + generatedId,
     listbox: "select-listbox-" + generatedId,
     searchInput: "select-search-" + generatedId
   });
-  const registerOption = (0, import_react62.useCallback)(
+  const registerOption = (0, import_react51.useCallback)(
     (item) => {
       setOptions((prev) => {
         const next = prev.filter((o) => o.value !== item.value);
@@ -13093,31 +12542,31 @@ function SelectRoot({
     },
     []
   );
-  const registerTrigger = (0, import_react62.useCallback)((ref) => {
+  const registerTrigger = (0, import_react51.useCallback)((ref) => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
     };
   }, []);
-  const compare = (0, import_react62.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
-  const idToOptionMap = (0, import_react62.useMemo)(() => {
+  const compare = (0, import_react51.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
+  const idToOptionMap = (0, import_react51.useMemo)(() => {
     return options.reduce((acc, o) => {
       acc[o.id] = o;
       return acc;
     }, {});
   }, [options]);
-  const mappedValueId = (0, import_react62.useMemo)(() => {
+  const mappedValueId = (0, import_react51.useMemo)(() => {
     if (value === void 0) return void 0;
     return options.find((o) => compare(o.value, value))?.id ?? null;
   }, [options, value, compare]);
-  const mappedInitialValueId = (0, import_react62.useMemo)(() => {
+  const mappedInitialValueId = (0, import_react51.useMemo)(() => {
     if (initialValue === void 0) return void 0;
     return options.find((o) => compare(o.value, initialValue))?.id ?? null;
   }, [options, initialValue, compare]);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange);
-  const onValueChangeWrapper = (0, import_react62.useCallback)((value2) => {
+  const onValueChangeWrapper = (0, import_react51.useCallback)((value2) => {
     const option = idToOptionMap[value2];
     if (option === void 0) {
       console.warn(`Attempted to select an option ${value2} that is not valid`);
@@ -13125,7 +12574,7 @@ function SelectRoot({
     }
     onValueChangeStable(option.value);
   }, [onValueChangeStable, idToOptionMap]);
-  const onEditCompleteWrapper = (0, import_react62.useCallback)((value2) => {
+  const onEditCompleteWrapper = (0, import_react51.useCallback)((value2) => {
     const option = idToOptionMap[value2];
     if (option === void 0) {
       console.warn(`Attempted to edit complete an option ${value2} that is not valid`);
@@ -13144,17 +12593,17 @@ function SelectRoot({
     onIsOpenChange: onIsOpenChangeStable
   });
   const { setSearchQuery } = state;
-  (0, import_react62.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (showSearch === false) {
       setSearchQuery("");
     }
   }, [showSearch, setSearchQuery]);
-  const config = (0, import_react62.useMemo)(() => ({
+  const config = (0, import_react51.useMemo)(() => ({
     iconAppearance,
     ids,
     setIds
   }), [iconAppearance, ids, setIds]);
-  const layout = (0, import_react62.useMemo)(() => ({
+  const layout = (0, import_react51.useMemo)(() => ({
     triggerRef,
     registerTrigger
   }), [triggerRef, registerTrigger]);
@@ -13209,22 +12658,22 @@ function SelectRoot({
 }
 
 // src/components/user-interaction/Select/SelectButton.tsx
-var import_react64 = require("react");
+var import_react53 = require("react");
 
 // src/components/user-interaction/Select/SelectOption.tsx
 var import_clsx9 = __toESM(require("clsx"));
 var import_lucide_react6 = require("lucide-react");
-var import_react63 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var SelectOptionDisplayContext = (0, import_react63.createContext)(null);
+var SelectOptionDisplayContext = (0, import_react52.createContext)(null);
 function useSelectOptionDisplayLocation() {
-  const context = (0, import_react63.useContext)(SelectOptionDisplayContext);
+  const context = (0, import_react52.useContext)(SelectOptionDisplayContext);
   if (!context) {
     throw new Error("useSelectOptionDisplayLocation must be used within a SelectOptionDisplayContext");
   }
   return context;
 }
-var SelectOption = (0, import_react63.forwardRef)(function SelectOption2({
+var SelectOption = (0, import_react52.forwardRef)(function SelectOption2({
   children,
   label,
   value,
@@ -13234,12 +12683,12 @@ var SelectOption = (0, import_react63.forwardRef)(function SelectOption2({
 }, ref) {
   const context = useSelectContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react63.useRef)(null);
+  const itemRef = (0, import_react52.useRef)(null);
   const display = children ?? label;
   const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
-  const generatedId = (0, import_react63.useId)();
+  const generatedId = (0, import_react52.useId)();
   const optionId = props?.id ?? "select-option-" + generatedId;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -13307,7 +12756,7 @@ var SelectOption = (0, import_react63.forwardRef)(function SelectOption2({
 
 // src/components/user-interaction/Select/SelectButton.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var SelectButton = (0, import_react64.forwardRef)(
+var SelectButton = (0, import_react53.forwardRef)(
   function SelectButton2({
     id,
     placeholder,
@@ -13321,12 +12770,12 @@ var SelectButton = (0, import_react64.forwardRef)(
     const { config, layout } = context;
     const { setIds } = config;
     const { registerTrigger } = layout;
-    (0, import_react64.useEffect)(() => {
+    (0, import_react53.useEffect)(() => {
       if (id) setIds((prev) => ({ ...prev, trigger: id }));
     }, [id, setIds]);
-    const innerRef = (0, import_react64.useRef)(null);
-    (0, import_react64.useImperativeHandle)(ref, () => innerRef.current);
-    (0, import_react64.useEffect)(() => {
+    const innerRef = (0, import_react53.useRef)(null);
+    (0, import_react53.useImperativeHandle)(ref, () => innerRef.current);
+    (0, import_react53.useEffect)(() => {
       const unregister = registerTrigger(innerRef);
       return () => unregister();
     }, [registerTrigger]);
@@ -13387,13 +12836,38 @@ var SelectButton = (0, import_react64.forwardRef)(
 );
 
 // src/components/user-interaction/Select/SelectContent.tsx
-var import_react66 = require("react");
+var import_react56 = require("react");
 var import_clsx10 = __toESM(require("clsx"));
 
 // src/components/layout/popup/PopUp.tsx
-var import_react65 = require("react");
+var import_react55 = require("react");
+
+// src/hooks/useOutsideClick.ts
+var import_react54 = require("react");
+var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
+  (0, import_react54.useEffect)(() => {
+    if (!active) return;
+    const listener = (event) => {
+      if (event.target === null) return;
+      if (refs.some((ref) => ref.current && ref.current.contains(event.target))) {
+        return;
+      }
+      onOutsideClick(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    document.addEventListener("pointerdown", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+      document.removeEventListener("pointerdown", listener);
+    };
+  }, [refs, onOutsideClick, active]);
+};
+
+// src/components/layout/popup/PopUp.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var PopUp = (0, import_react65.forwardRef)(function PopUp2({
+var PopUp = (0, import_react55.forwardRef)(function PopUp2({
   children,
   isOpen: isOpenOverwrite,
   focusTrapOptions,
@@ -13404,24 +12878,24 @@ var PopUp = (0, import_react65.forwardRef)(function PopUp2({
   forceMount = false,
   anchorExcludedFromOutsideClick = false,
   ...props
-}, forwardRef33) {
-  const context = (0, import_react65.useContext)(PopUpContext);
+}, forwardRef34) {
+  const context = (0, import_react55.useContext)(PopUpContext);
   const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
   const anchor = anchorOverwrite ?? context?.triggerRef ?? void 0;
   const id = props.id ?? context?.popUpId;
   const { refAssignment, isPresent, ref } = usePresenceRef({ isOpen });
-  (0, import_react65.useImperativeHandle)(forwardRef33, () => ref.current, [ref]);
+  (0, import_react55.useImperativeHandle)(forwardRef34, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
-  const onCloseWrapper = (0, import_react65.useCallback)(() => {
+  const onCloseWrapper = (0, import_react55.useCallback)(() => {
     onCloseStable();
     context?.setIsOpen(false);
   }, [onCloseStable, context]);
-  const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: (0, import_react65.useMemo)(() => ["popup"], []) });
+  const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: (0, import_react55.useMemo)(() => ["popup"], []) });
   const isInFront = tagPositions?.["popup"] === 0;
   const isOutsideClickActive = isOpen && isInFront && (outsideClickOptions?.active ?? true);
   useOutsideClick({
-    onOutsideClick: (0, import_react65.useCallback)((event) => {
+    onOutsideClick: (0, import_react55.useCallback)((event) => {
       if (event.defaultPrevented) return;
       onCloseWrapper();
       onOutsideClickStable(event);
@@ -13459,7 +12933,7 @@ var PopUp = (0, import_react65.forwardRef)(function PopUp2({
 
 // src/components/user-interaction/Select/SelectContent.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var SelectContent = (0, import_react66.forwardRef)(function SelectContent2({
+var SelectContent = (0, import_react56.forwardRef)(function SelectContent2({
   id,
   options,
   showSearch: showSearchOverride,
@@ -13467,18 +12941,18 @@ var SelectContent = (0, import_react66.forwardRef)(function SelectContent2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = (0, import_react66.useRef)(null);
-  const searchInputRef = (0, import_react66.useRef)(null);
-  (0, import_react66.useImperativeHandle)(ref, () => innerRef.current);
+  const innerRef = (0, import_react56.useRef)(null);
+  const searchInputRef = (0, import_react56.useRef)(null);
+  (0, import_react56.useImperativeHandle)(ref, () => innerRef.current);
   const context = useSelectContext();
   const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context;
   const { setIds } = config;
-  (0, import_react66.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = (0, import_react66.useCallback)(
+  const keyHandler = (0, import_react56.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -13587,7 +13061,7 @@ var SelectContent = (0, import_react66.forwardRef)(function SelectContent2({
 
 // src/components/user-interaction/Select/Select.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Select = (0, import_react67.forwardRef)(function Select2({ children, contentPanelProps, buttonProps, ...props }, ref) {
+var Select = (0, import_react57.forwardRef)(function Select2({ children, contentPanelProps, buttonProps, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(SelectRoot, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       SelectButton,
@@ -13654,13 +13128,13 @@ var import_lucide_react7 = require("lucide-react");
 var import_clsx12 = __toESM(require("clsx"));
 
 // src/global-contexts/ThemeContext.tsx
-var import_react68 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
 };
-var ThemeContext = (0, import_react68.createContext)(null);
+var ThemeContext = (0, import_react58.createContext)(null);
 var ThemeProvider = ({ children, theme, initialTheme }) => {
   const {
     value: storedTheme,
@@ -13668,8 +13142,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     deleteValue: deleteStoredTheme
   } = useStorage({ key: "theme", defaultValue: "system" });
   const { config } = useHightideConfig();
-  const [themePreference, setThemePreference] = (0, import_react68.useState)("system");
-  const resolvedTheme = (0, import_react68.useMemo)(() => {
+  const [themePreference, setThemePreference] = (0, import_react58.useState)("system");
+  const resolvedTheme = (0, import_react58.useMemo)(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -13681,7 +13155,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -13689,18 +13163,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme, deleteStoredTheme, setStoredTheme]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = (0, import_react68.useCallback)(() => {
+  const getPreference = (0, import_react58.useCallback)(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     getPreference();
   }, [getPreference]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
     const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
@@ -13731,7 +13205,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
   );
 };
 var useTheme = () => {
-  const context = (0, import_react68.useContext)(ThemeContext);
+  const context = (0, import_react58.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -13811,16 +13285,16 @@ var ThemeDialog = ({
 };
 
 // src/components/layout/drawer/Drawer.tsx
-var import_react71 = require("react");
+var import_react61 = require("react");
 
 // src/components/layout/drawer/DrawerContent.tsx
-var import_react70 = require("react");
+var import_react60 = require("react");
 
 // src/components/layout/drawer/DrawerContext.tsx
-var import_react69 = require("react");
-var DrawerContext = (0, import_react69.createContext)(null);
+var import_react59 = require("react");
+var DrawerContext = (0, import_react59.createContext)(null);
 function useDrawerContext() {
-  const context = (0, import_react69.useContext)(DrawerContext);
+  const context = (0, import_react59.useContext)(DrawerContext);
   if (!context) {
     throw new Error("useDrawerContext must be used within a <DrawerRoot>");
   }
@@ -13829,7 +13303,7 @@ function useDrawerContext() {
 
 // src/components/layout/drawer/DrawerContent.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var DrawerContent = (0, import_react70.forwardRef)(function DrawerContent2({
+var DrawerContent = (0, import_react60.forwardRef)(function DrawerContent2({
   children,
   alignment = "left",
   containerClassName,
@@ -13838,14 +13312,14 @@ var DrawerContent = (0, import_react70.forwardRef)(function DrawerContent2({
   ...props
 }, forwardedRef) {
   const { isOpen } = useDrawerContext();
-  const generatedId = (0, import_react70.useId)();
-  const ids = (0, import_react70.useMemo)(() => ({
+  const generatedId = (0, import_react60.useId)();
+  const ids = (0, import_react60.useMemo)(() => ({
     container: `dialog-container-${generatedId}`,
     background: `dialog-background-${generatedId}`,
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
-  const ref = (0, import_react70.useRef)(null);
-  (0, import_react70.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
+  const ref = (0, import_react60.useRef)(null);
+  (0, import_react60.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
     container: ref,
@@ -13853,7 +13327,7 @@ var DrawerContent = (0, import_react70.forwardRef)(function DrawerContent2({
   });
   const { zIndex, tagPositions, tagItemCounts } = useOverlayRegistry({
     isActive: isVisible,
-    tags: (0, import_react70.useMemo)(() => ["drawer"], [])
+    tags: (0, import_react60.useMemo)(() => ["drawer"], [])
   });
   const depth = tagPositions && tagItemCounts ? (tagItemCounts["drawer"] ?? 0) - (tagPositions["drawer"] ?? 0) : 0;
   const { setOpen } = useDrawerContext();
@@ -13948,7 +13422,7 @@ function DrawerRoot({
 
 // src/components/layout/drawer/Drawer.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var Drawer = (0, import_react71.forwardRef)(function Drawer2({
+var Drawer = (0, import_react61.forwardRef)(function Drawer2({
   children,
   isOpen = true,
   alignment = "left",
@@ -14006,7 +13480,7 @@ var ErrorComponent = ({
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-var import_react72 = require("react");
+var import_react62 = require("react");
 
 // src/components/layout/loading/LoadingContainer.tsx
 var import_clsx14 = require("clsx");
@@ -14027,8 +13501,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react72.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react72.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react62.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react62.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -14091,8 +13565,8 @@ var BreadCrumbs = ({ crumbs }) => {
 
 // src/components/layout/navigation/Navigation.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_react73 = require("react");
-var import_react74 = require("react");
+var import_react63 = require("react");
+var import_react64 = require("react");
 var import_link2 = __toESM(require_link2());
 var import_clsx17 = __toESM(require("clsx"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -14105,10 +13579,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = (0, import_react74.useState)(false);
-  const containerRef = (0, import_react74.useRef)(null);
-  const triggerRef = (0, import_react74.useRef)(null);
-  const id = (0, import_react74.useId)();
+  const [isOpen, setOpen] = (0, import_react64.useState)(false);
+  const containerRef = (0, import_react64.useRef)(null);
+  const triggerRef = (0, import_react64.useRef)(null);
+  const id = (0, import_react64.useId)();
   const style = useAnchoredPosition({
     active: isOpen,
     container: containerRef,
@@ -14116,7 +13590,7 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = (0, import_react74.useCallback)((event) => {
+  const onBlur = (0, import_react64.useCallback)((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
@@ -14182,10 +13656,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
 };
 var Navigation = ({ ...props }) => {
   const translation = useHightideTranslation();
-  const [isMobileOpen, setIsMobileOpen] = (0, import_react74.useState)(false);
-  const id = (0, import_react74.useId)();
-  const menuRef = (0, import_react74.useRef)(null);
-  (0, import_react73.useEffect)(() => {
+  const [isMobileOpen, setIsMobileOpen] = (0, import_react64.useState)(false);
+  const id = (0, import_react64.useId)();
+  const menuRef = (0, import_react64.useRef)(null);
+  (0, import_react63.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
@@ -14253,7 +13727,7 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 var import_lucide_react11 = require("lucide-react");
 var import_clsx18 = __toESM(require("clsx"));
-var import_react75 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
@@ -14262,11 +13736,11 @@ var Pagination = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = (0, import_react75.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react65.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react75.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -14460,18 +13934,18 @@ var StepperBar = ({
 };
 
 // src/components/layout/popup/PopUpOpener.tsx
-var import_react76 = require("react");
+var import_react66 = require("react");
 function PopUpOpener({ children }) {
   const context = usePopUpContext();
   const { setTriggerRef } = context;
-  const ref = (0, import_react76.useRef)(null);
-  (0, import_react76.useEffect)(() => {
+  const ref = (0, import_react66.useRef)(null);
+  (0, import_react66.useEffect)(() => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
     };
   }, [setTriggerRef]);
-  const bag = (0, import_react76.useMemo)(() => ({
+  const bag = (0, import_react66.useMemo)(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -14489,7 +13963,7 @@ function PopUpOpener({ children }) {
 }
 
 // src/components/layout/popup/PopUpRoot.tsx
-var import_react77 = require("react");
+var import_react67 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function PopUpRoot({
   children,
@@ -14499,17 +13973,17 @@ function PopUpRoot({
   popUpId: popUpIdOverwrite,
   triggerId: triggerIdOverwrite
 }) {
-  const generatedPopUpId = (0, import_react77.useId)();
-  const generatedTriggerId = (0, import_react77.useId)();
+  const generatedPopUpId = (0, import_react67.useId)();
+  const generatedTriggerId = (0, import_react67.useId)();
   const [isOpen, setIsOpen] = useControlledState({
     value: controlledIsOpen,
     onValueChange: onIsOpenChange,
     defaultValue: initialIsOpen
   });
-  const [triggerRef, setTriggerRef] = (0, import_react77.useState)(null);
-  const popUpId = (0, import_react77.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
-  const triggerId = (0, import_react77.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
-  const contextValue = (0, import_react77.useMemo)(() => ({
+  const [triggerRef, setTriggerRef] = (0, import_react67.useState)(null);
+  const popUpId = (0, import_react67.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
+  const triggerId = (0, import_react67.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
+  const contextValue = (0, import_react67.useMemo)(() => ({
     isOpen,
     setIsOpen,
     popUpId,
@@ -14696,31 +14170,31 @@ var FillerCell = ({ ...props }) => {
 };
 
 // src/components/layout/table/TableProvider.tsx
-var import_react80 = require("react");
+var import_react70 = require("react");
 
 // src/components/layout/table/TableContext.tsx
-var import_react78 = require("react");
-var TableStateWithoutSizingContext = (0, import_react78.createContext)(null);
+var import_react68 = require("react");
+var TableStateWithoutSizingContext = (0, import_react68.createContext)(null);
 var useTableStateWithoutSizingContext = () => {
-  const context = (0, import_react78.useContext)(TableStateWithoutSizingContext);
+  const context = (0, import_react68.useContext)(TableStateWithoutSizingContext);
   if (!context) throw new Error("useTableStateWithoutSizingContext must be used within a <TableStateWithoutSizingContext.Provider> like <TableStateWithoutSizing>");
   return context;
 };
-var TableStateContext = (0, import_react78.createContext)(null);
+var TableStateContext = (0, import_react68.createContext)(null);
 var useTableStateContext = () => {
-  const context = (0, import_react78.useContext)(TableStateContext);
+  const context = (0, import_react68.useContext)(TableStateContext);
   if (!context) throw new Error("useTableStateContext must be used within a <TableStateContext.Provider> like <TableState>");
   return context;
 };
-var TableContainerContext = (0, import_react78.createContext)(null);
+var TableContainerContext = (0, import_react68.createContext)(null);
 var useTableContainerContext = () => {
-  const context = (0, import_react78.useContext)(TableContainerContext);
+  const context = (0, import_react68.useContext)(TableContainerContext);
   if (!context) throw new Error("useTableContainerContext must be used within a <TableContainerContext.Provider> like <TableContainer>");
   return context;
 };
-var TableColumnDefinitionContext = (0, import_react78.createContext)(null);
+var TableColumnDefinitionContext = (0, import_react68.createContext)(null);
 var useTableColumnDefinitionContext = () => {
-  const context = (0, import_react78.useContext)(TableColumnDefinitionContext);
+  const context = (0, import_react68.useContext)(TableColumnDefinitionContext);
   if (!context) throw new Error("useTableColumnDefinitionContext must be used within a <TableColumnDefinitionContext.Provider> like <TableColumnDefinition>");
   return context;
 };
@@ -14899,7 +14373,254 @@ var FilterOperatorUtils = {
 };
 
 // src/components/user-interaction/data/filter-function.ts
-var import_react79 = require("react");
+var import_react69 = require("react");
+
+// src/utils/date.ts
+var timesInSeconds = {
+  second: 1,
+  minute: 60,
+  hour: 3600,
+  day: 86400,
+  week: 604800,
+  monthImprecise: 2629800,
+  // 30.4375 days
+  yearImprecise: 31557600
+  // 365.25 days
+};
+var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var changeDuration = (date, duration, isAdding) => {
+  const {
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = duration;
+  if (years < 0) {
+    console.error(`Range error years must be greater than 0: received ${years}`);
+    return new Date(date);
+  }
+  if (months < 0 || months > 11) {
+    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
+    return new Date(date);
+  }
+  if (days < 0) {
+    console.error(`Range error days must be greater than 0: received ${days}`);
+    return new Date(date);
+  }
+  if (hours < 0 || hours > 23) {
+    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
+    return new Date(date);
+  }
+  if (minutes < 0 || minutes > 59) {
+    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
+    return new Date(date);
+  }
+  if (seconds < 0 || seconds > 59) {
+    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
+    return new Date(date);
+  }
+  if (milliseconds < 0) {
+    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
+    return new Date(date);
+  }
+  const multiplier = isAdding ? 1 : -1;
+  const newDate = new Date(date);
+  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
+  newDate.setMonth(newDate.getMonth() + multiplier * months);
+  newDate.setDate(newDate.getDate() + multiplier * days);
+  newDate.setHours(newDate.getHours() + multiplier * hours);
+  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
+  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
+  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
+  return newDate;
+};
+var addDuration = (date, duration) => {
+  return changeDuration(date, duration, true);
+};
+var subtractDuration = (date, duration) => {
+  return changeDuration(date, duration, false);
+};
+var between = (value, startDate, endDate) => {
+  if (startDate && endDate) {
+    console.assert(startDate <= endDate);
+    return startDate <= value && value <= endDate;
+  } else if (startDate) {
+    return startDate <= value;
+  } else if (endDate) {
+    return endDate >= value;
+  } else {
+    return true;
+  }
+};
+var equalDate = (date1, date2) => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var isLastMillisecondOfDay = (date) => {
+  const next = new Date(date.getTime() + 1);
+  return !equalDate(date, next);
+};
+var sameTime = (a, b, compareSeconds = false, compareMilliseconds = false) => {
+  if (a.getHours() !== b.getHours() || a.getMinutes() !== b.getMinutes()) {
+    return false;
+  }
+  if (compareSeconds && a.getSeconds() !== b.getSeconds()) {
+    return false;
+  }
+  if (compareMilliseconds && a.getMilliseconds() !== b.getMilliseconds()) {
+    return false;
+  }
+  return true;
+};
+var withTime = (datePart, timePart) => {
+  const out = new Date(datePart);
+  out.setHours(
+    timePart.getHours(),
+    timePart.getMinutes(),
+    timePart.getSeconds(),
+    timePart.getMilliseconds()
+  );
+  return out;
+};
+var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const dayList = [];
+  let currentDate = new Date(year, month, 1);
+  const weekStartIndex = weekDayList.indexOf(weekStart);
+  while (currentDate.getDay() !== weekStartIndex) {
+    currentDate = subtractDuration(currentDate, { days: 1 });
+  }
+  while (dayList.length < 7 * weeks) {
+    const date2 = new Date(currentDate);
+    date2.setHours(date2.getHours(), date2.getMinutes());
+    dayList.push(date2);
+    currentDate = addDuration(currentDate, { days: 1 });
+  }
+  return equalSizeGroups(dayList, 7);
+};
+var formatAbsolute = (date, locale, format) => {
+  let options;
+  switch (format) {
+    case "date":
+      options = {
+        year: "2-digit",
+        month: "2-digit",
+        day: "2-digit"
+      };
+      break;
+    case "time":
+      options = {
+        hour: "2-digit",
+        minute: "2-digit"
+      };
+      break;
+    case "dateTime":
+      options = {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit"
+      };
+      break;
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+var formatRelative = (date, locale) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
+  if (Math.abs(diffInSeconds) < timesInSeconds.minute) return rtf.format(Math.round(diffInSeconds), "second");
+  if (Math.abs(diffInSeconds) < timesInSeconds.hour) return rtf.format(Math.round(diffInSeconds / timesInSeconds.minute), "minute");
+  if (Math.abs(diffInSeconds) < timesInSeconds.day) return rtf.format(Math.round(diffInSeconds / timesInSeconds.hour), "hour");
+  if (Math.abs(diffInSeconds) < timesInSeconds.week) return rtf.format(Math.round(diffInSeconds / timesInSeconds.day), "day");
+  if (Math.abs(diffInSeconds) < timesInSeconds.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.week), "week");
+  if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
+  return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
+};
+var toInputString = (date, format, precision = "minute", isLocalTime = true) => {
+  const pad = (n, l = 2) => String(n).padStart(l, "0");
+  const parts = isLocalTime ? {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    min: date.getMinutes(),
+    s: date.getSeconds(),
+    ms: date.getMilliseconds()
+  } : {
+    y: date.getUTCFullYear(),
+    m: date.getUTCMonth() + 1,
+    d: date.getUTCDate(),
+    h: date.getUTCHours(),
+    min: date.getUTCMinutes(),
+    s: date.getUTCSeconds(),
+    ms: date.getUTCMilliseconds()
+  };
+  const dateStr = `${pad(parts.y, 4)}-${pad(parts.m)}-${pad(parts.d)}`;
+  let timeStr = `${pad(parts.h)}:${pad(parts.min)}`;
+  if (precision === "second" || precision === "millisecond") {
+    timeStr += `:${pad(parts.s)}`;
+  }
+  if (precision === "millisecond") {
+    timeStr += `.${pad(parts.ms, 3)}`;
+  }
+  switch (format) {
+    case "date":
+      return dateStr;
+    case "time":
+      return timeStr;
+    case "dateTime":
+      return `${dateStr}T${timeStr}`;
+  }
+};
+function tryParseDate(dateValue) {
+  if (!dateValue) return null;
+  if (dateValue instanceof Date) return dateValue;
+  if (typeof dateValue === "string" || typeof dateValue === "number") {
+    const parsed = new Date(dateValue);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return null;
+}
+function normalizeToDateOnly(date) {
+  const normalized = new Date(date);
+  normalized.setHours(0, 0, 0, 0);
+  return normalized;
+}
+function normalizeDatetime(dateTime) {
+  const normalized = new Date(dateTime);
+  normalized.setSeconds(0, 0);
+  return normalized;
+}
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  isLastMillisecondOfDay,
+  sameTime,
+  withTime,
+  formatAbsolute,
+  formatRelative,
+  addDuration,
+  subtractDuration,
+  between,
+  weeksForCalenderMonth,
+  timesInSeconds,
+  toInputString,
+  tryParseDate,
+  toOnlyDate: normalizeToDateOnly,
+  /**
+   * Normalizes a datetime by removing seconds and milliseconds.
+   */
+  toDateTimeOnly: normalizeDatetime
+};
+
+// src/components/user-interaction/data/filter-function.ts
 var allowedOperatorsByDataType = {
   text: ["equals", "notEquals", "contains", "notContains", "startsWith", "endsWith", "isUndefined", "isNotUndefined"],
   number: ["equals", "notEquals", "greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual", "between", "notBetween", "isUndefined", "isNotUndefined"],
@@ -15252,7 +14973,7 @@ function tagToLabel(tags, value) {
 function useFilterValueTranslation() {
   const translation = useHightideTranslation();
   const { locale } = useLocale();
-  return (0, import_react79.useCallback)((value, options) => {
+  return (0, import_react69.useCallback)((value, options) => {
     const p = value.parameter;
     const tags = options?.tags;
     const dateFormat = value.dataType === "dateTime" ? "dateTime" : "date";
@@ -15454,9 +15175,9 @@ var TableProvider = ({
 }) => {
   const onRowClickStable = useEventCallbackStabilizer(onRowClick);
   const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
-  const [registeredColumns, setRegisteredColumns] = (0, import_react80.useState)([]);
-  const containerRef = (0, import_react80.useRef)(null);
-  const [, setTableState] = (0, import_react80.useState)({
+  const [registeredColumns, setRegisteredColumns] = (0, import_react70.useState)([]);
+  const containerRef = (0, import_react70.useRef)(null);
+  const [, setTableState] = (0, import_react70.useState)({
     columnSizing: {},
     columnOrder: [],
     columnFilters: [],
@@ -15481,16 +15202,16 @@ var TableProvider = ({
       pageSize: 10
     }
   });
-  const [targetWidth, setTargetWidth] = (0, import_react80.useState)(void 0);
-  (0, import_react80.useLayoutEffect)(() => {
+  const [targetWidth, setTargetWidth] = (0, import_react70.useState)(void 0);
+  (0, import_react70.useLayoutEffect)(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]);
-  useWindowResizeObserver((0, import_react80.useCallback)(() => {
+  useWindowResizeObserver((0, import_react70.useCallback)(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]));
-  const registerColumn = (0, import_react80.useCallback)((column) => {
+  const registerColumn = (0, import_react70.useCallback)((column) => {
     setRegisteredColumns((prev) => {
       return [...prev, column];
     });
@@ -15500,7 +15221,7 @@ var TableProvider = ({
       });
     };
   }, []);
-  const columns = (0, import_react80.useMemo)(() => {
+  const columns = (0, import_react70.useMemo)(() => {
     const contextColumns = Array.from(registeredColumns.values());
     if (columnsProp) {
       return [...contextColumns, ...columnsProp];
@@ -15517,7 +15238,7 @@ var TableProvider = ({
     defaultColumn: {
       minSize: 60,
       maxSize: 800,
-      cell: (0, import_react80.useCallback)(({ cell }) => {
+      cell: (0, import_react70.useCallback)(({ cell }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { children: String(cell.getValue()) });
       }, []),
       enableResizing: true,
@@ -15558,7 +15279,7 @@ var TableProvider = ({
   });
   const pagination = table.getState().pagination;
   const pageCount = table.getPageCount();
-  (0, import_react80.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (pageCount === -1) {
       return;
     }
@@ -15566,20 +15287,20 @@ var TableProvider = ({
       table.setPageIndex(pageCount - 1);
     }
   }, [table, pagination.pageIndex, pageCount]);
-  (0, import_react80.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     table.setColumnOrder((prev) => [...prev]);
   }, [table, columns]);
   const columnVisibility = table.getState().columnVisibility;
   const columnOrder = table.getState().columnOrder;
   const columnPinning = table.getState().columnPinning;
-  (0, import_react80.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     table.setColumnSizing((prev) => ({ ...prev }));
   }, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
-  const tableColumnDefinitionContextValue = (0, import_react80.useMemo)(() => ({
+  const tableColumnDefinitionContextValue = (0, import_react70.useMemo)(() => ({
     table,
     registerColumn
   }), [table, registerColumn]);
-  const tableContainerContextValue = (0, import_react80.useMemo)(() => ({
+  const tableContainerContextValue = (0, import_react70.useMemo)(() => ({
     table,
     containerRef
   }), [table, containerRef]);
@@ -15588,7 +15309,7 @@ var TableProvider = ({
     return rest;
   })();
   const rowModel = table.getRowModel();
-  const tableStateWithoutSizingContextValue = (0, import_react80.useMemo)(() => ({
+  const tableStateWithoutSizingContextValue = (0, import_react70.useMemo)(() => ({
     table,
     isUsingFillerRows,
     fillerRowCell,
@@ -15631,7 +15352,7 @@ var TableProvider = ({
   ]);
   const columnSizing = table.getState().columnSizing;
   const columnSizingInfo = table.getState().columnSizingInfo;
-  const tableStateContextValue = (0, import_react80.useMemo)(() => ({
+  const tableStateContextValue = (0, import_react70.useMemo)(() => ({
     ...tableStateWithoutSizingContextValue,
     sizeVars: ColumnSizeUtil.toSizeVars(columnSizing),
     columnSizingInfo,
@@ -15642,10 +15363,10 @@ var TableProvider = ({
 
 // src/components/layout/table/TableBody.tsx
 var import_react_table2 = require("@tanstack/react-table");
-var import_react81 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var import_clsx20 = __toESM(require("clsx"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var TableBody = import_react81.default.memo(function TableBodyVisual() {
+var TableBody = import_react71.default.memo(function TableBodyVisual() {
   const { table, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick } = useTableStateWithoutSizingContext();
   const rows = table.getRowModel().rows;
   const columnOrder = table.getState().columnOrder;
@@ -15743,16 +15464,16 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 var import_lucide_react21 = require("lucide-react");
-var import_react97 = require("react");
+var import_react88 = require("react");
 var import_react_table3 = require("@tanstack/react-table");
 
 // src/components/user-interaction/data/FilterPopUp.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_react96 = require("react");
+var import_react87 = require("react");
 
 // src/components/user-interaction/Checkbox.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_react82 = require("react");
+var import_react72 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var Checkbox = ({
   value: controlledValue,
@@ -15770,7 +15491,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react82.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react72.useCallback)((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -15814,12 +15535,12 @@ var Checkbox = ({
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_react88 = require("react");
+var import_react78 = require("react");
 var import_lucide_react18 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
-var import_react83 = require("react");
+var import_react73 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var TimePicker = ({
   value: controlledValue,
@@ -15838,11 +15559,11 @@ var TimePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const minuteRef = (0, import_react83.useRef)(null);
-  const hourRef = (0, import_react83.useRef)(null);
+  const minuteRef = (0, import_react73.useRef)(null);
+  const hourRef = (0, import_react73.useRef)(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  const minutes = (0, import_react83.useMemo)(() => {
+  const minutes = (0, import_react73.useMemo)(() => {
     const full = range(60);
     switch (minuteIncrement) {
       case "5min":
@@ -15855,7 +15576,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [minuteIncrement]);
-  const seconds = (0, import_react83.useMemo)(() => {
+  const seconds = (0, import_react73.useMemo)(() => {
     const full = range(60);
     switch (secondIncrement) {
       case "1s":
@@ -15870,7 +15591,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [secondIncrement]);
-  const milliseconds = (0, import_react83.useMemo)(() => {
+  const milliseconds = (0, import_react73.useMemo)(() => {
     const full = range(1e3);
     switch (millisecondIncrement) {
       case "1ms":
@@ -15891,17 +15612,17 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 500 === 0);
     }
   }, [millisecondIncrement]);
-  const closestMinute = (0, import_react83.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
-  const closestSecond = (0, import_react83.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
-  const closestMillisecond = (0, import_react83.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
+  const closestMinute = (0, import_react73.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = (0, import_react73.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = (0, import_react73.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
-  (0, import_react83.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  (0, import_react83.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -16000,12 +15721,12 @@ var TimePicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_react86 = require("react");
+var import_react76 = require("react");
 var import_lucide_react17 = require("lucide-react");
 var import_clsx23 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
-var import_react84 = require("react");
+var import_react74 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
@@ -16034,33 +15755,33 @@ var DayPicker = ({
   });
   const month = displayedMonth.getMonth();
   const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
-  const selectedButtonRef = (0, import_react84.useRef)(null);
-  const isValueInDisplayedWeeks = (0, import_react84.useMemo)(
+  const selectedButtonRef = (0, import_react74.useRef)(null);
+  const isValueInDisplayedWeeks = (0, import_react74.useMemo)(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = (0, import_react84.useCallback)(
+  const firstDayOfMonth = (0, import_react74.useCallback)(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
   const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
-  const end = (0, import_react84.useMemo)(() => {
+  const end = (0, import_react74.useMemo)(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = (0, import_react84.useMemo)(() => {
+  const start = (0, import_react74.useMemo)(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = (0, import_react84.useCallback)((date) => {
+  const clampToRange = (0, import_react74.useCallback)((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = (0, import_react84.useCallback)((candidate) => {
+  const navigateTo = (0, import_react74.useCallback)((candidate) => {
     const clamped = clampToRange(candidate);
     if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
@@ -16069,7 +15790,7 @@ var DayPicker = ({
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = (0, import_react84.useCallback)(
+  const onKeyDown = (0, import_react74.useCallback)(
     (event) => {
       PropsUtil.aria.navigate({
         left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
@@ -16126,10 +15847,10 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-var import_react85 = require("react");
+var import_react75 = require("react");
 var import_clsx22 = __toESM(require("clsx"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var YearRow = (0, import_react85.memo)(function YearRow2({
+var YearRow = (0, import_react75.memo)(function YearRow2({
   year,
   selectedMonthIndex,
   minTimestamp,
@@ -16137,15 +15858,15 @@ var YearRow = (0, import_react85.memo)(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = (0, import_react85.useRef)(null);
+  const ref = (0, import_react75.useRef)(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = (0, import_react85.useState)(false);
-  (0, import_react85.useEffect)(() => {
+  const [isExpanded, setIsExpanded] = (0, import_react75.useState)(false);
+  (0, import_react75.useEffect)(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = (0, import_react85.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  const monthGrid = (0, import_react75.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     ExpandableRoot,
     {
@@ -16200,23 +15921,23 @@ var YearMonthPicker = ({
     defaultValue: initialValue
   });
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const monthNames = (0, import_react85.useMemo)(() => {
+  const monthNames = (0, import_react75.useMemo)(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = (0, import_react85.useMemo)(
+  const years = (0, import_react75.useMemo)(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = (0, import_react85.useMemo)(() => {
+  const minTimestamp = (0, import_react75.useMemo)(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = (0, import_react85.useMemo)(() => {
+  const maxTimestamp = (0, import_react75.useMemo)(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = (0, import_react85.useCallback)((newDate) => {
+  const handleSelect = (0, import_react75.useCallback)((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
@@ -16269,8 +15990,8 @@ var DatePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [displayedMonth, setDisplayedMonth] = (0, import_react86.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = (0, import_react86.useState)(initialDisplay);
+  const [displayedMonth, setDisplayedMonth] = (0, import_react76.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = (0, import_react76.useState)(initialDisplay);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx23.default)("flex-col-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
@@ -16432,7 +16153,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
-var import_react87 = require("react");
+var import_react77 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var DateTimePickerDialog = ({
   initialValue = null,
@@ -16460,8 +16181,8 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [pickerState, setPickerState] = (0, import_react87.useState)(state ?? /* @__PURE__ */ new Date());
-  (0, import_react87.useEffect)(() => {
+  const [pickerState, setPickerState] = (0, import_react77.useState)(state ?? /* @__PURE__ */ new Date());
+  (0, import_react77.useEffect)(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
@@ -16536,7 +16257,7 @@ var DateTimePickerDialog = ({
 
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var DateTimeInput = (0, import_react88.forwardRef)(function DateTimeInput2({
+var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
   id: inputId,
   value,
   initialValue = null,
@@ -16561,40 +16282,41 @@ var DateTimeInput = (0, import_react88.forwardRef)(function DateTimeInput2({
   readOnly = false,
   invalid = false,
   required = false,
+  actions = [],
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = (0, import_react88.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = (0, import_react88.useState)(state);
-  const [stringInputState, setStringInputState] = (0, import_react88.useState)({
+  const [dialogValue, setDialogValue] = (0, import_react78.useState)(state);
+  const [stringInputState, setStringInputState] = (0, import_react78.useState)({
     state: state ? DateUtils.toInputString(state, mode, precision) : "",
     date: void 0
   });
-  (0, import_react88.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     setDialogValue(state);
     setStringInputState({
       state: state ? DateUtils.toInputString(state, mode) : "",
       date: void 0
     });
   }, [mode, state]);
-  const changeOpenWrapper = (0, import_react88.useCallback)((isOpen2) => {
+  const changeOpenWrapper = (0, import_react78.useCallback)((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
-  const generatedId = (0, import_react88.useId)();
-  const ids = (0, import_react88.useMemo)(() => ({
+  const generatedId = (0, import_react78.useId)();
+  const ids = (0, import_react78.useMemo)(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
-  const innerRef = (0, import_react88.useRef)(null);
-  (0, import_react88.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react88.useEffect)(() => {
+  const innerRef = (0, import_react78.useRef)(null);
+  (0, import_react78.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react78.useEffect)(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
@@ -16612,6 +16334,12 @@ var DateTimeInput = (0, import_react88.forwardRef)(function DateTimeInput2({
           ref: innerRef,
           id: ids.input,
           value: stringInputState.state,
+          onClick: (event) => {
+            event.preventDefault();
+          },
+          onFocus: (event) => {
+            event.preventDefault();
+          },
           onChange: (event) => {
             const date = new Date(event.target.value ?? "");
             const isValid = !isNaN(date.getTime());
@@ -16652,24 +16380,26 @@ var DateTimeInput = (0, import_react88.forwardRef)(function DateTimeInput2({
           ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-        IconButton,
-        {
-          tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
-          coloringStyle: "text",
-          color: "neutral",
-          size: "sm",
-          className: "absolute right-1 top-1/2 -translate-y-1/2",
-          disabled,
-          onClick: () => {
-            changeOpenWrapper(true);
-          },
-          "aria-haspopup": "dialog",
-          "aria-expanded": isOpen,
-          "aria-controls": isOpen ? ids.popup : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react18.CalendarIcon, { className: "size-5" })
-        }
-      ) })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex-row-0", children: [
+        actions,
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          IconButton,
+          {
+            tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
+            coloringStyle: "text",
+            color: "neutral",
+            size: "sm",
+            disabled,
+            onClick: () => {
+              changeOpenWrapper(true);
+            },
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-controls": isOpen ? ids.popup : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react18.CalendarIcon, { className: "size-5" })
+          }
+        ) })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       PopUp,
@@ -16720,22 +16450,63 @@ var DateTimeInput = (0, import_react88.forwardRef)(function DateTimeInput2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
-var import_react95 = require("react");
+var import_react86 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-var import_react91 = require("react");
+var import_react82 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
-var import_react89 = require("react");
-var MultiSelectContext = (0, import_react89.createContext)(null);
+var import_react79 = require("react");
+var MultiSelectContext = (0, import_react79.createContext)(null);
 function useMultiSelectContext() {
-  const ctx = (0, import_react89.useContext)(MultiSelectContext);
+  const ctx = (0, import_react79.useContext)(MultiSelectContext);
   if (!ctx) throw new Error("useMultiSelectContext must be used within MultiSelectRoot");
   return ctx;
 }
 
 // src/components/user-interaction/MultiSelect/useMultiSelect.ts
-var import_react90 = require("react");
+var import_react81 = require("react");
+
+// src/hooks/useMultiSelection.ts
+var import_react80 = require("react");
+function useMultiSelection({
+  options: optionsList,
+  value,
+  onSelectionChange,
+  initialSelection = [],
+  isControlled
+}) {
+  const [selection, setSelection] = useControlledState({
+    value,
+    onValueChange: onSelectionChange,
+    defaultValue: [...initialSelection],
+    isControlled
+  });
+  const isSelected = (0, import_react80.useCallback)((id) => selection.includes(id), [selection]);
+  const toggleSelection = (0, import_react80.useCallback)(
+    (id) => {
+      const option = optionsList.find((o) => o.id === id);
+      if (!option || option.disabled) return;
+      setSelection((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]);
+    },
+    [optionsList, setSelection]
+  );
+  const setSelectionValue = (0, import_react80.useCallback)(
+    (next) => setSelection(Array.from(next)),
+    [setSelection]
+  );
+  return (0, import_react80.useMemo)(
+    () => ({
+      selection,
+      setSelection: setSelectionValue,
+      toggleSelection,
+      isSelected
+    }),
+    [selection, setSelectionValue, toggleSelection, isSelected]
+  );
+}
+
+// src/components/user-interaction/MultiSelect/useMultiSelect.ts
 function useMultiSelect({
   options,
   value: controlledValue,
@@ -16746,9 +16517,9 @@ function useMultiSelect({
   initialIsOpen = false,
   typeAheadResetMs = 500
 }) {
-  const [isOpen, setIsOpen] = (0, import_react90.useState)(initialIsOpen);
-  const [searchQuery, setSearchQuery] = (0, import_react90.useState)("");
-  const selectionOptions = (0, import_react90.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react81.useState)(initialIsOpen);
+  const [searchQuery, setSearchQuery] = (0, import_react81.useState)("");
+  const selectionOptions = (0, import_react81.useMemo)(
     () => options.map((o) => ({ id: o.id, disabled: o.disabled })),
     [options]
   );
@@ -16764,13 +16535,13 @@ function useMultiSelect({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery,
-    toTags: (0, import_react90.useCallback)((o) => [o.label ?? ""], [])
+    toTags: (0, import_react81.useCallback)((o) => [o.label ?? ""], [])
   });
-  const visibleOptionIds = (0, import_react90.useMemo)(
+  const visibleOptionIds = (0, import_react81.useMemo)(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptions = (0, import_react90.useMemo)(
+  const enabledOptions = (0, import_react81.useMemo)(
     () => visibleOptions.filter((o) => !o.disabled),
     [visibleOptions]
   );
@@ -16783,7 +16554,7 @@ function useMultiSelect({
     options: enabledOptions,
     resetTimer: typeAheadResetMs,
     toString: (o) => o.label ?? "",
-    onResultChange: (0, import_react90.useCallback)(
+    onResultChange: (0, import_react81.useCallback)(
       (option) => {
         if (option) listNav.highlight(option.id);
       },
@@ -16791,14 +16562,14 @@ function useMultiSelect({
     )
   });
   const { reset: typeAheadReset, addToTypeAhead } = typeAhead;
-  (0, import_react90.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
-  const highlightItem = (0, import_react90.useCallback)((id) => {
+  const highlightItem = (0, import_react81.useCallback)((id) => {
     if (!enabledOptions.some((o) => o.id === id)) return;
     listNavHighlight(id);
   }, [enabledOptions, listNavHighlight]);
-  const toggleSelectionValue = (0, import_react90.useCallback)((id, newIsSelected) => {
+  const toggleSelectionValue = (0, import_react81.useCallback)((id, newIsSelected) => {
     const next = newIsSelected ?? !isSelected(id);
     if (next) {
       toggleSelection(id);
@@ -16807,7 +16578,7 @@ function useMultiSelect({
     }
     highlightItem(id);
   }, [toggleSelection, setSelection, highlightItem, isSelected, selection]);
-  const setIsOpenWrapper = (0, import_react90.useCallback)(
+  const setIsOpenWrapper = (0, import_react81.useCallback)(
     (open, behavior) => {
       setIsOpen(open);
       behavior = behavior ?? "first";
@@ -16838,13 +16609,13 @@ function useMultiSelect({
       enabledOptions
     ]
   );
-  const toggleOpenWrapper = (0, import_react90.useCallback)(
+  const toggleOpenWrapper = (0, import_react81.useCallback)(
     (behavior) => {
       setIsOpenWrapper(!isOpen, behavior);
     },
     [isOpen, setIsOpenWrapper]
   );
-  const state = (0, import_react90.useMemo)(
+  const state = (0, import_react81.useMemo)(
     () => ({
       value: [...selection],
       highlightedId: listNav.highlightedId,
@@ -16860,11 +16631,11 @@ function useMultiSelect({
       options
     ]
   );
-  const computedState = (0, import_react90.useMemo)(
+  const computedState = (0, import_react81.useMemo)(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = (0, import_react90.useMemo)(
+  const actions = (0, import_react81.useMemo)(
     () => ({
       setIsOpen: setIsOpenWrapper,
       toggleOpen: toggleOpenWrapper,
@@ -16893,7 +16664,7 @@ function useMultiSelect({
       addToTypeAhead
     ]
   );
-  return (0, import_react90.useMemo)(
+  return (0, import_react81.useMemo)(
     () => ({
       ...state,
       ...computedState,
@@ -16921,16 +16692,16 @@ function MultiSelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = (0, import_react91.useState)(null);
-  const [options, setOptions] = (0, import_react91.useState)([]);
-  const generatedId = (0, import_react91.useId)();
-  const [ids, setIds] = (0, import_react91.useState)({
+  const [triggerRef, setTriggerRef] = (0, import_react82.useState)(null);
+  const [options, setOptions] = (0, import_react82.useState)([]);
+  const generatedId = (0, import_react82.useId)();
+  const [ids, setIds] = (0, import_react82.useState)({
     trigger: "multi-select-" + generatedId,
     content: "multi-select-content-" + generatedId,
     listbox: "multi-select-listbox-" + generatedId,
     searchInput: "multi-select-search-" + generatedId
   });
-  const registerOption = (0, import_react91.useCallback)((item) => {
+  const registerOption = (0, import_react82.useCallback)((item) => {
     setOptions((prev) => {
       const next = prev.filter((o) => o.id !== item.id);
       next.push(item);
@@ -16939,12 +16710,12 @@ function MultiSelectRoot({
     });
     return () => setOptions((prev) => prev.filter((o) => o.id !== item.id));
   }, []);
-  const registerTrigger = (0, import_react91.useCallback)((ref) => {
+  const registerTrigger = (0, import_react82.useCallback)((ref) => {
     setTriggerRef(ref);
     return () => setTriggerRef(null);
   }, []);
-  const compare = (0, import_react91.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
-  const idToOptionMap = (0, import_react91.useMemo)(
+  const compare = (0, import_react82.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
+  const idToOptionMap = (0, import_react82.useMemo)(
     () => options.reduce(
       (acc, o) => {
         acc[o.id] = o;
@@ -16954,22 +16725,22 @@ function MultiSelectRoot({
     ),
     [options]
   );
-  const mappedValueIds = (0, import_react91.useMemo)(() => {
+  const mappedValueIds = (0, import_react82.useMemo)(() => {
     if (value == null) return void 0;
     return value.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, value, compare]);
-  const mappedInitialValueIds = (0, import_react91.useMemo)(() => {
+  const mappedInitialValueIds = (0, import_react82.useMemo)(() => {
     if (initialValue == null) return [];
     return initialValue.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, initialValue, compare]);
-  const onValueChangeStable = (0, import_react91.useCallback)(
+  const onValueChangeStable = (0, import_react82.useCallback)(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onValueChange?.(values);
     },
     [idToOptionMap, onValueChange]
   );
-  const onEditCompleteStable = (0, import_react91.useCallback)(
+  const onEditCompleteStable = (0, import_react82.useCallback)(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onEditComplete?.(values);
@@ -16986,12 +16757,12 @@ function MultiSelectRoot({
     onClose
   });
   const { setSearchQuery } = state;
-  (0, import_react91.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (showSearch === false) {
       setSearchQuery("");
     }
   }, [showSearch, setSearchQuery]);
-  const contextValue = (0, import_react91.useMemo)(() => {
+  const contextValue = (0, import_react82.useMemo)(() => {
     const valueT = state.value.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
     return {
       invalid,
@@ -17062,16 +16833,16 @@ function MultiSelectRoot({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-var import_react93 = require("react");
+var import_react84 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
 var import_clsx25 = __toESM(require("clsx"));
 var import_lucide_react19 = require("lucide-react");
-var import_react92 = require("react");
+var import_react83 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
-var MultiSelectOptionDisplayContext = (0, import_react92.createContext)(null);
+var MultiSelectOptionDisplayContext = (0, import_react83.createContext)(null);
 function useMultiSelectOptionDisplayLocation() {
-  const context = (0, import_react92.useContext)(MultiSelectOptionDisplayContext);
+  const context = (0, import_react83.useContext)(MultiSelectOptionDisplayContext);
   if (!context) {
     throw new Error(
       "useMultiSelectOptionDisplayLocation must be used within a MultiSelectOptionDisplayContext"
@@ -17079,7 +16850,7 @@ function useMultiSelectOptionDisplayLocation() {
   }
   return context;
 }
-var MultiSelectOption = (0, import_react92.forwardRef)(function MultiSelectOption2({
+var MultiSelectOption = (0, import_react83.forwardRef)(function MultiSelectOption2({
   children,
   label,
   value,
@@ -17089,12 +16860,12 @@ var MultiSelectOption = (0, import_react92.forwardRef)(function MultiSelectOptio
 }, ref) {
   const context = useMultiSelectContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react92.useRef)(null);
+  const itemRef = (0, import_react83.useRef)(null);
   const display = children ?? label;
   const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
-  const generatedId = (0, import_react92.useId)();
+  const generatedId = (0, import_react83.useId)();
   const optionId = props?.id ?? "multi-select-option-" + generatedId;
-  (0, import_react92.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -17162,7 +16933,7 @@ var MultiSelectOption = (0, import_react92.forwardRef)(function MultiSelectOptio
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
 var import_jsx_runtime72 = require("react/jsx-runtime");
-var MultiSelectButton = (0, import_react93.forwardRef)(function MultiSelectButton2({
+var MultiSelectButton = (0, import_react84.forwardRef)(function MultiSelectButton2({
   id,
   placeholder,
   disabled: disabledOverride,
@@ -17175,12 +16946,12 @@ var MultiSelectButton = (0, import_react93.forwardRef)(function MultiSelectButto
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  (0, import_react93.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = (0, import_react93.useRef)(null);
-  (0, import_react93.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react93.useEffect)(() => {
+  const innerRef = (0, import_react84.useRef)(null);
+  (0, import_react84.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react84.useEffect)(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -17243,23 +17014,23 @@ var MultiSelectButton = (0, import_react93.forwardRef)(function MultiSelectButto
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-var import_react94 = require("react");
+var import_react85 = require("react");
 var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var MultiSelectContent = (0, import_react94.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
+var MultiSelectContent = (0, import_react85.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = (0, import_react94.useRef)(null);
-  const searchInputRef = (0, import_react94.useRef)(null);
-  (0, import_react94.useImperativeHandle)(ref, () => innerRef.current);
+  const innerRef = (0, import_react85.useRef)(null);
+  const searchInputRef = (0, import_react85.useRef)(null);
+  (0, import_react85.useImperativeHandle)(ref, () => innerRef.current);
   const context = useMultiSelectContext();
   const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
   const { setIds } = config;
-  (0, import_react94.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = (0, import_react94.useCallback)(
+  const keyHandler = (0, import_react85.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -17373,7 +17144,7 @@ var MultiSelectContent = (0, import_react94.forwardRef)(function MultiSelectCont
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react95.forwardRef)(
+var MultiSelect = (0, import_react86.forwardRef)(
   function MultiSelect2({ children, contentPanelProps, buttonProps, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(MultiSelectRoot, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(MultiSelectButton, { ref, ...buttonProps }),
@@ -17399,14 +17170,13 @@ var FilterOperatorLabel = ({ operator }) => {
 
 // src/components/user-interaction/data/FilterPopUp.tsx
 var import_jsx_runtime76 = require("react/jsx-runtime");
-var FilterBasePopUp = (0, import_react96.forwardRef)(function FilterBasePopUp2({
+var FilterBasePopUp = (0, import_react87.forwardRef)(function FilterBasePopUp2({
   children,
   name,
   operator,
   onOperatorChange,
   onRemove,
   allowedOperators,
-  hasValue,
   noParameterRequired = false,
   ...props
 }, ref) {
@@ -17436,28 +17206,30 @@ var FilterBasePopUp = (0, import_react96.forwardRef)(function FilterBasePopUp2({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: hasValue, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-            IconButton,
-            {
-              tooltip: translation("removeFilter"),
-              onClick: onRemove,
-              color: "negative",
-              coloringStyle: "text",
-              size: "sm",
-              children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.TrashIcon, { className: "size-4" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: !hasValue, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-            IconButton,
-            {
-              tooltip: translation("close"),
-              onClick: props.onClose,
-              color: "neutral",
-              coloringStyle: "text",
-              size: "sm",
-              children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.XIcon, { className: "size-4" })
-            }
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-0 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              IconButton,
+              {
+                tooltip: translation("removeFilter"),
+                onClick: onRemove,
+                color: "negative",
+                coloringStyle: "text",
+                size: "sm",
+                children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.TrashIcon, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              IconButton,
+              {
+                tooltip: translation("close"),
+                onClick: props.onClose,
+                color: "neutral",
+                coloringStyle: "text",
+                size: "sm",
+                children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react20.XIcon, { className: "size-4" })
+              }
+            )
+          ] })
         ] }),
         children,
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: noParameterRequired, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex-row-0 items-center text-sm text-description h-element-sm", children: translation("noParameterRequired") }) })
@@ -17465,7 +17237,7 @@ var FilterBasePopUp = (0, import_react96.forwardRef)(function FilterBasePopUp2({
     }
   );
 });
-var TextFilterPopUp = (0, import_react96.forwardRef)(function TextFilterPopUp2({
+var TextFilterPopUp = (0, import_react87.forwardRef)(function TextFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17473,12 +17245,12 @@ var TextFilterPopUp = (0, import_react96.forwardRef)(function TextFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react96.useId)();
+  const id = (0, import_react87.useId)();
   const ids = {
     search: `text-filter-search-${id}`,
     caseSensitive: `text-filter-case-sensitive-${id}`
   };
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.text(suggestion)) {
       return "contains";
@@ -17497,7 +17269,6 @@ var TextFilterPopUp = (0, import_react96.forwardRef)(function TextFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "text", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.text,
-      hasValue: !!value,
       noParameterRequired: !needsParameterInput,
       children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: needsParameterInput, children: [
         /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-1", children: [
@@ -17540,7 +17311,7 @@ var TextFilterPopUp = (0, import_react96.forwardRef)(function TextFilterPopUp2({
     }
   );
 });
-var NumberFilterPopUp = (0, import_react96.forwardRef)(function NumberFilterPopUp2({
+var NumberFilterPopUp = (0, import_react87.forwardRef)(function NumberFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17548,13 +17319,13 @@ var NumberFilterPopUp = (0, import_react96.forwardRef)(function NumberFilterPopU
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react96.useId)();
+  const id = (0, import_react87.useId)();
   const ids = {
     min: `number-filter-min-${id}`,
     max: `number-filter-max-${id}`,
     compareValue: `number-filter-compare-value-${id}`
   };
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.number(suggestion)) {
       return "between";
@@ -17576,7 +17347,6 @@ var NumberFilterPopUp = (0, import_react96.forwardRef)(function NumberFilterPopU
       },
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.number,
-      hasValue: !!value,
       noParameterRequired: !needsParameterInput,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: needsRangeInput, children: [
@@ -17644,7 +17414,7 @@ var NumberFilterPopUp = (0, import_react96.forwardRef)(function NumberFilterPopU
     }
   );
 });
-var DateFilterPopUp = (0, import_react96.forwardRef)(function DateFilterPopUp2({
+var DateFilterPopUp = (0, import_react87.forwardRef)(function DateFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17652,13 +17422,13 @@ var DateFilterPopUp = (0, import_react96.forwardRef)(function DateFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react96.useId)();
+  const id = (0, import_react87.useId)();
   const ids = {
     startDate: `date-filter-start-date-${id}`,
     endDate: `date-filter-end-date-${id}`,
     compareDate: `date-filter-compare-date-${id}`
   };
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.date(suggestion)) {
       return "between";
@@ -17666,8 +17436,8 @@ var DateFilterPopUp = (0, import_react96.forwardRef)(function DateFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react96.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react96.useState)(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react87.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react87.useState)(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
@@ -17680,7 +17450,6 @@ var DateFilterPopUp = (0, import_react96.forwardRef)(function DateFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "date", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.date,
-      hasValue: !!value,
       noParameterRequired: !needsParameterInput,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Visibility, { isVisible: needsRangeInput, children: [
@@ -17787,7 +17556,7 @@ var DateFilterPopUp = (0, import_react96.forwardRef)(function DateFilterPopUp2({
     }
   );
 });
-var DatetimeFilterPopUp = (0, import_react96.forwardRef)(function DatetimeFilterPopUp2({
+var DatetimeFilterPopUp = (0, import_react87.forwardRef)(function DatetimeFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17795,13 +17564,13 @@ var DatetimeFilterPopUp = (0, import_react96.forwardRef)(function DatetimeFilter
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react96.useId)();
+  const id = (0, import_react87.useId)();
   const ids = {
     startDate: `datetime-filter-start-date-${id}`,
     endDate: `datetime-filter-end-date-${id}`,
     compareDate: `datetime-filter-compare-date-${id}`
   };
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.datetime(suggestion)) {
       return "between";
@@ -17809,8 +17578,8 @@ var DatetimeFilterPopUp = (0, import_react96.forwardRef)(function DatetimeFilter
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react96.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react96.useState)(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react87.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react87.useState)(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
@@ -17823,7 +17592,6 @@ var DatetimeFilterPopUp = (0, import_react96.forwardRef)(function DatetimeFilter
       onOperatorChange: (newOperator) => onValueChange({ dataType: "dateTime", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.dateTime,
-      hasValue: !!value,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-col-2 gap-2", children: [
@@ -17930,14 +17698,14 @@ var DatetimeFilterPopUp = (0, import_react96.forwardRef)(function DatetimeFilter
     }
   );
 });
-var BooleanFilterPopUp = (0, import_react96.forwardRef)(function BooleanFilterPopUp2({
+var BooleanFilterPopUp = (0, import_react87.forwardRef)(function BooleanFilterPopUp2({
   name,
   value,
   onValueChange,
   onRemove,
   ...props
 }, ref) {
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "isTrue";
     if (!FilterOperatorUtils.typeCheck.boolean(suggestion)) {
       return "isTrue";
@@ -17954,12 +17722,11 @@ var BooleanFilterPopUp = (0, import_react96.forwardRef)(function BooleanFilterPo
       operator,
       onOperatorChange: (newOperator) => onValueChange({ dataType: "boolean", parameter, operator: newOperator }),
       onRemove,
-      allowedOperators: FilterOperatorUtils.operatorsByCategory.boolean,
-      hasValue: !!value
+      allowedOperators: FilterOperatorUtils.operatorsByCategory.boolean
     }
   );
 });
-var TagsFilterPopUp = (0, import_react96.forwardRef)(function TagsFilterPopUp2({
+var TagsFilterPopUp = (0, import_react87.forwardRef)(function TagsFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -17968,7 +17735,7 @@ var TagsFilterPopUp = (0, import_react96.forwardRef)(function TagsFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tags(suggestion)) {
       return "contains";
@@ -17991,7 +17758,6 @@ var TagsFilterPopUp = (0, import_react96.forwardRef)(function TagsFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "multiTags", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.multiTags,
-      hasValue: !!value,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
@@ -18014,7 +17780,7 @@ var TagsFilterPopUp = (0, import_react96.forwardRef)(function TagsFilterPopUp2({
     }
   );
 });
-var TagsSingleFilterPopUp = (0, import_react96.forwardRef)(function TagsSingleFilterPopUp2({
+var TagsSingleFilterPopUp = (0, import_react87.forwardRef)(function TagsSingleFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -18023,7 +17789,7 @@ var TagsSingleFilterPopUp = (0, import_react96.forwardRef)(function TagsSingleFi
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = (0, import_react96.useMemo)(() => {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
       return "contains";
@@ -18048,7 +17814,6 @@ var TagsSingleFilterPopUp = (0, import_react96.forwardRef)(function TagsSingleFi
       onOperatorChange: (newOperator) => onValueChange({ dataType: "singleTag", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.singleTag,
-      hasValue: !!value,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
         /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
@@ -18086,8 +17851,8 @@ var TagsSingleFilterPopUp = (0, import_react96.forwardRef)(function TagsSingleFi
     }
   );
 });
-var GenericFilterPopUp = (0, import_react96.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
-  const operator = (0, import_react96.useMemo)(() => {
+var GenericFilterPopUp = (0, import_react87.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
+  const operator = (0, import_react87.useMemo)(() => {
     const suggestion = value?.operator ?? "isNotUndefined";
     if (!FilterOperatorUtils.typeCheck.unknownType(suggestion)) {
       return "isNotUndefined";
@@ -18103,12 +17868,11 @@ var GenericFilterPopUp = (0, import_react96.forwardRef)(function GenericFilterPo
       operator,
       onOperatorChange: (newOperator) => onValueChange({ ...value, operator: newOperator }),
       onRemove: () => onValueChange({ ...value, operator: void 0 }),
-      allowedOperators: FilterOperatorUtils.operatorsByCategory.unknownType,
-      hasValue: !!value
+      allowedOperators: FilterOperatorUtils.operatorsByCategory.unknownType
     }
   );
 });
-var FilterPopUp = (0, import_react96.forwardRef)(function FilterPopUp2({
+var FilterPopUp = (0, import_react87.forwardRef)(function FilterPopUp2({
   name,
   value,
   onValueChange,
@@ -18145,18 +17909,18 @@ var TableFilterButton = ({
   const translation = useHightideTranslation();
   const column = header.column;
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react97.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react88.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = (0, import_react97.useRef)(null);
-  const containerRef = (0, import_react97.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react97.useState)(false);
-  const id = (0, import_react97.useId)();
-  const ids = (0, import_react97.useMemo)(() => ({
+  const anchorRef = (0, import_react88.useRef)(null);
+  const containerRef = (0, import_react88.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react88.useState)(false);
+  const id = (0, import_react88.useId)();
+  const ids = (0, import_react88.useMemo)(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -18217,7 +17981,7 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-var import_react98 = require("react");
+var import_react89 = require("react");
 
 // src/components/user-interaction/data/data-types.tsx
 var import_lucide_react22 = require("lucide-react");
@@ -18281,7 +18045,7 @@ var DataTypeUtils = {
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = (0, import_react98.useCallback)((e) => {
+  const handleResizeMove = (0, import_react89.useCallback)((e) => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
     const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
@@ -18297,7 +18061,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = (0, import_react98.useCallback)(() => {
+  const handleResizeEnd = (0, import_react89.useCallback)(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -18315,7 +18079,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -18344,7 +18108,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: (0, import_clsx28.default)("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-row-1 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-row-1 items-center truncate", children: [
               /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 TableSortButton,
                 {
@@ -18484,7 +18248,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-var import_react99 = require("react");
+var import_react90 = require("react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var TableWithSelectionProvider = ({
   children,
@@ -18497,7 +18261,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = (0, import_react99.useMemo)(() => [
+  const columnDef = (0, import_react90.useMemo)(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -18540,7 +18304,7 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRowCell: (0, import_react99.useCallback)((columnId, table) => {
+      fillerRowCell: (0, import_react90.useCallback)((columnId, table) => {
         if (columnId === selectionRowId) {
           return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Checkbox, { value: false, disabled: true });
         }
@@ -18558,7 +18322,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: (0, import_react99.useCallback)((row, table) => {
+      onRowClick: (0, import_react90.useCallback)((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -18600,7 +18364,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-var import_react100 = require("react");
+var import_react91 = require("react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var TableColumnComponent = ({
   filterType,
@@ -18612,11 +18376,11 @@ var TableColumnComponent = ({
     "TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
     (filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
   );
-  const [column] = (0, import_react100.useState)({
+  const [column] = (0, import_react91.useState)({
     ...props,
     filterFn
   });
-  (0, import_react100.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -18624,34 +18388,36 @@ var TableColumnComponent = ({
   }, [registerColumn, column]);
   return null;
 };
-var TableColumnFactory = () => (0, import_react100.memo)(
+var TableColumnFactory = () => (0, import_react91.memo)(
   TableColumnComponent,
   (prevProps, nextProps) => {
     return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta, prevProps.cell === nextProps.cell;
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = (0, import_react100.useMemo)(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = (0, import_react91.useMemo)(() => TableColumnFactory(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-var import_react101 = require("react");
+var import_react92 = require("react");
 var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = (0, import_react101.useRef)(null);
-  const generatedId = (0, import_react101.useId)();
-  const ids = (0, import_react101.useMemo)(() => ({
+  const containerRef = (0, import_react92.useRef)(null);
+  const generatedId = (0, import_react92.useId)();
+  const ids = (0, import_react92.useMemo)(() => ({
     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;
-  const columns = (0, import_react101.useMemo)(() => {
+  const columns = (0, import_react92.useMemo)(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -18852,7 +18618,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -18864,8 +18630,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
                   children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.EyeOff, { className: "size-4" })
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -18883,7 +18649,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
                   children: !isPinned ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Pin, { className: "size-4" })
                 }
-              )
+              ) })
             ] })
           ] }, columnId);
         }) })
@@ -18901,7 +18667,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.ArrowLeftRightIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Columns3Cog, { className: "size-5" })
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableColumnSwitcherPopUp, { ...props })
@@ -18909,16 +18675,16 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 };
 
 // src/components/user-interaction/Combobox/Combobox.tsx
-var import_react107 = require("react");
+var import_react98 = require("react");
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-var import_react104 = require("react");
+var import_react95 = require("react");
 
 // src/components/user-interaction/Combobox/ComboboxContext.tsx
-var import_react102 = require("react");
-var ComboboxContext = (0, import_react102.createContext)(null);
+var import_react93 = require("react");
+var ComboboxContext = (0, import_react93.createContext)(null);
 function useComboboxContext() {
-  const ctx = (0, import_react102.useContext)(ComboboxContext);
+  const ctx = (0, import_react93.useContext)(ComboboxContext);
   if (ctx == null) {
     throw new Error("useComboboxContext must be used within ComboboxRoot");
   }
@@ -18926,7 +18692,7 @@ function useComboboxContext() {
 }
 
 // src/components/user-interaction/Combobox/useCombobox.ts
-var import_react103 = require("react");
+var import_react94 = require("react");
 function useCombobox({
   options,
   searchQuery: controlledSearchQuery,
@@ -18941,36 +18707,36 @@ function useCombobox({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery: searchQuery ?? "",
-    toTags: (0, import_react103.useCallback)((o) => [o.label], [])
+    toTags: (0, import_react94.useCallback)((o) => [o.label], [])
   });
-  const visibleOptionIds = (0, import_react103.useMemo)(
+  const visibleOptionIds = (0, import_react94.useMemo)(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptionIds = (0, import_react103.useMemo)(
+  const enabledOptionIds = (0, import_react94.useMemo)(
     () => visibleOptions.filter((o) => !o.disabled).map((o) => o.id),
     [visibleOptions]
   );
   const listNav = useListNavigation({ options: enabledOptionIds });
-  const highlightItem = (0, import_react103.useCallback)(
+  const highlightItem = (0, import_react94.useCallback)(
     (id) => {
       if (!enabledOptionIds.includes(id)) return;
       listNav.highlight(id);
     },
     [enabledOptionIds, listNav]
   );
-  const state = (0, import_react103.useMemo)(
+  const state = (0, import_react94.useMemo)(
     () => ({
       searchQuery: searchQuery ?? "",
       highlightedId: listNav.highlightedId
     }),
     [searchQuery, listNav.highlightedId]
   );
-  const computedState = (0, import_react103.useMemo)(
+  const computedState = (0, import_react94.useMemo)(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = (0, import_react103.useMemo)(
+  const actions = (0, import_react94.useMemo)(
     () => ({
       setSearchQuery,
       highlightFirst: listNav.first,
@@ -18981,7 +18747,7 @@ function useCombobox({
     }),
     [setSearchQuery, listNav.first, listNav.last, listNav.next, listNav.previous, highlightItem]
   );
-  return (0, import_react103.useMemo)(
+  return (0, import_react94.useMemo)(
     () => ({
       ...state,
       ...computedState,
@@ -18998,14 +18764,14 @@ function ComboboxRoot({
   onItemClick,
   ...hookProps
 }) {
-  const [options, setOptions] = (0, import_react104.useState)([]);
-  const [listRef, setListRef] = (0, import_react104.useState)(null);
-  const generatedId = (0, import_react104.useId)();
-  const [ids, setIds] = (0, import_react104.useState)({
+  const [options, setOptions] = (0, import_react95.useState)([]);
+  const [listRef, setListRef] = (0, import_react95.useState)(null);
+  const generatedId = (0, import_react95.useId)();
+  const [ids, setIds] = (0, import_react95.useState)({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`
   });
-  const registerOption = (0, import_react104.useCallback)(
+  const registerOption = (0, import_react95.useCallback)(
     (option) => {
       setOptions((prev) => {
         const next = prev.filter((o) => o.id !== option.id);
@@ -19017,11 +18783,11 @@ function ComboboxRoot({
     },
     []
   );
-  const registerList = (0, import_react104.useCallback)((ref) => {
+  const registerList = (0, import_react95.useCallback)((ref) => {
     setListRef(() => ref);
     return () => setListRef(null);
   }, []);
-  const hookOptions = (0, import_react104.useMemo)(
+  const hookOptions = (0, import_react95.useMemo)(
     () => options.map((o) => ({
       id: o.id,
       label: o.label,
@@ -19030,38 +18796,38 @@ function ComboboxRoot({
     [options]
   );
   const state = useCombobox({ ...hookProps, options: hookOptions });
-  const idToOptionMap = (0, import_react104.useMemo)(() => {
+  const idToOptionMap = (0, import_react95.useMemo)(() => {
     return options.reduce((acc, o) => {
       acc[o.id] = o;
       return acc;
     }, {});
   }, [options]);
-  const selectOption = (0, import_react104.useCallback)(
+  const selectOption = (0, import_react95.useCallback)(
     (id) => {
       const option = idToOptionMap[id];
       if (option) onItemClick?.(option.value);
     },
     [idToOptionMap, onItemClick]
   );
-  const config = (0, import_react104.useMemo)(
+  const config = (0, import_react95.useMemo)(
     () => ({ ids, setIds }),
     [ids, setIds]
   );
-  const layout = (0, import_react104.useMemo)(
+  const layout = (0, import_react95.useMemo)(
     () => ({
       listRef: listRef ?? { current: null },
       registerList
     }),
     [listRef, registerList]
   );
-  const search = (0, import_react104.useMemo)(
+  const search = (0, import_react95.useMemo)(
     () => ({
       searchQuery: state.searchQuery,
       setSearchQuery: state.setSearchQuery
     }),
     [state.searchQuery, state.setSearchQuery]
   );
-  const contextValue = (0, import_react104.useMemo)(
+  const contextValue = (0, import_react95.useMemo)(
     () => ({
       highlightedId: state.highlightedId,
       options,
@@ -19099,14 +18865,14 @@ function ComboboxRoot({
 }
 
 // src/components/user-interaction/Combobox/ComboboxInput.tsx
-var import_react105 = require("react");
+var import_react96 = require("react");
 var import_jsx_runtime87 = require("react/jsx-runtime");
-var ComboboxInput = (0, import_react105.forwardRef)(
+var ComboboxInput = (0, import_react96.forwardRef)(
   function ComboboxInput2(props, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, selectOption } = context;
-    const handleKeyDown = (0, import_react105.useCallback)(
+    const handleKeyDown = (0, import_react96.useCallback)(
       (event) => {
         props.onKeyDown?.(event);
         switch (event.key) {
@@ -19158,17 +18924,17 @@ var ComboboxInput = (0, import_react105.forwardRef)(
 );
 
 // src/components/user-interaction/Combobox/ComboboxList.tsx
-var import_react106 = require("react");
+var import_react97 = require("react");
 var import_clsx31 = __toESM(require("clsx"));
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var ComboboxList = (0, import_react106.forwardRef)(
+var ComboboxList = (0, import_react97.forwardRef)(
   function ComboboxList2({ children, ...props }, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { layout } = context;
     const { registerList } = layout;
-    const innerRef = (0, import_react106.useRef)(null);
-    (0, import_react106.useEffect)(() => {
+    const innerRef = (0, import_react97.useRef)(null);
+    (0, import_react97.useEffect)(() => {
       return registerList(innerRef);
     }, [registerList]);
     const setRefs = (node) => {
@@ -19210,7 +18976,7 @@ var ComboboxList = (0, import_react106.forwardRef)(
 
 // src/components/user-interaction/Combobox/Combobox.tsx
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var Combobox = (0, import_react107.forwardRef)(function Combobox2({
+var Combobox = (0, import_react98.forwardRef)(function Combobox2({
   children,
   onItemClick,
   searchQuery,
@@ -19235,10 +19001,10 @@ var Combobox = (0, import_react107.forwardRef)(function Combobox2({
 });
 
 // src/components/user-interaction/Combobox/ComboboxOption.tsx
-var import_react108 = require("react");
+var import_react99 = require("react");
 var import_clsx32 = __toESM(require("clsx"));
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
+var ComboboxOption = (0, import_react99.forwardRef)(function ComboboxOption2({
   children,
   value,
   label,
@@ -19249,11 +19015,11 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
 }, ref) {
   const context = useComboboxContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react108.useRef)(null);
-  const generatedId = (0, import_react108.useId)();
+  const itemRef = (0, import_react99.useRef)(null);
+  const generatedId = (0, import_react99.useId)();
   const optionId = idProp ?? `combobox-option-${generatedId}`;
   const resolvedDisplay = children ?? label;
-  (0, import_react108.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -19263,7 +19029,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
       ref: itemRef
     });
   }, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
-  (0, import_react108.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     if (context.highlightedId === optionId) {
       itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
     }
@@ -19309,7 +19075,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
 ComboboxOption.displayName = "ComboboxOption";
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-var import_react109 = require("react");
+var import_react100 = require("react");
 var import_clsx33 = require("clsx");
 
 // src/utils/writeToClipboard.ts
@@ -19332,7 +19098,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react109.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react100.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     TooltipRoot,
     {
@@ -19381,7 +19147,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-var import_react110 = require("react");
+var import_react101 = require("react");
 var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var MenuItem = ({
@@ -19407,8 +19173,8 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = (0, import_react110.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react110.useState)(false);
+  const triggerRef = (0, import_react101.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react101.useState)(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -19416,7 +19182,7 @@ var Menu = ({
     disabled
   };
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-    trigger(bag, (0, import_react110.useCallback)((el) => triggerRef.current = el, [])),
+    trigger(bag, (0, import_react101.useCallback)((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       PopUp,
       {
@@ -19438,21 +19204,21 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-var import_react111 = require("react");
+var import_react102 = require("react");
 var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var MultiSelectChipDisplayButton = (0, import_react111.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
+var MultiSelectChipDisplayButton = (0, import_react102.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
   const translation = useHightideTranslation();
   const context = useMultiSelectContext();
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  (0, import_react111.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = (0, import_react111.useRef)(null);
-  (0, import_react111.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react111.useEffect)(() => {
+  const innerRef = (0, import_react102.useRef)(null);
+  (0, import_react102.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react102.useEffect)(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -19527,7 +19293,7 @@ var MultiSelectChipDisplayButton = (0, import_react111.forwardRef)(function Mult
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react111.forwardRef)(
+var MultiSelectChipDisplay = (0, import_react102.forwardRef)(
   function MultiSelectChipDisplay2({
     children,
     contentPanelProps,
@@ -19542,7 +19308,7 @@ var MultiSelectChipDisplay = (0, import_react111.forwardRef)(
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-var import_react112 = require("react");
+var import_react103 = require("react");
 var import_clsx35 = __toESM(require("clsx"));
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var up = 1;
@@ -19563,7 +19329,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react112.useState)({
+  }, setAnimation] = (0, import_react103.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -19579,7 +19345,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react112.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react103.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -19589,7 +19355,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react112.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react103.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -19662,7 +19428,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -19740,7 +19506,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-var import_react113 = require("react");
+var import_react104 = require("react");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var Switch = ({
   value: controlledValue,
@@ -19755,7 +19521,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react113.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react104.useCallback)((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -19795,10 +19561,10 @@ var Switch = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-var import_react114 = require("react");
+var import_react105 = require("react");
 var import_clsx36 = __toESM(require("clsx"));
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var Textarea = (0, import_react114.forwardRef)(function Textarea2({
+var Textarea = (0, import_react105.forwardRef)(function Textarea2({
   value: controlledValue,
   initialValue,
   invalid = false,
@@ -19814,7 +19580,7 @@ var Textarea = (0, import_react114.forwardRef)(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = (0, import_react114.useCallback)((text) => {
+  const onEditCompleteWrapper = (0, import_react105.useCallback)((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
@@ -19852,7 +19618,7 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react114.useId)();
+  const genId = (0, import_react105.useId)();
   const usedId = id ?? genId;
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
     "div",
@@ -19884,20 +19650,20 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/data/FilterList.tsx
-var import_react115 = require("react");
+var import_react106 = require("react");
 var import_lucide_react26 = require("lucide-react");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
-  const activeIds = (0, import_react115.useMemo)(() => value.map((item) => item.id), [value]);
-  const inactiveItems = (0, import_react115.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
-  const itemRecord = (0, import_react115.useMemo)(() => availableItems.reduce((acc, item) => {
+  const activeIds = (0, import_react106.useMemo)(() => value.map((item) => item.id), [value]);
+  const inactiveItems = (0, import_react106.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
+  const itemRecord = (0, import_react106.useMemo)(() => availableItems.reduce((acc, item) => {
     acc[item.id] = item;
     return acc;
   }, {}), [availableItems]);
-  const [editState, setEditState] = (0, import_react115.useState)(void 0);
-  const valueWithEditState = (0, import_react115.useMemo)(() => {
+  const [editState, setEditState] = (0, import_react106.useState)(void 0);
+  const valueWithEditState = (0, import_react106.useMemo)(() => {
     let foundEditValue = false;
     for (const item of value) {
       if (item.id === editState?.id) {
@@ -19910,9 +19676,9 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-1 flex-wrap gap-y-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(PopUpRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react26.PlusIcon, { className: "size-4" })
       ] }) }),
@@ -19961,11 +19727,11 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props, isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal", size: "sm", children: [
-              item.label + ": " + filterValueToLabel(columnFilter.value, { tags: item.tags }),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ExpansionIcon, { isExpanded: isOpen })
-            ] }) }),
-            item.popUpBuilder ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder({
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "font-bold", children: item.label }),
+              filterValueToLabel(columnFilter.value, { tags: item.tags })
+            ] }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
               onRemove: () => {
@@ -19977,7 +19743,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
               name: item.label,
               isOpen,
               close: () => setIsOpen(false)
-            }) }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
               FilterPopUp,
               {
                 name: item.label,
@@ -19990,9 +19756,10 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
                 onRemove: () => {
                   onValueChange(value.filter((prevItem) => prevItem.id !== columnFilter.id));
                   setEditState(void 0);
-                }
+                },
+                onClose: () => setIsOpen(false)
               }
-            )
+            ) })
           ]
         },
         columnFilter.id
@@ -20001,8 +19768,142 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
   ] });
 };
 
+// src/components/user-interaction/data/SortingList.tsx
+var import_react107 = require("react");
+var import_lucide_react27 = require("lucide-react");
+var import_clsx37 = __toESM(require("clsx"));
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var SortingList = ({ sorting, onSortingChange, availableItems }) => {
+  const translation = useHightideTranslation();
+  const activeIds = (0, import_react107.useMemo)(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = (0, import_react107.useMemo)(
+    () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
+    [availableItems, activeIds]
+  );
+  const itemRecord = (0, import_react107.useMemo)(
+    () => availableItems.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    ),
+    [availableItems]
+  );
+  const setSortDirection = (columnId, desc) => {
+    onSortingChange(sorting.map((s) => s.id === columnId ? { ...s, desc } : s));
+  };
+  const removeSort = (columnId) => {
+    onSortingChange(sorting.filter((s) => s.id !== columnId));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(PopUpRoot, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+        translation("addSorting"),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.PlusIcon, { className: "size-4" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        Combobox,
+        {
+          onItemClick: (id) => {
+            const item = itemRecord[id];
+            if (!item) return;
+            onSortingChange([...sorting, { id: item.id, desc: false }]);
+            setIsOpen(false);
+          },
+          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
+            DataTypeUtils.toIcon(item.dataType),
+            item.label
+          ] }, item.id))
+        }
+      ) }) })
+    ] }),
+    sorting.map((columnSort) => {
+      const item = itemRecord[columnSort.id];
+      if (!item) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(PopUpRoot, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowUpNarrowWide, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+          PopUp,
+          {
+            className: (0, import_clsx37.default)("flex-col-3 p-3 min-w-64"),
+            onClose: () => setIsOpen(false),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    IconButton,
+                    {
+                      tooltip: translation("removeFilter"),
+                      onClick: () => {
+                        removeSort(columnSort.id);
+                        setIsOpen(false);
+                      },
+                      color: "negative",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.TrashIcon, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    IconButton,
+                    {
+                      tooltip: translation("close"),
+                      onClick: () => setIsOpen(false),
+                      color: "neutral",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.XIcon, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "neutral" : "primary",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, false),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowUpNarrowWide, { className: "size-4" }),
+                      translation("sortAsc")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "primary" : "neutral",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, true),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowDownWideNarrow, { className: "size-4" }),
+                      translation("sortDesc")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] }, columnSort.id);
+    })
+  ] });
+};
+
 // src/components/user-interaction/date/TimeDisplay.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -20039,15 +19940,80 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: fullString });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: fullString });
 };
 
+// src/components/user-interaction/input/FlexibleDateTimeInput.tsx
+var import_react108 = require("react");
+var import_lucide_react28 = require("lucide-react");
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var FlexibleDateTimeInput = (0, import_react108.forwardRef)(function FlexibleDateTimeInput2({
+  defaultMode = "date",
+  value: controlledValue,
+  initialValue,
+  onValueChange,
+  fixedTime: fixedTimeOverride,
+  actions = [],
+  ...props
+}, forwardedRef) {
+  const translation = useHightideTranslation();
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue
+  });
+  const fixedTime = (0, import_react108.useMemo)(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
+  const [preferredMode, setPreferredMode] = (0, import_react108.useState)(defaultMode);
+  const mode = (0, import_react108.useMemo)(() => {
+    if (!value) return preferredMode;
+    if (DateUtils.sameTime(value, fixedTime, true, true)) {
+      return "date";
+    }
+    return "dateTime";
+  }, [preferredMode, value, fixedTime]);
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    DateTimeInput,
+    {
+      ...props,
+      ref: forwardedRef,
+      mode,
+      value,
+      onValueChange: setValue,
+      actions: [
+        ...actions,
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            coloringStyle: "text",
+            color: "neutral",
+            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));
+                } else {
+                  setValue(DateUtils.isLastMillisecondOfDay(value) ? new Date(value.getTime() - 1) : new Date(value.getTime() + 1));
+                }
+              }
+            },
+            children: preferredMode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react28.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react28.ClockFading, { className: "size-5" })
+          },
+          "date-mode"
+        )
+      ]
+    }
+  );
+});
+
 // src/components/user-interaction/input/InsideLabelInput.tsx
-var import_react116 = require("react");
-var import_react117 = require("react");
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react117.forwardRef)(function InsideLabelInput2({
+var import_react109 = require("react");
+var import_react110 = require("react");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react110.forwardRef)(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -20060,11 +20026,11 @@ var InsideLabelInput = (0, import_react117.forwardRef)(function InsideLabelInput
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = (0, import_react117.useState)(false);
-  const generatedId = (0, import_react116.useId)();
+  const [isFocused, setIsFocused] = (0, import_react110.useState)(false);
+  const generatedId = (0, import_react109.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: (0, import_clsx37.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_clsx38.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       Input,
       {
         ...props,
@@ -20081,16 +20047,16 @@ var InsideLabelInput = (0, import_react117.forwardRef)(function InsideLabelInput
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: (0, import_clsx37.default)("h-14 px-4 pb-2 py-6.5", props.className)
+        className: (0, import_clsx38.default)("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -20103,9 +20069,9 @@ var InsideLabelInput = (0, import_react117.forwardRef)(function InsideLabelInput
 });
 
 // src/components/user-interaction/input/SearchBar.tsx
-var import_lucide_react27 = require("lucide-react");
-var import_clsx38 = require("clsx");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_clsx39 = require("clsx");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -20121,8 +20087,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { ...containerProps, className: (0, import_clsx38.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { ...containerProps, className: (0, import_clsx39.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       Input,
       {
         ...inputProps,
@@ -20130,10 +20096,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx38.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx39.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       IconButton,
       {
         ...searchButtonProps,
@@ -20142,19 +20108,19 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx38.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react27.Search, { className: "w-full h-full" })
+        className: (0, import_clsx39.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react118 = require("react");
-var import_lucide_react28 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime101 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react118.forwardRef)(function ToggleableInput2({
+var import_react111 = require("react");
+var import_lucide_react30 = require("lucide-react");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react111.forwardRef)(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -20167,16 +20133,16 @@ var ToggleableInput = (0, import_react118.forwardRef)(function ToggleableInput2(
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = (0, import_react118.useState)(initialState !== "display");
-  const innerRef = (0, import_react118.useRef)(null);
-  (0, import_react118.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react118.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react111.useState)(initialState !== "display");
+  const innerRef = (0, import_react111.useRef)(null);
+  (0, import_react111.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react111.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_clsx39.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: (0, import_clsx40.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       Input,
       {
         ...props,
@@ -20200,20 +20166,20 @@ var ToggleableInput = (0, import_react118.forwardRef)(function ToggleableInput2(
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: (0, import_clsx39.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_lucide_react28.Pencil, { className: (0, import_clsx39.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: (0, import_clsx40.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.Pencil, { className: (0, import_clsx40.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_lucide_react30 = require("lucide-react");
+var import_lucide_react32 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-var import_clsx40 = __toESM(require("clsx"));
-var import_lucide_react29 = require("lucide-react");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_lucide_react31 = require("lucide-react");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
   children,
@@ -20232,36 +20198,36 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
     "div",
     {
-      className: (0, import_clsx40.default)("group/property", className),
+      className: (0, import_clsx41.default)("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { "data-name": "property-title-text", children: name })
               ] }) }),
-              invalid && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   IconButton,
                   {
                     tooltip: translation("clearValue"),
@@ -20270,10 +20236,10 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.X, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.X, { className: "size-force-5" })
                   }
                 ),
-                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   IconButton,
                   {
                     tooltip: translation("removeProperty"),
@@ -20281,7 +20247,7 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Trash, { className: "size-force-5" })
                   }
                 )
               ] })
@@ -20294,7 +20260,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -20303,15 +20269,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.Check, { size: 24 }),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react32.Check, { size: 24 }),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -20324,7 +20290,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -20343,8 +20309,8 @@ var CheckboxProperty = ({
 };
 
 // src/components/user-interaction/properties/DateProperty.tsx
-var import_lucide_react31 = require("lucide-react");
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_lucide_react33 = require("lucide-react");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onValueChange,
@@ -20354,13 +20320,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react33.CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         DateTimeInput,
         {
           value,
@@ -20377,8 +20343,8 @@ var DateProperty = ({
 };
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
-var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_lucide_react34 = require("lucide-react");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   value,
@@ -20387,18 +20353,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react32.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react34.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
             MultiSelectChipDisplay,
             {
               value,
@@ -20424,8 +20390,8 @@ var MultiSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/NumberProperty.tsx
-var import_lucide_react33 = require("lucide-react");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_lucide_react35 = require("lucide-react");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onValueChange,
@@ -20437,20 +20403,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react33.Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react35.Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               Input,
               {
                 "data-name": "property-input",
@@ -20478,7 +20444,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               "span",
               {
                 "data-name": "property-suffix",
@@ -20494,8 +20460,8 @@ var NumberProperty = ({
 };
 
 // src/components/user-interaction/properties/SelectProperty.tsx
-var import_lucide_react34 = require("lucide-react");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_lucide_react36 = require("lucide-react");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -20504,18 +20470,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react34.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react36.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
             SelectRoot,
             {
               value,
@@ -20525,7 +20491,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -20533,7 +20499,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(SelectContent, { children })
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(SelectContent, { children })
               ]
             }
           )
@@ -20543,99 +20509,382 @@ var SingleSelectProperty = ({
   );
 };
 
-// src/components/user-interaction/properties/TextProperty.tsx
-var import_lucide_react35 = require("lucide-react");
-var import_jsx_runtime108 = require("react/jsx-runtime");
-var TextProperty = ({
-  value,
-  readOnly,
-  onValueChange,
-  onEditComplete,
-  ...baseProps
-}) => {
-  const translation = useHightideTranslation();
-  const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-    PropertyBase,
-    {
-      ...baseProps,
-      hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react35.Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-        Textarea,
-        {
-          "data-name": "property-input",
-          className: "w-full",
-          "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          rows: 5,
-          value: value ?? "",
-          readOnly,
-          placeholder: translation("text"),
-          onValueChange: (value2) => onValueChange?.(value2),
-          onEditComplete: (value2) => onEditComplete?.(value2)
-        }
-      )
+// src/components/user-interaction/properties/TextProperty.tsx
+var import_lucide_react37 = require("lucide-react");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var TextProperty = ({
+  value,
+  readOnly,
+  onValueChange,
+  onEditComplete,
+  ...baseProps
+}) => {
+  const translation = useHightideTranslation();
+  const hasValue = value !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    PropertyBase,
+    {
+      ...baseProps,
+      hasValue,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react37.Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        Textarea,
+        {
+          "data-name": "property-input",
+          className: "w-full",
+          "data-invalid": PropsUtil.dataAttributes.bool(invalid),
+          rows: 5,
+          value: value ?? "",
+          readOnly,
+          placeholder: translation("text"),
+          onValueChange: (value2) => onValueChange?.(value2),
+          onEditComplete: (value2) => onEditComplete?.(value2)
+        }
+      )
+    }
+  );
+};
+
+// src/components/utils/Polymorphic.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react112 = require("react");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var PolymorphicSlot = (0, import_react112.forwardRef)(function PolymorphicSlot2({
+  children,
+  asChild,
+  defaultComponent = "div",
+  ...props
+}, ref) {
+  const Component = asChild ? import_react_slot.Slot : defaultComponent;
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Component, { ...props, ref, children });
+});
+
+// src/components/utils/Transition.tsx
+var import_react113 = require("react");
+function Transition({
+  children,
+  show,
+  includeAnimation = true
+}) {
+  const [isOpen, setIsOpen] = (0, import_react113.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react113.useState)(!isOpen);
+  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
+  (0, import_react113.useEffect)(() => {
+    setIsOpen(show);
+    setIsTransitioning(true);
+  }, [show]);
+  const onAnimationEnd = () => setIsTransitioning(false);
+  const bag = {
+    isOpen,
+    isTransitioning,
+    isUsingReducedMotion,
+    data: {
+      "data-open": isOpen && !isTransitioning ? "" : void 0,
+      "data-opening": isOpen && isTransitioning ? "" : void 0,
+      "data-closing": !isOpen && isTransitioning ? "" : void 0,
+      "data-closed": !isOpen && !isTransitioning ? "" : void 0
+    },
+    handlers: {
+      onTransitionEnd: () => setIsTransitioning(false),
+      onTransitionCancel: () => setIsTransitioning(false),
+      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
+    }
+  };
+  return BagFunctionUtil.resolve(children, bag);
+}
+
+// src/global-contexts/HightideProvider.tsx
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var HightideProvider = ({
+  children,
+  theme,
+  locale,
+  config
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(HightideConfigProvider, { ...config, children }) }) });
+};
+
+// src/hooks/focus/useFocusGuards.ts
+var import_react114 = require("react");
+var selectorName = "data-hw-focus-guard";
+function FocusGuard() {
+  const element = document.createElement("div");
+  element.setAttribute(selectorName, "");
+  element.tabIndex = 0;
+  element.style.border = "none";
+  element.style.outline = "none";
+  element.style.boxShadow = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+var FocusGuardsService = class _FocusGuardsService {
+  constructor() {
+    this.count = 0;
+  }
+  static getInstance() {
+    if (!_FocusGuardsService.instance) {
+      _FocusGuardsService.instance = new _FocusGuardsService();
+    }
+    return _FocusGuardsService.instance;
+  }
+  add() {
+    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
+    this.count++;
+  }
+  remove() {
+    if (this.count === 1) {
+      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
+    }
+    this.count--;
+  }
+};
+var useFocusGuards = () => {
+  (0, import_react114.useEffect)(() => {
+    FocusGuardsService.getInstance().add();
+    return () => {
+      FocusGuardsService.getInstance().remove();
+    };
+  }, []);
+};
+
+// src/hooks/focus/useFocusOnceVisible.ts
+var import_react115 = __toESM(require("react"));
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react115.default.useState(false);
+  (0, import_react115.useEffect)(() => {
+    if (disable || hasUsedFocus) {
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !hasUsedFocus) {
+        ref.current?.focus();
+        setHasUsedFocus(hasUsedFocus);
+      }
+    }, {
+      threshold: 0.1
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [disable, hasUsedFocus, ref]);
+};
+
+// src/hooks/focus/useIsMounted.ts
+var import_react116 = require("react");
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? import_react116.useLayoutEffect : import_react116.useEffect;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = (0, import_react116.useState)(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useHandleRefs.ts
+var import_react117 = require("react");
+function useHandleRefs(handleRef) {
+  const refs = (0, import_react117.useRef)([]);
+  (0, import_react117.useEffect)(() => {
+    refs.current = Object.keys(handleRef?.current ?? {}).map(
+      () => ({ current: null })
+    );
+    const values = Object.values(handleRef?.current ?? {});
+    values.forEach((el, i) => {
+      refs.current[i].current = el;
+    });
+  });
+  return refs.current;
+}
+
+// src/hooks/useLogUnstableDependencies.ts
+var import_react118 = __toESM(require("react"));
+function useLogUnstableDependencies(name, value) {
+  const prev = import_react118.default.useRef(null);
+  import_react118.default.useEffect(() => {
+    if (!prev.current) {
+      prev.current = value;
+      return;
     }
-  );
-};
+    const changes = {};
+    for (const key of Object.keys(value)) {
+      if (prev.current[key] !== value[key]) {
+        changes[key] = {
+          prev: prev.current[key],
+          next: value[key]
+        };
+      }
+    }
+    if (Object.keys(changes).length > 0) {
+      console.info(`[${name}] changed`, changes);
+    }
+    prev.current = value;
+  });
+}
 
-// src/components/utils/Polymorphic.tsx
-var import_react_slot = require("@radix-ui/react-slot");
+// src/hooks/useOverwritableState.ts
 var import_react119 = require("react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
-var PolymorphicSlot = (0, import_react119.forwardRef)(function PolymorphicSlot2({
-  children,
-  asChild,
-  defaultComponent = "div",
-  ...props
-}, ref) {
-  const Component = asChild ? import_react_slot.Slot : defaultComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Component, { ...props, ref, children });
-});
+var useOverwritableState = (overwriteValue, onChange) => {
+  const [state, setState] = (0, import_react119.useState)(overwriteValue);
+  (0, import_react119.useEffect)(() => {
+    setState(overwriteValue);
+  }, [overwriteValue]);
+  const onChangeWrapper = (action) => {
+    const resolved = resolveSetState(action, state);
+    setState(resolved);
+    onChange?.(resolved);
+  };
+  return [state, onChangeWrapper];
+};
 
-// src/components/utils/Transition.tsx
+// src/hooks/useRerender.ts
 var import_react120 = require("react");
-function Transition({
-  children,
-  show,
-  includeAnimation = true
-}) {
-  const [isOpen, setIsOpen] = (0, import_react120.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react120.useState)(!isOpen);
-  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react120.useEffect)(() => {
-    setIsOpen(show);
-    setIsTransitioning(true);
-  }, [show]);
-  const onAnimationEnd = () => setIsTransitioning(false);
-  const bag = {
-    isOpen,
-    isTransitioning,
-    isUsingReducedMotion,
-    data: {
-      "data-open": isOpen && !isTransitioning ? "" : void 0,
-      "data-opening": isOpen && isTransitioning ? "" : void 0,
-      "data-closing": !isOpen && isTransitioning ? "" : void 0,
-      "data-closed": !isOpen && !isTransitioning ? "" : void 0
-    },
-    handlers: {
-      onTransitionEnd: () => setIsTransitioning(false),
-      onTransitionCancel: () => setIsTransitioning(false),
-      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
-    }
+var useRerender = () => {
+  return (0, import_react120.useReducer)(() => ({}), {})[1];
+};
+
+// src/hooks/useUpdatingDateString.ts
+var import_react121 = require("react");
+var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
+  const { locale: contextLocale } = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react121.useState)({
+    compareDate: date,
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    relative: DateUtils.formatRelative(date, locale)
+  });
+  (0, import_react121.useEffect)(() => {
+    setDateAndTimeStrings({
+      compareDate: date,
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      relative: DateUtils.formatRelative(date, locale)
+    });
+  }, [date, absoluteFormat, locale]);
+  (0, import_react121.useEffect)(() => {
+    let timeoutId;
+    const startTimer = () => {
+      const now = /* @__PURE__ */ new Date();
+      const diff = Math.abs((date.getTime() - now.getTime()) / 1e3);
+      let delayInSeconds;
+      if (diff < DateUtils.timesInSeconds.minute) {
+        delayInSeconds = DateUtils.timesInSeconds.second;
+      } else if (diff < DateUtils.timesInSeconds.hour) {
+        delayInSeconds = DateUtils.timesInSeconds.minute;
+      } else {
+        delayInSeconds = DateUtils.timesInSeconds.hour;
+      }
+      timeoutId = setInterval(() => {
+        setDateAndTimeStrings({
+          compareDate: date,
+          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+          relative: DateUtils.formatRelative(date, locale)
+        });
+      }, delayInSeconds * 1e3 / 2);
+    };
+    startTimer();
+    return () => clearInterval(timeoutId);
+  }, [absoluteFormat, date, locale]);
+  return {
+    absolute: dateAndTimeStrings.absolute,
+    relative: dateAndTimeStrings.relative
   };
-  return BagFunctionUtil.resolve(children, bag);
-}
+};
 
-// src/global-contexts/HightideProvider.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var HightideProvider = ({
-  children,
-  theme,
-  locale,
-  config
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HightideConfigProvider, { ...config, children }) }) });
+// src/utils/emailValidation.ts
+var validateEmail = (email) => {
+  return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
+};
+
+// src/hooks/useValidators.ts
+var import_react122 = require("react");
+var notEmpty = (value) => {
+  if (!value) {
+    return "notEmpty";
+  }
+};
+var boundsValidator = (length, bounds) => {
+  const [min, max] = bounds;
+  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
+    return "range";
+  }
+  if (min !== void 0 && (length === void 0 || length < min)) {
+    return "lower";
+  }
+  if (max !== void 0 && length !== void 0 && length > max) {
+    return "upper";
+  }
+  return "none";
+};
+var lengthValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeString",
+    lower: "tooShort",
+    upper: "tooLong",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var selectionValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeSelectionItems",
+    lower: "tooFewSelectionItems",
+    upper: "tooManySelectionItems",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var emailValidator = (value) => {
+  if (!value || !validateEmail(value)) {
+    return "invalidEmail";
+  }
+};
+var UseValidators = {
+  notEmpty,
+  length: lengthValidator,
+  email: emailValidator,
+  selection: selectionValidator
+};
+var useTranslatedValidators = () => {
+  const translation = useHightideTranslation();
+  return (0, import_react122.useMemo)(() => ({
+    notEmpty: (value) => {
+      const result = notEmpty(value);
+      if (result) {
+        return translation(result);
+      }
+    },
+    length: (value, length) => {
+      const [min, max] = length;
+      const result = lengthValidator(value, length);
+      if (result) {
+        return translation(result, { min, max });
+      }
+    },
+    email: (value) => {
+      const result = emailValidator(value ?? "");
+      if (result) {
+        return translation(result);
+      }
+    },
+    selection: (value, length) => {
+      const [min, max] = length;
+      const result = selectionValidator(value, length);
+      if (result) {
+        return translation(
+          result,
+          { min, max }
+        );
+      }
+    }
+  }), [translation]);
 };
 
 // src/utils/builder.ts
@@ -20932,6 +21181,7 @@ var PromiseUtils = {
   FilterOperatorUtils,
   FilterPopUp,
   FilterValueUtils,
+  FlexibleDateTimeInput,
   FocusTrap,
   FocusTrapWrapper,
   FormContext,
@@ -21006,6 +21256,7 @@ var PromiseUtils = {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
+  SortingList,
   StepperBar,
   StorageListener,
   Switch,