@helpwave/hightide 0.9.1 → 0.9.3

package/dist/index.mjs

@@ -8020,9 +8020,9 @@ var AnchoredFloatingContainer = forwardRef3(function FloatingContainer({
   options = {},
   active = true,
   ...props
-}, forwardRef33) {
+}, forwardRef34) {
   const innerRef = useRef4(null);
-  useImperativeHandle(forwardRef33, () => innerRef.current);
+  useImperativeHandle(forwardRef34, () => innerRef.current);
   const position = useAnchoredPosition({
     ...options,
     container: innerRef,
@@ -8336,6 +8336,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`,
@@ -8546,6 +8548,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sortierung`,
     "sSortingState": ({ sortDirection }) => {
       return TranslationGen.resolveSelect(sortDirection, {
@@ -8696,11 +8700,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`,
@@ -8911,6 +8918,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sorting`,
     "sSortingState": ({ sortDirection }) => {
       return TranslationGen.resolveSelect(sortDirection, {
@@ -9061,6 +9070,7 @@ var hightideTranslation = {
     "update": `Update`,
     "value": `Value`,
     "welcome": `Welcome`,
+    "withoutTime": `Without Time`,
     "yes": `Yes`
   }
 };
@@ -9582,7 +9592,7 @@ var TooltipDisplay = forwardRef4(function TooltipAnchoredFloatingContainer({
   isAnimated: isAnimatedOverwrite,
   anchor: anchorOverwrite,
   ...props
-}, forwardRef33) {
+}, forwardRef34) {
   const { config } = useHightideConfig();
   const tooltipContext = useContext4(TooltipContext);
   const disabled = disabledOverwrite ?? tooltipContext?.disabled;
@@ -9598,7 +9608,7 @@ var TooltipDisplay = forwardRef4(function TooltipAnchoredFloatingContainer({
     [isAnimatedOverwrite, config.tooltip.isAnimated]
   );
   const container = useRef7(null);
-  useImperativeHandle2(forwardRef33, () => container.current);
+  useImperativeHandle2(forwardRef34, () => container.current);
   const isActive = !disabled && isShown;
   const { isVisible, transitionState } = useTransitionState(
     useMemo9(() => ({ isOpen: isShown, ref: container }), [isShown])
@@ -11855,7 +11865,7 @@ var InputDialog = ({
 import { forwardRef as forwardRef15 } from "react";
 
 // src/components/user-interaction/Select/SelectRoot.tsx
-import { useCallback as useCallback22, useEffect as useEffect28, useId as useId9, useMemo as useMemo21, useState as useState22 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect21, useId as useId9, useMemo as useMemo19, useState as useState19 } from "react";
 
 // src/components/user-interaction/Select/SelectContext.tsx
 import { createContext as createContext9, useContext as useContext10 } from "react";
@@ -11868,10 +11878,10 @@ function useSelectContext() {
 
 // src/components/user-interaction/Select/useSelect.ts
 import {
-  useCallback as useCallback21,
-  useEffect as useEffect27,
-  useMemo as useMemo20,
-  useState as useState21
+  useCallback as useCallback20,
+  useEffect as useEffect20,
+  useMemo as useMemo18,
+  useState as useState18
 } from "react";
 
 // src/hooks/useSingleSelection.ts
@@ -11998,217 +12008,8 @@ function useListNavigation({
   }), [resolvedHighlightId, highlight, first, last, next, previous]);
 }
 
-// src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect19 } from "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 = () => {
-  useEffect19(() => {
-    FocusGuardsService.getInstance().add();
-    return () => {
-      FocusGuardsService.getInstance().remove();
-    };
-  }, []);
-};
-
-// src/hooks/focus/useFocusOnceVisible.ts
-import React3, { useEffect as useEffect20 } from "react";
-var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = React3.useState(false);
-  useEffect20(() => {
-    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
-import { useEffect as useEffect21, useLayoutEffect as useLayoutEffect6, useState as useState18 } from "react";
-var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect6 : useEffect21;
-var useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState18(false);
-  useIsomorphicEffect(() => {
-    setIsMounted(true);
-    return () => {
-      setIsMounted(false);
-    };
-  }, []);
-  return isMounted;
-};
-
-// src/hooks/useHandleRefs.ts
-import { useEffect as useEffect22, useRef as useRef19 } from "react";
-function useHandleRefs(handleRef) {
-  const refs = useRef19([]);
-  useEffect22(() => {
-    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
-import React4 from "react";
-function useLogUnstableDependencies(name, value) {
-  const prev = React4.useRef(null);
-  React4.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
-import { useCallback as useCallback19, useMemo as useMemo17 } from "react";
-function useMultiSelection({
-  options: optionsList,
-  value,
-  onSelectionChange,
-  initialSelection = [],
-  isControlled
-}) {
-  const [selection, setSelection] = useControlledState({
-    value,
-    onValueChange: onSelectionChange,
-    defaultValue: [...initialSelection],
-    isControlled
-  });
-  const isSelected = useCallback19((id) => selection.includes(id), [selection]);
-  const toggleSelection = useCallback19(
-    (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 = useCallback19(
-    (next) => setSelection(Array.from(next)),
-    [setSelection]
-  );
-  return useMemo17(
-    () => ({
-      selection,
-      setSelection: setSelectionValue,
-      toggleSelection,
-      isSelected
-    }),
-    [selection, setSelectionValue, toggleSelection, isSelected]
-  );
-}
-
-// src/hooks/useOutsideClick.ts
-import { useEffect as useEffect23 } from "react";
-var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
-  useEffect23(() => {
-    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
-import { useEffect as useEffect24, useState as useState19 } from "react";
-var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = useState19(overwriteValue);
-  useEffect24(() => {
-    setState(overwriteValue);
-  }, [overwriteValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(resolved);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/hooks/useRerender.ts
-import { useReducer as useReducer2 } from "react";
-var useRerender = () => {
-  return useReducer2(() => ({}), {})[1];
-};
-
 // src/hooks/useSearch.ts
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo17 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -12247,18 +12048,18 @@ function useSearch({
 }) {
   const toTagsResolved = toTags ?? defaultToTags;
   const toTagsStable = useEventCallbackStabilizer(toTagsResolved);
-  const searchResult = useMemo18(() => {
+  const searchResult = useMemo17(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return items;
     return MultiSearchWithMapping(searchQuery, [...items], (item) => toTagsStable(item));
   }, [items, searchQuery, toTagsStable]);
-  return useMemo18(() => ({
+  return useMemo17(() => ({
     searchResult
   }), [searchResult]);
 }
 
 // src/hooks/useTypeAheadSearch.ts
-import { useCallback as useCallback20, useEffect as useEffect25, useRef as useRef20 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect19, useRef as useRef19 } from "react";
 function defaultToString(value) {
   return String(value);
 }
@@ -12268,12 +12069,12 @@ function useTypeAheadSearch({
   toString: toStringProp,
   onResultChange
 }) {
-  const bufferRef = useRef20("");
-  const timeoutRef = useRef20(null);
+  const bufferRef = useRef19("");
+  const timeoutRef = useRef19(null);
   const toString = toStringProp ?? defaultToString;
   const toStringStable = useEventCallbackStabilizer(toString);
   const onResultChangeStable = useEventCallbackStabilizer(onResultChange);
-  const reset = useCallback20(() => {
+  const reset = useCallback19(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -12281,10 +12082,10 @@ function useTypeAheadSearch({
     bufferRef.current = "";
     onResultChangeStable(null);
   }, [onResultChangeStable]);
-  useEffect25(() => () => {
+  useEffect19(() => () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
   }, []);
-  const addToTypeAhead = useCallback20((str) => {
+  const addToTypeAhead = useCallback19((str) => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     bufferRef.current += str;
     timeoutRef.current = setTimeout(() => {
@@ -12306,397 +12107,43 @@ function useTypeAheadSearch({
   return { addToTypeAhead, reset };
 }
 
-// src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect26, useState as useState20 } from "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] = useState20({
-    compareDate: date,
-    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-    relative: DateUtils.formatRelative(date, locale)
-  });
-  useEffect26(() => {
-    setDateAndTimeStrings({
-      compareDate: date,
-      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-      relative: DateUtils.formatRelative(date, locale)
-    });
-  }, [date, absoluteFormat, locale]);
-  useEffect26(() => {
-    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
-import { useMemo as useMemo19 } from "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 useMemo19(() => ({
-    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] = useState21(initialIsOpen);
-  const [searchQuery, setSearchQuery] = useState21("");
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onCloseStable = useEventCallbackStabilizer(onClose);
-  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange);
-  const onSelectionChangeWrapper = useCallback21((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: useCallback21((o) => [o.label], [])
-  });
-  const visibleOptionIds = useMemo20(() => visibleOptions.map((o) => o.id), [visibleOptions]);
-  const enabledOptions = useMemo20(() => 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] = useState18(initialIsOpen);
+  const [searchQuery, setSearchQuery] = useState18("");
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
+  const onCloseStable = useEventCallbackStabilizer(onClose);
+  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange);
+  const onSelectionChangeWrapper = useCallback20((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: useCallback20((o) => [o.label], [])
+  });
+  const visibleOptionIds = useMemo18(() => visibleOptions.map((o) => o.id), [visibleOptions]);
+  const enabledOptions = useMemo18(() => visibleOptions.filter((o) => !o.disabled), [visibleOptions]);
   const {
     highlightedId,
     highlight: listNavHighlight,
@@ -12712,28 +12159,28 @@ function useSelect({
     options: enabledOptions,
     resetTimer: typeAheadResetMs,
     toString: (o) => o.label ?? "",
-    onResultChange: useCallback21((option) => {
+    onResultChange: useCallback20((option) => {
       if (option) listNavHighlight(option.id);
     }, [listNavHighlight])
   });
-  useEffect27(() => {
+  useEffect20(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
-  const state = useMemo20(() => ({
+  const state = useMemo18(() => ({
     value: selection,
     highlightedValue: highlightedId,
     isOpen,
     searchQuery,
     options
   }), [selection, highlightedId, isOpen, searchQuery, options]);
-  const computedState = useMemo20(() => ({
+  const computedState = useMemo18(() => ({
     visibleOptionIds
   }), [visibleOptionIds]);
-  const highlightItem = useCallback21((value) => {
+  const highlightItem = useCallback20((value) => {
     if (!enabledOptions.some((o) => o.id === value)) return;
     listNavHighlight(value);
   }, [enabledOptions, listNavHighlight]);
-  const setIsOpenWrapper = useCallback21((isOpen2, behavior) => {
+  const setIsOpenWrapper = useCallback20((isOpen2, behavior) => {
     behavior = behavior ?? "first";
     if (isOpen2) {
       if (selection == null) {
@@ -12752,11 +12199,11 @@ function useSelect({
     setIsOpen(isOpen2);
     onIsOpenChangeStable(isOpen2);
   }, [setIsOpen, highlightItem, onCloseStable, setSearchQuery, onIsOpenChangeStable, selection, listNavFirst, listNavLast]);
-  const toggleOpenWrapper = useCallback21((behavior) => {
+  const toggleOpenWrapper = useCallback20((behavior) => {
     const next = !isOpen;
     setIsOpenWrapper(next, behavior);
   }, [isOpen, setIsOpenWrapper]);
-  const actions = useMemo20(() => ({
+  const actions = useMemo18(() => ({
     selectValue: (id) => selectValue(id),
     setIsOpen: setIsOpenWrapper,
     toggleOpen: toggleOpenWrapper,
@@ -12768,7 +12215,7 @@ function useSelect({
     highlightItem,
     handleTypeaheadKey: addToTypeAhead
   }), [selectValue, setIsOpenWrapper, listNavFirst, listNavLast, listNavNext, listNavPrevious, highlightItem, addToTypeAhead, toggleOpenWrapper]);
-  return useMemo20(() => ({
+  return useMemo18(() => ({
     ...state,
     ...computedState,
     ...actions
@@ -12816,16 +12263,16 @@ function SelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = useState22(null);
-  const [options, setOptions] = useState22([]);
+  const [triggerRef, setTriggerRef] = useState19(null);
+  const [options, setOptions] = useState19([]);
   const generatedId = useId9();
-  const [ids, setIds] = useState22({
+  const [ids, setIds] = useState19({
     trigger: "select-" + generatedId,
     content: "select-content-" + generatedId,
     listbox: "select-listbox-" + generatedId,
     searchInput: "select-search-" + generatedId
   });
-  const registerOption = useCallback22(
+  const registerOption = useCallback21(
     (item) => {
       setOptions((prev) => {
         const next = prev.filter((o) => o.value !== item.value);
@@ -12837,31 +12284,31 @@ function SelectRoot({
     },
     []
   );
-  const registerTrigger = useCallback22((ref) => {
+  const registerTrigger = useCallback21((ref) => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
     };
   }, []);
-  const compare = useMemo21(() => compareFunction ?? Object.is, [compareFunction]);
-  const idToOptionMap = useMemo21(() => {
+  const compare = useMemo19(() => compareFunction ?? Object.is, [compareFunction]);
+  const idToOptionMap = useMemo19(() => {
     return options.reduce((acc, o) => {
       acc[o.id] = o;
       return acc;
     }, {});
   }, [options]);
-  const mappedValueId = useMemo21(() => {
+  const mappedValueId = useMemo19(() => {
     if (value === void 0) return void 0;
     return options.find((o) => compare(o.value, value))?.id ?? null;
   }, [options, value, compare]);
-  const mappedInitialValueId = useMemo21(() => {
+  const mappedInitialValueId = useMemo19(() => {
     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 = useCallback22((value2) => {
+  const onValueChangeWrapper = useCallback21((value2) => {
     const option = idToOptionMap[value2];
     if (option === void 0) {
       console.warn(`Attempted to select an option ${value2} that is not valid`);
@@ -12869,7 +12316,7 @@ function SelectRoot({
     }
     onValueChangeStable(option.value);
   }, [onValueChangeStable, idToOptionMap]);
-  const onEditCompleteWrapper = useCallback22((value2) => {
+  const onEditCompleteWrapper = useCallback21((value2) => {
     const option = idToOptionMap[value2];
     if (option === void 0) {
       console.warn(`Attempted to edit complete an option ${value2} that is not valid`);
@@ -12888,17 +12335,17 @@ function SelectRoot({
     onIsOpenChange: onIsOpenChangeStable
   });
   const { setSearchQuery } = state;
-  useEffect28(() => {
+  useEffect21(() => {
     if (showSearch === false) {
       setSearchQuery("");
     }
   }, [showSearch, setSearchQuery]);
-  const config = useMemo21(() => ({
+  const config = useMemo19(() => ({
     iconAppearance,
     ids,
     setIds
   }), [iconAppearance, ids, setIds]);
-  const layout = useMemo21(() => ({
+  const layout = useMemo19(() => ({
     triggerRef,
     registerTrigger
   }), [triggerRef, registerTrigger]);
@@ -12953,12 +12400,12 @@ function SelectRoot({
 }
 
 // src/components/user-interaction/Select/SelectButton.tsx
-import { forwardRef as forwardRef12, useEffect as useEffect30, useImperativeHandle as useImperativeHandle8, useRef as useRef22 } from "react";
+import { forwardRef as forwardRef12, useEffect as useEffect23, useImperativeHandle as useImperativeHandle8, useRef as useRef21 } from "react";
 
 // src/components/user-interaction/Select/SelectOption.tsx
 import clsx9 from "clsx";
 import { CheckIcon } from "lucide-react";
-import { createContext as createContext11, forwardRef as forwardRef11, useContext as useContext12, useEffect as useEffect29, useId as useId10, useRef as useRef21 } from "react";
+import { createContext as createContext11, forwardRef as forwardRef11, useContext as useContext12, useEffect as useEffect22, useId as useId10, useRef as useRef20 } from "react";
 import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 var SelectOptionDisplayContext = createContext11(null);
 function useSelectOptionDisplayLocation() {
@@ -12978,12 +12425,12 @@ var SelectOption = forwardRef11(function SelectOption2({
 }, ref) {
   const context = useSelectContext();
   const { registerOption } = context;
-  const itemRef = useRef21(null);
+  const itemRef = useRef20(null);
   const display = children ?? label;
   const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
   const generatedId = useId10();
   const optionId = props?.id ?? "select-option-" + generatedId;
-  useEffect29(() => {
+  useEffect22(() => {
     return registerOption({
       id: optionId,
       value,
@@ -13065,12 +12512,12 @@ var SelectButton = forwardRef12(
     const { config, layout } = context;
     const { setIds } = config;
     const { registerTrigger } = layout;
-    useEffect30(() => {
+    useEffect23(() => {
       if (id) setIds((prev) => ({ ...prev, trigger: id }));
     }, [id, setIds]);
-    const innerRef = useRef22(null);
+    const innerRef = useRef21(null);
     useImperativeHandle8(ref, () => innerRef.current);
-    useEffect30(() => {
+    useEffect23(() => {
       const unregister = registerTrigger(innerRef);
       return () => unregister();
     }, [registerTrigger]);
@@ -13131,11 +12578,36 @@ var SelectButton = forwardRef12(
 );
 
 // src/components/user-interaction/Select/SelectContent.tsx
-import { forwardRef as forwardRef14, useCallback as useCallback24, useEffect as useEffect31, useImperativeHandle as useImperativeHandle10, useRef as useRef23 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback23, useEffect as useEffect25, useImperativeHandle as useImperativeHandle10, useRef as useRef22 } from "react";
 import clsx10 from "clsx";
 
 // src/components/layout/popup/PopUp.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback23, useContext as useContext13, useImperativeHandle as useImperativeHandle9, useMemo as useMemo22 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback22, useContext as useContext13, useImperativeHandle as useImperativeHandle9, useMemo as useMemo20 } from "react";
+
+// src/hooks/useOutsideClick.ts
+import { useEffect as useEffect24 } from "react";
+var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
+  useEffect24(() => {
+    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
 import { jsx as jsx37 } from "react/jsx-runtime";
 var PopUp = forwardRef13(function PopUp2({
   children,
@@ -13148,24 +12620,24 @@ var PopUp = forwardRef13(function PopUp2({
   forceMount = false,
   anchorExcludedFromOutsideClick = false,
   ...props
-}, forwardRef33) {
+}, forwardRef34) {
   const context = useContext13(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 });
-  useImperativeHandle9(forwardRef33, () => ref.current, [ref]);
+  useImperativeHandle9(forwardRef34, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
-  const onCloseWrapper = useCallback23(() => {
+  const onCloseWrapper = useCallback22(() => {
     onCloseStable();
     context?.setIsOpen(false);
   }, [onCloseStable, context]);
-  const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: useMemo22(() => ["popup"], []) });
+  const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: useMemo20(() => ["popup"], []) });
   const isInFront = tagPositions?.["popup"] === 0;
   const isOutsideClickActive = isOpen && isInFront && (outsideClickOptions?.active ?? true);
   useOutsideClick({
-    onOutsideClick: useCallback23((event) => {
+    onOutsideClick: useCallback22((event) => {
       if (event.defaultPrevented) return;
       onCloseWrapper();
       onOutsideClickStable(event);
@@ -13211,18 +12683,18 @@ var SelectContent = forwardRef14(function SelectContent2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = useRef23(null);
-  const searchInputRef = useRef23(null);
+  const innerRef = useRef22(null);
+  const searchInputRef = useRef22(null);
   useImperativeHandle10(ref, () => innerRef.current);
   const context = useSelectContext();
   const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context;
   const { setIds } = config;
-  useEffect31(() => {
+  useEffect25(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = useCallback24(
+  const keyHandler = useCallback23(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -13398,7 +12870,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx12 from "clsx";
 
 // src/global-contexts/ThemeContext.tsx
-import { createContext as createContext12, useCallback as useCallback25, useContext as useContext14, useEffect as useEffect32, useMemo as useMemo23, useState as useState23 } from "react";
+import { createContext as createContext12, useCallback as useCallback24, useContext as useContext14, useEffect as useEffect26, useMemo as useMemo21, useState as useState20 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
@@ -13412,8 +12884,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     deleteValue: deleteStoredTheme
   } = useStorage({ key: "theme", defaultValue: "system" });
   const { config } = useHightideConfig();
-  const [themePreference, setThemePreference] = useState23("system");
-  const resolvedTheme = useMemo23(() => {
+  const [themePreference, setThemePreference] = useState20("system");
+  const resolvedTheme = useMemo21(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -13425,7 +12897,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  useEffect32(() => {
+  useEffect26(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -13433,18 +12905,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme, deleteStoredTheme, setStoredTheme]);
-  useEffect32(() => {
+  useEffect26(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = useCallback25(() => {
+  const getPreference = useCallback24(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect32(() => {
+  useEffect26(() => {
     getPreference();
   }, [getPreference]);
-  useEffect32(() => {
+  useEffect26(() => {
     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)");
@@ -13558,7 +13030,7 @@ var ThemeDialog = ({
 import { forwardRef as forwardRef17 } from "react";
 
 // src/components/layout/drawer/DrawerContent.tsx
-import { forwardRef as forwardRef16, useId as useId11, useImperativeHandle as useImperativeHandle11, useMemo as useMemo24, useRef as useRef24 } from "react";
+import { forwardRef as forwardRef16, useId as useId11, useImperativeHandle as useImperativeHandle11, useMemo as useMemo22, useRef as useRef23 } from "react";
 
 // src/components/layout/drawer/DrawerContext.tsx
 import { createContext as createContext13, useContext as useContext15 } from "react";
@@ -13583,12 +13055,12 @@ var DrawerContent = forwardRef16(function DrawerContent2({
 }, forwardedRef) {
   const { isOpen } = useDrawerContext();
   const generatedId = useId11();
-  const ids = useMemo24(() => ({
+  const ids = useMemo22(() => ({
     container: `dialog-container-${generatedId}`,
     background: `dialog-background-${generatedId}`,
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
-  const ref = useRef24(null);
+  const ref = useRef23(null);
   useImperativeHandle11(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
@@ -13597,7 +13069,7 @@ var DrawerContent = forwardRef16(function DrawerContent2({
   });
   const { zIndex, tagPositions, tagItemCounts } = useOverlayRegistry({
     isActive: isVisible,
-    tags: useMemo24(() => ["drawer"], [])
+    tags: useMemo22(() => ["drawer"], [])
   });
   const depth = tagPositions && tagItemCounts ? (tagItemCounts["drawer"] ?? 0) - (tagPositions["drawer"] ?? 0) : 0;
   const { setOpen } = useDrawerContext();
@@ -13750,7 +13222,7 @@ var ErrorComponent = ({
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-import { useState as useState24 } from "react";
+import { useState as useState21 } from "react";
 
 // src/components/layout/loading/LoadingContainer.tsx
 import { clsx as clsx14 } from "clsx";
@@ -13771,8 +13243,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState24(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState24(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState21(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState21(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -13836,8 +13308,8 @@ var BreadCrumbs = ({ crumbs }) => {
 // src/components/layout/navigation/Navigation.tsx
 var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon } from "lucide-react";
-import { useEffect as useEffect33 } from "react";
-import { useCallback as useCallback26, useId as useId12, useRef as useRef25, useState as useState25 } from "react";
+import { useEffect as useEffect27 } from "react";
+import { useCallback as useCallback25, useId as useId12, useRef as useRef24, useState as useState22 } from "react";
 import clsx17 from "clsx";
 import { Fragment as Fragment5, jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
 function isSubItem(item) {
@@ -13849,9 +13321,9 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = useState25(false);
-  const containerRef = useRef25(null);
-  const triggerRef = useRef25(null);
+  const [isOpen, setOpen] = useState22(false);
+  const containerRef = useRef24(null);
+  const triggerRef = useRef24(null);
   const id = useId12();
   const style = useAnchoredPosition({
     active: isOpen,
@@ -13860,7 +13332,7 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = useCallback26((event) => {
+  const onBlur = useCallback25((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
@@ -13926,10 +13398,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
 };
 var Navigation = ({ ...props }) => {
   const translation = useHightideTranslation();
-  const [isMobileOpen, setIsMobileOpen] = useState25(false);
+  const [isMobileOpen, setIsMobileOpen] = useState22(false);
   const id = useId12();
-  const menuRef = useRef25(null);
-  useEffect33(() => {
+  const menuRef = useRef24(null);
+  useEffect27(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
@@ -13997,7 +13469,7 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 import clsx18 from "clsx";
-import { useEffect as useEffect34, useState as useState26 } from "react";
+import { useEffect as useEffect28, useState as useState23 } from "react";
 import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
@@ -14006,11 +13478,11 @@ var Pagination = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = useState26((pageIndex + 1).toString());
+  const [value, setValue] = useState23((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect34(() => {
+  useEffect28(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -14204,18 +13676,18 @@ var StepperBar = ({
 };
 
 // src/components/layout/popup/PopUpOpener.tsx
-import { useEffect as useEffect35, useMemo as useMemo25, useRef as useRef26 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo23, useRef as useRef25 } from "react";
 function PopUpOpener({ children }) {
   const context = usePopUpContext();
   const { setTriggerRef } = context;
-  const ref = useRef26(null);
-  useEffect35(() => {
+  const ref = useRef25(null);
+  useEffect29(() => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
     };
   }, [setTriggerRef]);
-  const bag = useMemo25(() => ({
+  const bag = useMemo23(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -14233,7 +13705,7 @@ function PopUpOpener({ children }) {
 }
 
 // src/components/layout/popup/PopUpRoot.tsx
-import { useId as useId13, useMemo as useMemo26, useState as useState27 } from "react";
+import { useId as useId13, useMemo as useMemo24, useState as useState24 } from "react";
 import { jsx as jsx55 } from "react/jsx-runtime";
 function PopUpRoot({
   children,
@@ -14250,10 +13722,10 @@ function PopUpRoot({
     onValueChange: onIsOpenChange,
     defaultValue: initialIsOpen
   });
-  const [triggerRef, setTriggerRef] = useState27(null);
-  const popUpId = useMemo26(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
-  const triggerId = useMemo26(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
-  const contextValue = useMemo26(() => ({
+  const [triggerRef, setTriggerRef] = useState24(null);
+  const popUpId = useMemo24(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
+  const triggerId = useMemo24(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
+  const contextValue = useMemo24(() => ({
     isOpen,
     setIsOpen,
     popUpId,
@@ -14440,7 +13912,7 @@ var FillerCell = ({ ...props }) => {
 };
 
 // src/components/layout/table/TableProvider.tsx
-import { useCallback as useCallback28, useEffect as useEffect36, useLayoutEffect as useLayoutEffect7, useMemo as useMemo27, useRef as useRef27, useState as useState28 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect30, useLayoutEffect as useLayoutEffect6, useMemo as useMemo25, useRef as useRef26, useState as useState25 } from "react";
 
 // src/components/layout/table/TableContext.tsx
 import { createContext as createContext14, useContext as useContext16 } from "react";
@@ -14615,46 +14087,293 @@ var getOperatorInfo = (operator) => {
       return { icon: null, translationKey: "unknown translation key", replacementTranslationKey: "unknown" };
   }
 };
-function getDefaultOperator(dataType) {
-  switch (dataType) {
-    case "text":
-      return "contains";
-    case "number":
-      return "between";
+function getDefaultOperator(dataType) {
+  switch (dataType) {
+    case "text":
+      return "contains";
+    case "number":
+      return "between";
+    case "date":
+      return "between";
+    case "dateTime":
+      return "between";
+    case "boolean":
+      return "isTrue";
+    case "multiTags":
+      return "contains";
+    case "singleTag":
+      return "contains";
+    case "unknownType":
+      return "isNotUndefined";
+  }
+}
+var FilterOperatorUtils = {
+  operators: filterOperators,
+  operatorsByCategory: filterOperatorsByCategory,
+  getInfo: getOperatorInfo,
+  getDefaultOperator,
+  typeCheck: {
+    all: isFilterOperator,
+    text: isFilterOperatorText,
+    number: isFilterOperatorNumber,
+    date: isFilterOperatorDate,
+    datetime: isFilterOperatorDatetime,
+    boolean: isFilterOperatorBoolean,
+    tags: isFilterOperatorTags,
+    tagsSingle: isFilterOperatorTagsSingle,
+    unknownType: isFilterOperatorUnknownType
+  }
+};
+
+// src/components/user-interaction/data/filter-function.ts
+import { useCallback as useCallback26 } from "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 "between";
+      return dateStr;
+    case "time":
+      return timeStr;
     case "dateTime":
-      return "between";
-    case "boolean":
-      return "isTrue";
-    case "multiTags":
-      return "contains";
-    case "singleTag":
-      return "contains";
-    case "unknownType":
-      return "isNotUndefined";
+      return `${dateStr}T${timeStr}`;
   }
-}
-var FilterOperatorUtils = {
-  operators: filterOperators,
-  operatorsByCategory: filterOperatorsByCategory,
-  getInfo: getOperatorInfo,
-  getDefaultOperator,
-  typeCheck: {
-    all: isFilterOperator,
-    text: isFilterOperatorText,
-    number: isFilterOperatorNumber,
-    date: isFilterOperatorDate,
-    datetime: isFilterOperatorDatetime,
-    boolean: isFilterOperatorBoolean,
-    tags: isFilterOperatorTags,
-    tagsSingle: isFilterOperatorTagsSingle,
-    unknownType: isFilterOperatorUnknownType
+};
+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
-import { useCallback as useCallback27 } from "react";
 var allowedOperatorsByDataType = {
   text: ["equals", "notEquals", "contains", "notContains", "startsWith", "endsWith", "isUndefined", "isNotUndefined"],
   number: ["equals", "notEquals", "greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual", "between", "notBetween", "isUndefined", "isNotUndefined"],
@@ -15007,7 +14726,7 @@ function tagToLabel(tags, value) {
 function useFilterValueTranslation() {
   const translation = useHightideTranslation();
   const { locale } = useLocale();
-  return useCallback27((value, options) => {
+  return useCallback26((value, options) => {
     const p = value.parameter;
     const tags = options?.tags;
     const dateFormat = value.dataType === "dateTime" ? "dateTime" : "date";
@@ -15209,9 +14928,9 @@ var TableProvider = ({
 }) => {
   const onRowClickStable = useEventCallbackStabilizer(onRowClick);
   const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
-  const [registeredColumns, setRegisteredColumns] = useState28([]);
-  const containerRef = useRef27(null);
-  const [, setTableState] = useState28({
+  const [registeredColumns, setRegisteredColumns] = useState25([]);
+  const containerRef = useRef26(null);
+  const [, setTableState] = useState25({
     columnSizing: {},
     columnOrder: [],
     columnFilters: [],
@@ -15236,16 +14955,16 @@ var TableProvider = ({
       pageSize: 10
     }
   });
-  const [targetWidth, setTargetWidth] = useState28(void 0);
-  useLayoutEffect7(() => {
+  const [targetWidth, setTargetWidth] = useState25(void 0);
+  useLayoutEffect6(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]);
-  useWindowResizeObserver(useCallback28(() => {
+  useWindowResizeObserver(useCallback27(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]));
-  const registerColumn = useCallback28((column) => {
+  const registerColumn = useCallback27((column) => {
     setRegisteredColumns((prev) => {
       return [...prev, column];
     });
@@ -15255,7 +14974,7 @@ var TableProvider = ({
       });
     };
   }, []);
-  const columns = useMemo27(() => {
+  const columns = useMemo25(() => {
     const contextColumns = Array.from(registeredColumns.values());
     if (columnsProp) {
       return [...contextColumns, ...columnsProp];
@@ -15272,7 +14991,7 @@ var TableProvider = ({
     defaultColumn: {
       minSize: 60,
       maxSize: 800,
-      cell: useCallback28(({ cell }) => {
+      cell: useCallback27(({ cell }) => {
         return /* @__PURE__ */ jsx59(TableCell, { children: String(cell.getValue()) });
       }, []),
       enableResizing: true,
@@ -15313,7 +15032,7 @@ var TableProvider = ({
   });
   const pagination = table.getState().pagination;
   const pageCount = table.getPageCount();
-  useEffect36(() => {
+  useEffect30(() => {
     if (pageCount === -1) {
       return;
     }
@@ -15321,20 +15040,20 @@ var TableProvider = ({
       table.setPageIndex(pageCount - 1);
     }
   }, [table, pagination.pageIndex, pageCount]);
-  useEffect36(() => {
+  useEffect30(() => {
     table.setColumnOrder((prev) => [...prev]);
   }, [table, columns]);
   const columnVisibility = table.getState().columnVisibility;
   const columnOrder = table.getState().columnOrder;
   const columnPinning = table.getState().columnPinning;
-  useEffect36(() => {
+  useEffect30(() => {
     table.setColumnSizing((prev) => ({ ...prev }));
   }, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
-  const tableColumnDefinitionContextValue = useMemo27(() => ({
+  const tableColumnDefinitionContextValue = useMemo25(() => ({
     table,
     registerColumn
   }), [table, registerColumn]);
-  const tableContainerContextValue = useMemo27(() => ({
+  const tableContainerContextValue = useMemo25(() => ({
     table,
     containerRef
   }), [table, containerRef]);
@@ -15343,7 +15062,7 @@ var TableProvider = ({
     return rest;
   })();
   const rowModel = table.getRowModel();
-  const tableStateWithoutSizingContextValue = useMemo27(() => ({
+  const tableStateWithoutSizingContextValue = useMemo25(() => ({
     table,
     isUsingFillerRows,
     fillerRowCell,
@@ -15386,7 +15105,7 @@ var TableProvider = ({
   ]);
   const columnSizing = table.getState().columnSizing;
   const columnSizingInfo = table.getState().columnSizingInfo;
-  const tableStateContextValue = useMemo27(() => ({
+  const tableStateContextValue = useMemo25(() => ({
     ...tableStateWithoutSizingContextValue,
     sizeVars: ColumnSizeUtil.toSizeVars(columnSizing),
     columnSizingInfo,
@@ -15397,10 +15116,10 @@ var TableProvider = ({
 
 // src/components/layout/table/TableBody.tsx
 import { flexRender } from "@tanstack/react-table";
-import React6 from "react";
+import React4 from "react";
 import clsx20 from "clsx";
 import { jsx as jsx60, jsxs as jsxs31 } from "react/jsx-runtime";
-var TableBody = React6.memo(function TableBodyVisual() {
+var TableBody = React4.memo(function TableBodyVisual() {
   const { table, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick } = useTableStateWithoutSizingContext();
   const rows = table.getRowModel().rows;
   const columnOrder = table.getState().columnOrder;
@@ -15498,16 +15217,16 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect47, useId as useId18, useMemo as useMemo35, useRef as useRef35, useState as useState36 } from "react";
+import { useEffect as useEffect41, useId as useId18, useMemo as useMemo34, useRef as useRef34, useState as useState33 } from "react";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 
 // src/components/user-interaction/data/FilterPopUp.tsx
 import { TrashIcon, XIcon as XIcon2 } from "lucide-react";
-import { forwardRef as forwardRef23, useId as useId17, useMemo as useMemo34, useState as useState35 } from "react";
+import { forwardRef as forwardRef23, useId as useId17, useMemo as useMemo33, useState as useState32 } from "react";
 
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check2, Minus as Minus2 } from "lucide-react";
-import { useCallback as useCallback29 } from "react";
+import { useCallback as useCallback28 } from "react";
 import { jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
 var Checkbox = ({
   value: controlledValue,
@@ -15525,7 +15244,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback29((value2) => {
+  const onChangeWrapper = useCallback28((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -15569,12 +15288,12 @@ var Checkbox = ({
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef18, useCallback as useCallback32, useEffect as useEffect41, useId as useId14, useImperativeHandle as useImperativeHandle12, useMemo as useMemo31, useRef as useRef31, useState as useState32 } from "react";
+import { forwardRef as forwardRef18, useCallback as useCallback31, useEffect as useEffect35, useId as useId14, useImperativeHandle as useImperativeHandle12, useMemo as useMemo29, useRef as useRef30, useState as useState29 } from "react";
 import { CalendarIcon } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
-import { useEffect as useEffect37, useMemo as useMemo28, useRef as useRef28 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo26, useRef as useRef27 } from "react";
 import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 var TimePicker = ({
   value: controlledValue,
@@ -15593,11 +15312,11 @@ var TimePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const minuteRef = useRef28(null);
-  const hourRef = useRef28(null);
+  const minuteRef = useRef27(null);
+  const hourRef = useRef27(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  const minutes = useMemo28(() => {
+  const minutes = useMemo26(() => {
     const full = range(60);
     switch (minuteIncrement) {
       case "5min":
@@ -15610,7 +15329,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [minuteIncrement]);
-  const seconds = useMemo28(() => {
+  const seconds = useMemo26(() => {
     const full = range(60);
     switch (secondIncrement) {
       case "1s":
@@ -15625,7 +15344,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [secondIncrement]);
-  const milliseconds = useMemo28(() => {
+  const milliseconds = useMemo26(() => {
     const full = range(1e3);
     switch (millisecondIncrement) {
       case "1ms":
@@ -15646,17 +15365,17 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 500 === 0);
     }
   }, [millisecondIncrement]);
-  const closestMinute = useMemo28(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
-  const closestSecond = useMemo28(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
-  const closestMillisecond = useMemo28(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
+  const closestMinute = useMemo26(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = useMemo26(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = useMemo26(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
-  useEffect37(() => {
+  useEffect31(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  useEffect37(() => {
+  useEffect31(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -15755,12 +15474,12 @@ var TimePicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-import { useState as useState30 } from "react";
+import { useState as useState27 } from "react";
 import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown4 } from "lucide-react";
 import clsx23 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
-import { useCallback as useCallback30, useEffect as useEffect38, useMemo as useMemo29, useRef as useRef29 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect32, useMemo as useMemo27, useRef as useRef28 } from "react";
 import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
@@ -15789,33 +15508,33 @@ var DayPicker = ({
   });
   const month = displayedMonth.getMonth();
   const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
-  const selectedButtonRef = useRef29(null);
-  const isValueInDisplayedWeeks = useMemo29(
+  const selectedButtonRef = useRef28(null);
+  const isValueInDisplayedWeeks = useMemo27(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = useCallback30(
+  const firstDayOfMonth = useCallback29(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
   const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
-  useEffect38(() => {
+  useEffect32(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
-  const end = useMemo29(() => {
+  const end = useMemo27(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = useMemo29(() => {
+  const start = useMemo27(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = useCallback30((date) => {
+  const clampToRange = useCallback29((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = useCallback30((candidate) => {
+  const navigateTo = useCallback29((candidate) => {
     const clamped = clampToRange(candidate);
     if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
@@ -15824,7 +15543,7 @@ var DayPicker = ({
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = useCallback30(
+  const onKeyDown = useCallback29(
     (event) => {
       PropsUtil.aria.navigate({
         left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
@@ -15881,7 +15600,7 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback31, useEffect as useEffect39, useMemo as useMemo30, useRef as useRef30, useState as useState29 } from "react";
+import { memo, useCallback as useCallback30, useEffect as useEffect33, useMemo as useMemo28, useRef as useRef29, useState as useState26 } from "react";
 import clsx22 from "clsx";
 import { jsx as jsx65, jsxs as jsxs36 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
@@ -15892,15 +15611,15 @@ var YearRow = memo(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = useRef30(null);
+  const ref = useRef29(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = useState29(false);
-  useEffect39(() => {
+  const [isExpanded, setIsExpanded] = useState26(false);
+  useEffect33(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = useMemo30(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  const monthGrid = useMemo28(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
   return /* @__PURE__ */ jsxs36(
     ExpandableRoot,
     {
@@ -15955,23 +15674,23 @@ var YearMonthPicker = ({
     defaultValue: initialValue
   });
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const monthNames = useMemo30(() => {
+  const monthNames = useMemo28(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = useMemo30(
+  const years = useMemo28(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = useMemo30(() => {
+  const minTimestamp = useMemo28(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = useMemo30(() => {
+  const maxTimestamp = useMemo28(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = useCallback31((newDate) => {
+  const handleSelect = useCallback30((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
@@ -16024,8 +15743,8 @@ var DatePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [displayedMonth, setDisplayedMonth] = useState30(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = useState30(initialDisplay);
+  const [displayedMonth, setDisplayedMonth] = useState27(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = useState27(initialDisplay);
   return /* @__PURE__ */ jsxs37("div", { className: clsx23("flex-col-3", className), children: [
     /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs37(
@@ -16187,7 +15906,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
-import { useEffect as useEffect40, useState as useState31 } from "react";
+import { useEffect as useEffect34, useState as useState28 } from "react";
 import { Fragment as Fragment6, jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
 var DateTimePickerDialog = ({
   initialValue = null,
@@ -16215,8 +15934,8 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [pickerState, setPickerState] = useState31(state ?? /* @__PURE__ */ new Date());
-  useEffect40(() => {
+  const [pickerState, setPickerState] = useState28(state ?? /* @__PURE__ */ new Date());
+  useEffect34(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
   return /* @__PURE__ */ jsxs39(Fragment6, { children: [
@@ -16316,40 +16035,41 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
   readOnly = false,
   invalid = false,
   required = false,
+  actions = [],
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = useState32(false);
+  const [isOpen, setIsOpen] = useState29(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = useState32(state);
-  const [stringInputState, setStringInputState] = useState32({
+  const [dialogValue, setDialogValue] = useState29(state);
+  const [stringInputState, setStringInputState] = useState29({
     state: state ? DateUtils.toInputString(state, mode, precision) : "",
     date: void 0
   });
-  useEffect41(() => {
+  useEffect35(() => {
     setDialogValue(state);
     setStringInputState({
       state: state ? DateUtils.toInputString(state, mode) : "",
       date: void 0
     });
   }, [mode, state]);
-  const changeOpenWrapper = useCallback32((isOpen2) => {
+  const changeOpenWrapper = useCallback31((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
   const generatedId = useId14();
-  const ids = useMemo31(() => ({
+  const ids = useMemo29(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
-  const innerRef = useRef31(null);
+  const innerRef = useRef30(null);
   useImperativeHandle12(forwardedRef, () => innerRef.current);
-  useEffect41(() => {
+  useEffect35(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
@@ -16367,6 +16087,12 @@ var DateTimeInput = forwardRef18(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());
@@ -16407,24 +16133,26 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
           ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
         }
       ),
-      /* @__PURE__ */ jsx69(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx69(
-        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__ */ jsx69(CalendarIcon, { className: "size-5" })
-        }
-      ) })
+      /* @__PURE__ */ jsxs40("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex-row-0", children: [
+        actions,
+        /* @__PURE__ */ jsx69(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx69(
+          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__ */ jsx69(CalendarIcon, { className: "size-5" })
+          }
+        ) })
+      ] })
     ] }),
     /* @__PURE__ */ jsx69(
       PopUp,
@@ -16478,7 +16206,7 @@ var DateTimeInput = forwardRef18(function DateTimeInput2({
 import { forwardRef as forwardRef22 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-import { useCallback as useCallback34, useEffect as useEffect43, useId as useId15, useMemo as useMemo33, useState as useState34 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect37, useId as useId15, useMemo as useMemo32, useState as useState31 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
 import { createContext as createContext15, useContext as useContext17 } from "react";
@@ -16492,10 +16220,51 @@ function useMultiSelectContext() {
 // src/components/user-interaction/MultiSelect/useMultiSelect.ts
 import {
   useCallback as useCallback33,
-  useEffect as useEffect42,
-  useMemo as useMemo32,
-  useState as useState33
+  useEffect as useEffect36,
+  useMemo as useMemo31,
+  useState as useState30
 } from "react";
+
+// src/hooks/useMultiSelection.ts
+import { useCallback as useCallback32, useMemo as useMemo30 } from "react";
+function useMultiSelection({
+  options: optionsList,
+  value,
+  onSelectionChange,
+  initialSelection = [],
+  isControlled
+}) {
+  const [selection, setSelection] = useControlledState({
+    value,
+    onValueChange: onSelectionChange,
+    defaultValue: [...initialSelection],
+    isControlled
+  });
+  const isSelected = useCallback32((id) => selection.includes(id), [selection]);
+  const toggleSelection = useCallback32(
+    (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 = useCallback32(
+    (next) => setSelection(Array.from(next)),
+    [setSelection]
+  );
+  return useMemo30(
+    () => ({
+      selection,
+      setSelection: setSelectionValue,
+      toggleSelection,
+      isSelected
+    }),
+    [selection, setSelectionValue, toggleSelection, isSelected]
+  );
+}
+
+// src/components/user-interaction/MultiSelect/useMultiSelect.ts
 function useMultiSelect({
   options,
   value: controlledValue,
@@ -16506,9 +16275,9 @@ function useMultiSelect({
   initialIsOpen = false,
   typeAheadResetMs = 500
 }) {
-  const [isOpen, setIsOpen] = useState33(initialIsOpen);
-  const [searchQuery, setSearchQuery] = useState33("");
-  const selectionOptions = useMemo32(
+  const [isOpen, setIsOpen] = useState30(initialIsOpen);
+  const [searchQuery, setSearchQuery] = useState30("");
+  const selectionOptions = useMemo31(
     () => options.map((o) => ({ id: o.id, disabled: o.disabled })),
     [options]
   );
@@ -16526,11 +16295,11 @@ function useMultiSelect({
     searchQuery,
     toTags: useCallback33((o) => [o.label ?? ""], [])
   });
-  const visibleOptionIds = useMemo32(
+  const visibleOptionIds = useMemo31(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptions = useMemo32(
+  const enabledOptions = useMemo31(
     () => visibleOptions.filter((o) => !o.disabled),
     [visibleOptions]
   );
@@ -16551,7 +16320,7 @@ function useMultiSelect({
     )
   });
   const { reset: typeAheadReset, addToTypeAhead } = typeAhead;
-  useEffect42(() => {
+  useEffect36(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
   const highlightItem = useCallback33((id) => {
@@ -16604,7 +16373,7 @@ function useMultiSelect({
     },
     [isOpen, setIsOpenWrapper]
   );
-  const state = useMemo32(
+  const state = useMemo31(
     () => ({
       value: [...selection],
       highlightedId: listNav.highlightedId,
@@ -16620,11 +16389,11 @@ function useMultiSelect({
       options
     ]
   );
-  const computedState = useMemo32(
+  const computedState = useMemo31(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = useMemo32(
+  const actions = useMemo31(
     () => ({
       setIsOpen: setIsOpenWrapper,
       toggleOpen: toggleOpenWrapper,
@@ -16653,7 +16422,7 @@ function useMultiSelect({
       addToTypeAhead
     ]
   );
-  return useMemo32(
+  return useMemo31(
     () => ({
       ...state,
       ...computedState,
@@ -16681,10 +16450,10 @@ function MultiSelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = useState34(null);
-  const [options, setOptions] = useState34([]);
+  const [triggerRef, setTriggerRef] = useState31(null);
+  const [options, setOptions] = useState31([]);
   const generatedId = useId15();
-  const [ids, setIds] = useState34({
+  const [ids, setIds] = useState31({
     trigger: "multi-select-" + generatedId,
     content: "multi-select-content-" + generatedId,
     listbox: "multi-select-listbox-" + generatedId,
@@ -16703,8 +16472,8 @@ function MultiSelectRoot({
     setTriggerRef(ref);
     return () => setTriggerRef(null);
   }, []);
-  const compare = useMemo33(() => compareFunction ?? Object.is, [compareFunction]);
-  const idToOptionMap = useMemo33(
+  const compare = useMemo32(() => compareFunction ?? Object.is, [compareFunction]);
+  const idToOptionMap = useMemo32(
     () => options.reduce(
       (acc, o) => {
         acc[o.id] = o;
@@ -16714,11 +16483,11 @@ function MultiSelectRoot({
     ),
     [options]
   );
-  const mappedValueIds = useMemo33(() => {
+  const mappedValueIds = useMemo32(() => {
     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 = useMemo33(() => {
+  const mappedInitialValueIds = useMemo32(() => {
     if (initialValue == null) return [];
     return initialValue.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, initialValue, compare]);
@@ -16746,12 +16515,12 @@ function MultiSelectRoot({
     onClose
   });
   const { setSearchQuery } = state;
-  useEffect43(() => {
+  useEffect37(() => {
     if (showSearch === false) {
       setSearchQuery("");
     }
   }, [showSearch, setSearchQuery]);
-  const contextValue = useMemo33(() => {
+  const contextValue = useMemo32(() => {
     const valueT = state.value.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
     return {
       invalid,
@@ -16822,12 +16591,12 @@ function MultiSelectRoot({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-import { forwardRef as forwardRef20, useEffect as useEffect45, useImperativeHandle as useImperativeHandle13, useRef as useRef33 } from "react";
+import { forwardRef as forwardRef20, useEffect as useEffect39, useImperativeHandle as useImperativeHandle13, useRef as useRef32 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
 import clsx25 from "clsx";
 import { CheckIcon as CheckIcon2 } from "lucide-react";
-import { createContext as createContext16, forwardRef as forwardRef19, useContext as useContext18, useEffect as useEffect44, useId as useId16, useRef as useRef32 } from "react";
+import { createContext as createContext16, forwardRef as forwardRef19, useContext as useContext18, useEffect as useEffect38, useId as useId16, useRef as useRef31 } from "react";
 import { jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
 var MultiSelectOptionDisplayContext = createContext16(null);
 function useMultiSelectOptionDisplayLocation() {
@@ -16849,12 +16618,12 @@ var MultiSelectOption = forwardRef19(function MultiSelectOption2({
 }, ref) {
   const context = useMultiSelectContext();
   const { registerOption } = context;
-  const itemRef = useRef32(null);
+  const itemRef = useRef31(null);
   const display = children ?? label;
   const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
   const generatedId = useId16();
   const optionId = props?.id ?? "multi-select-option-" + generatedId;
-  useEffect44(() => {
+  useEffect38(() => {
     return registerOption({
       id: optionId,
       value,
@@ -16935,12 +16704,12 @@ var MultiSelectButton = forwardRef20(function MultiSelectButton2({
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  useEffect45(() => {
+  useEffect39(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = useRef33(null);
+  const innerRef = useRef32(null);
   useImperativeHandle13(ref, () => innerRef.current);
-  useEffect45(() => {
+  useEffect39(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -17003,18 +16772,18 @@ var MultiSelectButton = forwardRef20(function MultiSelectButton2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-import { forwardRef as forwardRef21, useCallback as useCallback35, useEffect as useEffect46, useImperativeHandle as useImperativeHandle14, useRef as useRef34 } from "react";
+import { forwardRef as forwardRef21, useCallback as useCallback35, useEffect as useEffect40, useImperativeHandle as useImperativeHandle14, useRef as useRef33 } from "react";
 import clsx26 from "clsx";
 import { jsx as jsx73, jsxs as jsxs43 } from "react/jsx-runtime";
 var MultiSelectContent = forwardRef21(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = useRef34(null);
-  const searchInputRef = useRef34(null);
+  const innerRef = useRef33(null);
+  const searchInputRef = useRef33(null);
   useImperativeHandle14(ref, () => innerRef.current);
   const context = useMultiSelectContext();
   const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
   const { setIds } = config;
-  useEffect46(() => {
+  useEffect40(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
@@ -17166,7 +16935,6 @@ var FilterBasePopUp = forwardRef23(function FilterBasePopUp2({
   onOperatorChange,
   onRemove,
   allowedOperators,
-  hasValue,
   noParameterRequired = false,
   ...props
 }, ref) {
@@ -17196,28 +16964,30 @@ var FilterBasePopUp = forwardRef23(function FilterBasePopUp2({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx75(Visibility, { isVisible: hasValue, children: /* @__PURE__ */ jsx75(
-            IconButton,
-            {
-              tooltip: translation("removeFilter"),
-              onClick: onRemove,
-              color: "negative",
-              coloringStyle: "text",
-              size: "sm",
-              children: /* @__PURE__ */ jsx75(TrashIcon, { className: "size-4" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx75(Visibility, { isVisible: !hasValue, children: /* @__PURE__ */ jsx75(
-            IconButton,
-            {
-              tooltip: translation("close"),
-              onClick: props.onClose,
-              color: "neutral",
-              coloringStyle: "text",
-              size: "sm",
-              children: /* @__PURE__ */ jsx75(XIcon2, { className: "size-4" })
-            }
-          ) })
+          /* @__PURE__ */ jsxs46("div", { className: "flex-row-0 items-center", children: [
+            /* @__PURE__ */ jsx75(
+              IconButton,
+              {
+                tooltip: translation("removeFilter"),
+                onClick: onRemove,
+                color: "negative",
+                coloringStyle: "text",
+                size: "sm",
+                children: /* @__PURE__ */ jsx75(TrashIcon, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx75(
+              IconButton,
+              {
+                tooltip: translation("close"),
+                onClick: props.onClose,
+                color: "neutral",
+                coloringStyle: "text",
+                size: "sm",
+                children: /* @__PURE__ */ jsx75(XIcon2, { className: "size-4" })
+              }
+            )
+          ] })
         ] }),
         children,
         /* @__PURE__ */ jsx75(Visibility, { isVisible: noParameterRequired, children: /* @__PURE__ */ jsx75("div", { className: "flex-row-0 items-center text-sm text-description h-element-sm", children: translation("noParameterRequired") }) })
@@ -17238,7 +17008,7 @@ var TextFilterPopUp = forwardRef23(function TextFilterPopUp2({
     search: `text-filter-search-${id}`,
     caseSensitive: `text-filter-case-sensitive-${id}`
   };
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.text(suggestion)) {
       return "contains";
@@ -17257,7 +17027,6 @@ var TextFilterPopUp = forwardRef23(function TextFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "text", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.text,
-      hasValue: !!value,
       noParameterRequired: !needsParameterInput,
       children: /* @__PURE__ */ jsxs46(Visibility, { isVisible: needsParameterInput, children: [
         /* @__PURE__ */ jsxs46("div", { className: "flex-col-1", children: [
@@ -17314,7 +17083,7 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
     max: `number-filter-max-${id}`,
     compareValue: `number-filter-compare-value-${id}`
   };
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.number(suggestion)) {
       return "between";
@@ -17336,7 +17105,6 @@ var NumberFilterPopUp = forwardRef23(function NumberFilterPopUp2({
       },
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.number,
-      hasValue: !!value,
       noParameterRequired: !needsParameterInput,
       children: [
         /* @__PURE__ */ jsxs46(Visibility, { isVisible: needsRangeInput, children: [
@@ -17418,7 +17186,7 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
     endDate: `date-filter-end-date-${id}`,
     compareDate: `date-filter-compare-date-${id}`
   };
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.date(suggestion)) {
       return "between";
@@ -17426,8 +17194,8 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState35(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState35(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState32(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState32(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ jsxs46(
@@ -17440,7 +17208,6 @@ var DateFilterPopUp = forwardRef23(function DateFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "date", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.date,
-      hasValue: !!value,
       noParameterRequired: !needsParameterInput,
       children: [
         /* @__PURE__ */ jsxs46(Visibility, { isVisible: needsRangeInput, children: [
@@ -17561,7 +17328,7 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
     endDate: `datetime-filter-end-date-${id}`,
     compareDate: `datetime-filter-compare-date-${id}`
   };
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.datetime(suggestion)) {
       return "between";
@@ -17569,8 +17336,8 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState35(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState35(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState32(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState32(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ jsxs46(
@@ -17583,7 +17350,6 @@ var DatetimeFilterPopUp = forwardRef23(function DatetimeFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "dateTime", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.dateTime,
-      hasValue: !!value,
       children: [
         /* @__PURE__ */ jsx75("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
         /* @__PURE__ */ jsx75(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs46("div", { className: "flex-col-2 gap-2", children: [
@@ -17697,7 +17463,7 @@ var BooleanFilterPopUp = forwardRef23(function BooleanFilterPopUp2({
   onRemove,
   ...props
 }, ref) {
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "isTrue";
     if (!FilterOperatorUtils.typeCheck.boolean(suggestion)) {
       return "isTrue";
@@ -17714,8 +17480,7 @@ var BooleanFilterPopUp = forwardRef23(function BooleanFilterPopUp2({
       operator,
       onOperatorChange: (newOperator) => onValueChange({ dataType: "boolean", parameter, operator: newOperator }),
       onRemove,
-      allowedOperators: FilterOperatorUtils.operatorsByCategory.boolean,
-      hasValue: !!value
+      allowedOperators: FilterOperatorUtils.operatorsByCategory.boolean
     }
   );
 });
@@ -17728,7 +17493,7 @@ var TagsFilterPopUp = forwardRef23(function TagsFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tags(suggestion)) {
       return "contains";
@@ -17751,7 +17516,6 @@ var TagsFilterPopUp = forwardRef23(function TagsFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "multiTags", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.multiTags,
-      hasValue: !!value,
       children: [
         /* @__PURE__ */ jsx75("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
         /* @__PURE__ */ jsx75(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ jsx75(
@@ -17783,7 +17547,7 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
       return "contains";
@@ -17808,7 +17572,6 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
       onOperatorChange: (newOperator) => onValueChange({ dataType: "singleTag", parameter, operator: newOperator }),
       onRemove,
       allowedOperators: FilterOperatorUtils.operatorsByCategory.singleTag,
-      hasValue: !!value,
       children: [
         /* @__PURE__ */ jsx75("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
         /* @__PURE__ */ jsx75(Visibility, { isVisible: needsParameterInput && needsMultiSelect, children: /* @__PURE__ */ jsx75(
@@ -17847,7 +17610,7 @@ var TagsSingleFilterPopUp = forwardRef23(function TagsSingleFilterPopUp2({
   );
 });
 var GenericFilterPopUp = forwardRef23(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
-  const operator = useMemo34(() => {
+  const operator = useMemo33(() => {
     const suggestion = value?.operator ?? "isNotUndefined";
     if (!FilterOperatorUtils.typeCheck.unknownType(suggestion)) {
       return "isNotUndefined";
@@ -17863,8 +17626,7 @@ var GenericFilterPopUp = forwardRef23(function GenericFilterPopUp2({ name, value
       operator,
       onOperatorChange: (newOperator) => onValueChange({ ...value, operator: newOperator }),
       onRemove: () => onValueChange({ ...value, operator: void 0 }),
-      allowedOperators: FilterOperatorUtils.operatorsByCategory.unknownType,
-      hasValue: !!value
+      allowedOperators: FilterOperatorUtils.operatorsByCategory.unknownType
     }
   );
 });
@@ -17905,18 +17667,18 @@ var TableFilterButton = ({
   const translation = useHightideTranslation();
   const column = header.column;
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState36(columnFilterValue);
+  const [filterValue, setFilterValue] = useState33(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = useRef35(null);
-  const containerRef = useRef35(null);
-  const [isOpen, setIsOpen] = useState36(false);
+  const anchorRef = useRef34(null);
+  const containerRef = useRef34(null);
+  const [isOpen, setIsOpen] = useState33(false);
   const id = useId18();
-  const ids = useMemo35(() => ({
+  const ids = useMemo34(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  useEffect47(() => {
+  useEffect41(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -17977,7 +17739,7 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback36, useEffect as useEffect48 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect42 } from "react";
 
 // src/components/user-interaction/data/data-types.tsx
 import { Binary, Calendar as Calendar2, CalendarClock, Check as Check3, Database, Tag, Tags, TextIcon } from "lucide-react";
@@ -18075,7 +17837,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  useEffect48(() => {
+  useEffect42(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -18104,7 +17866,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: clsx28("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs48("div", { className: "flex-row-1 items-center", children: [
+            /* @__PURE__ */ jsx78(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs48("div", { className: "flex-row-1 items-center truncate", children: [
               /* @__PURE__ */ jsx78(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx78(
                 TableSortButton,
                 {
@@ -18244,7 +18006,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-import { useCallback as useCallback37, useMemo as useMemo36 } from "react";
+import { useCallback as useCallback37, useMemo as useMemo35 } from "react";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
@@ -18257,7 +18019,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = useMemo36(() => [
+  const columnDef = useMemo35(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -18360,7 +18122,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect49, useMemo as useMemo37, useState as useState37 } from "react";
+import { memo as memo2, useEffect as useEffect43, useMemo as useMemo36, useState as useState34 } from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -18372,11 +18134,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] = useState37({
+  const [column] = useState34({
     ...props,
     filterFn
   });
-  useEffect49(() => {
+  useEffect43(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -18391,27 +18153,29 @@ var TableColumnFactory = () => memo2(
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = useMemo37(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = useMemo36(() => TableColumnFactory(), []);
   return /* @__PURE__ */ jsx83(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo38, useRef as useRef36, useId as useId19 } from "react";
-import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
+import { useMemo as useMemo37, useRef as useRef35, useId as useId19 } from "react";
+import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, Columns3Cog } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx84, jsxs as jsxs52 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = useRef36(null);
+  const containerRef = useRef35(null);
   const generatedId = useId19();
-  const ids = useMemo38(() => ({
+  const ids = useMemo37(() => ({
     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 = useMemo38(() => {
+  const columns = useMemo37(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -18612,7 +18376,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
             ] }) }),
             /* @__PURE__ */ jsx84("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
             /* @__PURE__ */ jsxs52(Fragment10, { children: [
-              /* @__PURE__ */ jsx84(
+              /* @__PURE__ */ jsx84(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx84(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -18624,8 +18388,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
                   children: isVisible ? /* @__PURE__ */ jsx84(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx84(EyeOff, { className: "size-4" })
                 }
-              ),
-              /* @__PURE__ */ jsx84(
+              ) }),
+              /* @__PURE__ */ jsx84(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ jsx84(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -18643,7 +18407,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
                   children: !isPinned ? /* @__PURE__ */ jsx84(PinOff, { className: "size-4" }) : /* @__PURE__ */ jsx84(Pin, { className: "size-4" })
                 }
-              )
+              ) })
             ] })
           ] }, columnId);
         }) })
@@ -18661,7 +18425,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ jsx84(ArrowLeftRightIcon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx84(Columns3Cog, { className: "size-5" })
       }
     ) }),
     /* @__PURE__ */ jsx84(TableColumnSwitcherPopUp, { ...props })
@@ -18672,7 +18436,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 import { forwardRef as forwardRef26 } from "react";
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-import { useCallback as useCallback39, useId as useId20, useMemo as useMemo40, useState as useState38 } from "react";
+import { useCallback as useCallback39, useId as useId20, useMemo as useMemo39, useState as useState35 } from "react";
 
 // src/components/user-interaction/Combobox/ComboboxContext.tsx
 import { createContext as createContext17, useContext as useContext19 } from "react";
@@ -18686,7 +18450,7 @@ function useComboboxContext() {
 }
 
 // src/components/user-interaction/Combobox/useCombobox.ts
-import { useCallback as useCallback38, useMemo as useMemo39 } from "react";
+import { useCallback as useCallback38, useMemo as useMemo38 } from "react";
 function useCombobox({
   options,
   searchQuery: controlledSearchQuery,
@@ -18703,11 +18467,11 @@ function useCombobox({
     searchQuery: searchQuery ?? "",
     toTags: useCallback38((o) => [o.label], [])
   });
-  const visibleOptionIds = useMemo39(
+  const visibleOptionIds = useMemo38(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptionIds = useMemo39(
+  const enabledOptionIds = useMemo38(
     () => visibleOptions.filter((o) => !o.disabled).map((o) => o.id),
     [visibleOptions]
   );
@@ -18719,18 +18483,18 @@ function useCombobox({
     },
     [enabledOptionIds, listNav]
   );
-  const state = useMemo39(
+  const state = useMemo38(
     () => ({
       searchQuery: searchQuery ?? "",
       highlightedId: listNav.highlightedId
     }),
     [searchQuery, listNav.highlightedId]
   );
-  const computedState = useMemo39(
+  const computedState = useMemo38(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = useMemo39(
+  const actions = useMemo38(
     () => ({
       setSearchQuery,
       highlightFirst: listNav.first,
@@ -18741,7 +18505,7 @@ function useCombobox({
     }),
     [setSearchQuery, listNav.first, listNav.last, listNav.next, listNav.previous, highlightItem]
   );
-  return useMemo39(
+  return useMemo38(
     () => ({
       ...state,
       ...computedState,
@@ -18758,10 +18522,10 @@ function ComboboxRoot({
   onItemClick,
   ...hookProps
 }) {
-  const [options, setOptions] = useState38([]);
-  const [listRef, setListRef] = useState38(null);
+  const [options, setOptions] = useState35([]);
+  const [listRef, setListRef] = useState35(null);
   const generatedId = useId20();
-  const [ids, setIds] = useState38({
+  const [ids, setIds] = useState35({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`
   });
@@ -18781,7 +18545,7 @@ function ComboboxRoot({
     setListRef(() => ref);
     return () => setListRef(null);
   }, []);
-  const hookOptions = useMemo40(
+  const hookOptions = useMemo39(
     () => options.map((o) => ({
       id: o.id,
       label: o.label,
@@ -18790,7 +18554,7 @@ function ComboboxRoot({
     [options]
   );
   const state = useCombobox({ ...hookProps, options: hookOptions });
-  const idToOptionMap = useMemo40(() => {
+  const idToOptionMap = useMemo39(() => {
     return options.reduce((acc, o) => {
       acc[o.id] = o;
       return acc;
@@ -18803,25 +18567,25 @@ function ComboboxRoot({
     },
     [idToOptionMap, onItemClick]
   );
-  const config = useMemo40(
+  const config = useMemo39(
     () => ({ ids, setIds }),
     [ids, setIds]
   );
-  const layout = useMemo40(
+  const layout = useMemo39(
     () => ({
       listRef: listRef ?? { current: null },
       registerList
     }),
     [listRef, registerList]
   );
-  const search = useMemo40(
+  const search = useMemo39(
     () => ({
       searchQuery: state.searchQuery,
       setSearchQuery: state.setSearchQuery
     }),
     [state.searchQuery, state.setSearchQuery]
   );
-  const contextValue = useMemo40(
+  const contextValue = useMemo39(
     () => ({
       highlightedId: state.highlightedId,
       options,
@@ -18918,7 +18682,7 @@ var ComboboxInput = forwardRef24(
 );
 
 // src/components/user-interaction/Combobox/ComboboxList.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect50, useRef as useRef37 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect44, useRef as useRef36 } from "react";
 import clsx31 from "clsx";
 import { jsx as jsx87, jsxs as jsxs53 } from "react/jsx-runtime";
 var ComboboxList = forwardRef25(
@@ -18927,8 +18691,8 @@ var ComboboxList = forwardRef25(
     const context = useComboboxContext();
     const { layout } = context;
     const { registerList } = layout;
-    const innerRef = useRef37(null);
-    useEffect50(() => {
+    const innerRef = useRef36(null);
+    useEffect44(() => {
       return registerList(innerRef);
     }, [registerList]);
     const setRefs = (node) => {
@@ -18995,7 +18759,7 @@ var Combobox = forwardRef26(function Combobox2({
 });
 
 // src/components/user-interaction/Combobox/ComboboxOption.tsx
-import { forwardRef as forwardRef27, useEffect as useEffect51, useId as useId21, useRef as useRef38 } from "react";
+import { forwardRef as forwardRef27, useEffect as useEffect45, useId as useId21, useRef as useRef37 } from "react";
 import clsx32 from "clsx";
 import { jsx as jsx89 } from "react/jsx-runtime";
 var ComboboxOption = forwardRef27(function ComboboxOption2({
@@ -19009,11 +18773,11 @@ var ComboboxOption = forwardRef27(function ComboboxOption2({
 }, ref) {
   const context = useComboboxContext();
   const { registerOption } = context;
-  const itemRef = useRef38(null);
+  const itemRef = useRef37(null);
   const generatedId = useId21();
   const optionId = idProp ?? `combobox-option-${generatedId}`;
   const resolvedDisplay = children ?? label;
-  useEffect51(() => {
+  useEffect45(() => {
     return registerOption({
       id: optionId,
       value,
@@ -19023,7 +18787,7 @@ var ComboboxOption = forwardRef27(function ComboboxOption2({
       ref: itemRef
     });
   }, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
-  useEffect51(() => {
+  useEffect45(() => {
     if (context.highlightedId === optionId) {
       itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
     }
@@ -19069,7 +18833,7 @@ var ComboboxOption = forwardRef27(function ComboboxOption2({
 ComboboxOption.displayName = "ComboboxOption";
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-import { useState as useState39 } from "react";
+import { useState as useState36 } from "react";
 import { clsx as clsx33 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -19092,7 +18856,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState39(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState36(false);
   return /* @__PURE__ */ jsxs55(
     TooltipRoot,
     {
@@ -19141,7 +18905,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback41, useRef as useRef39, useState as useState40 } from "react";
+import { useCallback as useCallback41, useRef as useRef38, useState as useState37 } from "react";
 import clsx34 from "clsx";
 import { Fragment as Fragment11, jsx as jsx91, jsxs as jsxs56 } from "react/jsx-runtime";
 var MenuItem = ({
@@ -19167,8 +18931,8 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = useRef39(null);
-  const [isOpen, setIsOpen] = useState40(false);
+  const triggerRef = useRef38(null);
+  const [isOpen, setIsOpen] = useState37(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -19198,7 +18962,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef28, useEffect as useEffect52, useImperativeHandle as useImperativeHandle15, useRef as useRef40 } from "react";
+import { forwardRef as forwardRef28, useEffect as useEffect46, useImperativeHandle as useImperativeHandle15, useRef as useRef39 } from "react";
 import { XIcon as XIcon3, Plus } from "lucide-react";
 import { jsx as jsx92, jsxs as jsxs57 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef28(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
@@ -19207,12 +18971,12 @@ var MultiSelectChipDisplayButton = forwardRef28(function MultiSelectChipDisplayB
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  useEffect52(() => {
+  useEffect46(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = useRef40(null);
+  const innerRef = useRef39(null);
   useImperativeHandle15(ref, () => innerRef.current);
-  useEffect52(() => {
+  useEffect46(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -19302,7 +19066,7 @@ var MultiSelectChipDisplay = forwardRef28(
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback42, useEffect as useEffect53, useState as useState41 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect47, useState as useState38 } from "react";
 import clsx35 from "clsx";
 import { jsx as jsx93, jsxs as jsxs58 } from "react/jsx-runtime";
 var up = 1;
@@ -19323,7 +19087,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState41({
+  }, setAnimation] = useState38({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -19422,7 +19186,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect53(() => {
+  useEffect47(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -19644,20 +19408,20 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/data/FilterList.tsx
-import { useMemo as useMemo41, useState as useState42 } from "react";
+import { useMemo as useMemo40, useState as useState39 } from "react";
 import { PlusIcon } from "lucide-react";
-import { jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
-  const activeIds = useMemo41(() => value.map((item) => item.id), [value]);
-  const inactiveItems = useMemo41(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
-  const itemRecord = useMemo41(() => availableItems.reduce((acc, item) => {
+  const activeIds = useMemo40(() => value.map((item) => item.id), [value]);
+  const inactiveItems = useMemo40(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
+  const itemRecord = useMemo40(() => availableItems.reduce((acc, item) => {
     acc[item.id] = item;
     return acc;
   }, {}), [availableItems]);
-  const [editState, setEditState] = useState42(void 0);
-  const valueWithEditState = useMemo41(() => {
+  const [editState, setEditState] = useState39(void 0);
+  const valueWithEditState = useMemo40(() => {
     let foundEditValue = false;
     for (const item of value) {
       if (item.id === editState?.id) {
@@ -19670,9 +19434,9 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ jsxs60("div", { className: "flex-row-1 flex-wrap gap-y-1", children: [
+  return /* @__PURE__ */ jsxs60("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
     /* @__PURE__ */ jsxs60(PopUpRoot, { children: [
-      /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", children: [
+      /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
         /* @__PURE__ */ jsx96(PlusIcon, { className: "size-4" })
       ] }) }),
@@ -19721,11 +19485,11 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props, isOpen }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal", size: "sm", children: [
-              item.label + ": " + filterValueToLabel(columnFilter.value, { tags: item.tags }),
-              /* @__PURE__ */ jsx96(ExpansionIcon, { isExpanded: isOpen })
-            ] }) }),
-            item.popUpBuilder ? /* @__PURE__ */ jsx96(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder({
+            /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx96(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
+              /* @__PURE__ */ jsx96("span", { className: "font-bold", children: item.label }),
+              filterValueToLabel(columnFilter.value, { tags: item.tags })
+            ] }) }) }),
+            /* @__PURE__ */ jsx96(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
               onRemove: () => {
@@ -19737,7 +19501,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
               name: item.label,
               isOpen,
               close: () => setIsOpen(false)
-            }) }) : /* @__PURE__ */ jsx96(
+            }) : /* @__PURE__ */ jsx96(
               FilterPopUp,
               {
                 name: item.label,
@@ -19750,9 +19514,10 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
                 onRemove: () => {
                   onValueChange(value.filter((prevItem) => prevItem.id !== columnFilter.id));
                   setEditState(void 0);
-                }
+                },
+                onClose: () => setIsOpen(false)
               }
-            )
+            ) })
           ]
         },
         columnFilter.id
@@ -19761,8 +19526,142 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
   ] });
 };
 
+// src/components/user-interaction/data/SortingList.tsx
+import { useMemo as useMemo41 } from "react";
+import { ArrowDownWideNarrow, ArrowUpNarrowWide, PlusIcon as PlusIcon2, TrashIcon as TrashIcon2, XIcon as XIcon4 } from "lucide-react";
+import clsx37 from "clsx";
+import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
+var SortingList = ({ sorting, onSortingChange, availableItems }) => {
+  const translation = useHightideTranslation();
+  const activeIds = useMemo41(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = useMemo41(
+    () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
+    [availableItems, activeIds]
+  );
+  const itemRecord = useMemo41(
+    () => availableItems.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    ),
+    [availableItems]
+  );
+  const setSortDirection = (columnId, desc) => {
+    onSortingChange(sorting.map((s) => s.id === columnId ? { ...s, desc } : s));
+  };
+  const removeSort = (columnId) => {
+    onSortingChange(sorting.filter((s) => s.id !== columnId));
+  };
+  return /* @__PURE__ */ jsxs61("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ jsxs61(PopUpRoot, { children: [
+      /* @__PURE__ */ jsx97(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs61(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+        translation("addSorting"),
+        /* @__PURE__ */ jsx97(PlusIcon2, { className: "size-4" })
+      ] }) }),
+      /* @__PURE__ */ jsx97(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx97(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx97(
+        Combobox,
+        {
+          onItemClick: (id) => {
+            const item = itemRecord[id];
+            if (!item) return;
+            onSortingChange([...sorting, { id: item.id, desc: false }]);
+            setIsOpen(false);
+          },
+          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs61(ComboboxOption, { value: item.id, label: item.label, children: [
+            DataTypeUtils.toIcon(item.dataType),
+            item.label
+          ] }, item.id))
+        }
+      ) }) })
+    ] }),
+    sorting.map((columnSort) => {
+      const item = itemRecord[columnSort.id];
+      if (!item) return null;
+      return /* @__PURE__ */ jsxs61(PopUpRoot, { children: [
+        /* @__PURE__ */ jsx97(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs61(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ jsx97("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ jsx97(ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ jsx97(ArrowUpNarrowWide, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ jsx97(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsxs61(
+          PopUp,
+          {
+            className: clsx37("flex-col-3 p-3 min-w-64"),
+            onClose: () => setIsOpen(false),
+            children: [
+              /* @__PURE__ */ jsxs61("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ jsx97("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ jsxs61("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ jsx97(
+                    IconButton,
+                    {
+                      tooltip: translation("removeFilter"),
+                      onClick: () => {
+                        removeSort(columnSort.id);
+                        setIsOpen(false);
+                      },
+                      color: "negative",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ jsx97(TrashIcon2, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx97(
+                    IconButton,
+                    {
+                      tooltip: translation("close"),
+                      onClick: () => setIsOpen(false),
+                      color: "neutral",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ jsx97(XIcon4, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs61("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ jsxs61(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "neutral" : "primary",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, false),
+                    children: [
+                      /* @__PURE__ */ jsx97(ArrowUpNarrowWide, { className: "size-4" }),
+                      translation("sortAsc")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs61(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "primary" : "neutral",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, true),
+                    children: [
+                      /* @__PURE__ */ jsx97(ArrowDownWideNarrow, { className: "size-4" }),
+                      translation("sortDesc")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] }, columnSort.id);
+    })
+  ] });
+};
+
 // src/components/user-interaction/date/TimeDisplay.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -19799,15 +19698,80 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx97("span", { children: fullString });
+  return /* @__PURE__ */ jsx98("span", { children: fullString });
 };
 
+// src/components/user-interaction/input/FlexibleDateTimeInput.tsx
+import { forwardRef as forwardRef30, useMemo as useMemo42, useState as useState40 } from "react";
+import { ClockFading, ClockPlus } from "lucide-react";
+import { jsx as jsx99 } from "react/jsx-runtime";
+var FlexibleDateTimeInput = forwardRef30(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 = useMemo42(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
+  const [preferredMode, setPreferredMode] = useState40(defaultMode);
+  const mode = useMemo42(() => {
+    if (!value) return preferredMode;
+    if (DateUtils.sameTime(value, fixedTime, true, true)) {
+      return "date";
+    }
+    return "dateTime";
+  }, [preferredMode, value, fixedTime]);
+  return /* @__PURE__ */ jsx99(
+    DateTimeInput,
+    {
+      ...props,
+      ref: forwardedRef,
+      mode,
+      value,
+      onValueChange: setValue,
+      actions: [
+        ...actions,
+        /* @__PURE__ */ jsx99(
+          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__ */ jsx99(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx99(ClockFading, { className: "size-5" })
+          },
+          "date-mode"
+        )
+      ]
+    }
+  );
+});
+
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId23 } from "react";
-import { forwardRef as forwardRef30, useState as useState43 } from "react";
-import clsx37 from "clsx";
-import { jsx as jsx98, jsxs as jsxs61 } from "react/jsx-runtime";
-var InsideLabelInput = forwardRef30(function InsideLabelInput2({
+import { forwardRef as forwardRef31, useState as useState41 } from "react";
+import clsx38 from "clsx";
+import { jsx as jsx100, jsxs as jsxs62 } from "react/jsx-runtime";
+var InsideLabelInput = forwardRef31(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -19820,11 +19784,11 @@ var InsideLabelInput = forwardRef30(function InsideLabelInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = useState43(false);
+  const [isFocused, setIsFocused] = useState41(false);
   const generatedId = useId23();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs61("div", { className: clsx37("relative"), children: [
-    /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsxs62("div", { className: clsx38("relative"), children: [
+    /* @__PURE__ */ jsx100(
       Input,
       {
         ...props,
@@ -19841,16 +19805,16 @@ var InsideLabelInput = forwardRef30(function InsideLabelInput2({
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: clsx37("h-14 px-4 pb-2 py-6.5", props.className)
+        className: clsx38("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsx100(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx37(
+        className: clsx38(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -19864,8 +19828,8 @@ var InsideLabelInput = forwardRef30(function InsideLabelInput2({
 
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx38 } from "clsx";
-import { jsx as jsx99, jsxs as jsxs62 } from "react/jsx-runtime";
+import { clsx as clsx39 } from "clsx";
+import { jsx as jsx101, jsxs as jsxs63 } from "react/jsx-runtime";
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -19881,8 +19845,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsxs62("div", { ...containerProps, className: clsx38("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs63("div", { ...containerProps, className: clsx39("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx101(
       Input,
       {
         ...inputProps,
@@ -19890,10 +19854,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx38("pr-10 w-full", inputProps.className)
+        className: clsx39("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx101(
       IconButton,
       {
         ...searchButtonProps,
@@ -19902,19 +19866,19 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: clsx38("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx99(Search, { className: "w-full h-full" })
+        className: clsx39("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx101(Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef31, useEffect as useEffect54, useImperativeHandle as useImperativeHandle16, useRef as useRef41, useState as useState44 } from "react";
+import { forwardRef as forwardRef32, useEffect as useEffect48, useImperativeHandle as useImperativeHandle16, useRef as useRef40, useState as useState42 } from "react";
 import { Pencil } from "lucide-react";
-import clsx39 from "clsx";
-import { jsx as jsx100, jsxs as jsxs63 } from "react/jsx-runtime";
-var ToggleableInput = forwardRef31(function ToggleableInput2({
+import clsx40 from "clsx";
+import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
+var ToggleableInput = forwardRef32(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -19927,16 +19891,16 @@ var ToggleableInput = forwardRef31(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = useState44(initialState !== "display");
-  const innerRef = useRef41(null);
+  const [isEditing, setIsEditing] = useState42(initialState !== "display");
+  const innerRef = useRef40(null);
   useImperativeHandle16(forwardedRef, () => innerRef.current);
-  useEffect54(() => {
+  useEffect48(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs63("div", { className: clsx39("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs64("div", { className: clsx40("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx102(
       Input,
       {
         ...props,
@@ -19960,9 +19924,9 @@ var ToggleableInput = forwardRef31(function ToggleableInput2({
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs63("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx100("span", { className: clsx39(" truncate"), children: value }),
-      /* @__PURE__ */ jsx100(Pencil, { className: clsx39(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs64("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx102("span", { className: clsx40(" truncate"), children: value }),
+      /* @__PURE__ */ jsx102(Pencil, { className: clsx40(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -19971,9 +19935,9 @@ var ToggleableInput = forwardRef31(function ToggleableInput2({
 import { Check as Check4 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-import clsx40 from "clsx";
+import clsx41 from "clsx";
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
-import { jsx as jsx101, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -19992,36 +19956,36 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsxs65(
     "div",
     {
-      className: clsx40("group/property", className),
+      className: clsx41("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsx101(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs64("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ jsx101("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ jsx101("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ jsx103(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs65("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ jsx103("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ jsx103("span", { "data-name": "property-title-text", children: name })
               ] }) }),
-              invalid && /* @__PURE__ */ jsx101(AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ jsx103(AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsxs64("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ jsx101(
+              showActionsContainer && /* @__PURE__ */ jsxs65("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ jsx103(
                   IconButton,
                   {
                     tooltip: translation("clearValue"),
@@ -20030,10 +19994,10 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx101(X3, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx103(X3, { className: "size-force-5" })
                   }
                 ),
-                isRemoveEnabled && /* @__PURE__ */ jsx101(
+                isRemoveEnabled && /* @__PURE__ */ jsx103(
                   IconButton,
                   {
                     tooltip: translation("removeProperty"),
@@ -20041,7 +20005,7 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx101(Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx103(Trash, { className: "size-force-5" })
                   }
                 )
               ] })
@@ -20054,7 +20018,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { jsx as jsx102, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs66 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -20063,15 +20027,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx104(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ jsx102(Check4, { size: 24 }),
-      children: () => /* @__PURE__ */ jsxs65("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx102(
+      icon: /* @__PURE__ */ jsx104(Check4, { size: 24 }),
+      children: () => /* @__PURE__ */ jsxs66("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx104(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -20084,7 +20048,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ jsx102(
+        /* @__PURE__ */ jsx104(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -20104,7 +20068,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onValueChange,
@@ -20114,13 +20078,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx105(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx103(CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx103(
+      icon: /* @__PURE__ */ jsx105(CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx105(
         DateTimeInput,
         {
           value,
@@ -20138,7 +20102,7 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   value,
@@ -20147,18 +20111,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx106(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx104(List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx104(
+      icon: /* @__PURE__ */ jsx106(List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx106(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx104(
+          children: /* @__PURE__ */ jsx106(
             MultiSelectChipDisplay,
             {
               value,
@@ -20185,7 +20149,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 import { Binary as Binary2 } from "lucide-react";
-import { jsx as jsx105, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onValueChange,
@@ -20197,20 +20161,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx107(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ jsx105(Binary2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsxs66(
+      icon: /* @__PURE__ */ jsx107(Binary2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsxs67(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ jsx105(
+            /* @__PURE__ */ jsx107(
               Input,
               {
                 "data-name": "property-input",
@@ -20238,7 +20202,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx105(
+            suffix && /* @__PURE__ */ jsx107(
               "span",
               {
                 "data-name": "property-suffix",
@@ -20255,7 +20219,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import { jsx as jsx106, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs68 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -20264,18 +20228,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx108(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx106(List2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx106(
+      icon: /* @__PURE__ */ jsx108(List2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx108(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsxs67(
+          children: /* @__PURE__ */ jsxs68(
             SelectRoot,
             {
               value,
@@ -20285,7 +20249,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ jsx106(
+                /* @__PURE__ */ jsx108(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -20293,7 +20257,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ jsx106(SelectContent, { children })
+                /* @__PURE__ */ jsx108(SelectContent, { children })
               ]
             }
           )
@@ -20303,99 +20267,382 @@ var SingleSelectProperty = ({
   );
 };
 
-// src/components/user-interaction/properties/TextProperty.tsx
-import { Text } from "lucide-react";
-import { jsx as jsx107 } from "react/jsx-runtime";
-var TextProperty = ({
-  value,
-  readOnly,
-  onValueChange,
-  onEditComplete,
-  ...baseProps
-}) => {
-  const translation = useHightideTranslation();
-  const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx107(
-    PropertyBase,
-    {
-      ...baseProps,
-      hasValue,
-      icon: /* @__PURE__ */ jsx107(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx107(
-        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
+import { Text } from "lucide-react";
+import { jsx as jsx109 } from "react/jsx-runtime";
+var TextProperty = ({
+  value,
+  readOnly,
+  onValueChange,
+  onEditComplete,
+  ...baseProps
+}) => {
+  const translation = useHightideTranslation();
+  const hasValue = value !== void 0;
+  return /* @__PURE__ */ jsx109(
+    PropertyBase,
+    {
+      ...baseProps,
+      hasValue,
+      icon: /* @__PURE__ */ jsx109(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx109(
+        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
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx110 } from "react/jsx-runtime";
+var PolymorphicSlot = forwardRef33(function PolymorphicSlot2({
+  children,
+  asChild,
+  defaultComponent = "div",
+  ...props
+}, ref) {
+  const Component = asChild ? Slot : defaultComponent;
+  return /* @__PURE__ */ jsx110(Component, { ...props, ref, children });
+});
+
+// src/components/utils/Transition.tsx
+import { useEffect as useEffect49, useState as useState43 } from "react";
+function Transition({
+  children,
+  show,
+  includeAnimation = true
+}) {
+  const [isOpen, setIsOpen] = useState43(show);
+  const [isTransitioning, setIsTransitioning] = useState43(!isOpen);
+  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
+  useEffect49(() => {
+    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
+import { jsx as jsx111 } from "react/jsx-runtime";
+var HightideProvider = ({
+  children,
+  theme,
+  locale,
+  config
+}) => {
+  return /* @__PURE__ */ jsx111(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx111(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx111(HightideConfigProvider, { ...config, children }) }) });
+};
+
+// src/hooks/focus/useFocusGuards.ts
+import { useEffect as useEffect50 } from "react";
+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 = () => {
+  useEffect50(() => {
+    FocusGuardsService.getInstance().add();
+    return () => {
+      FocusGuardsService.getInstance().remove();
+    };
+  }, []);
+};
+
+// src/hooks/focus/useFocusOnceVisible.ts
+import React5, { useEffect as useEffect51 } from "react";
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = React5.useState(false);
+  useEffect51(() => {
+    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
+import { useEffect as useEffect52, useLayoutEffect as useLayoutEffect7, useState as useState44 } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect52;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState44(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useHandleRefs.ts
+import { useEffect as useEffect53, useRef as useRef41 } from "react";
+function useHandleRefs(handleRef) {
+  const refs = useRef41([]);
+  useEffect53(() => {
+    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
+import React6 from "react";
+function useLogUnstableDependencies(name, value) {
+  const prev = React6.useRef(null);
+  React6.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/useOverwritableState.ts
+import { useEffect as useEffect54, useState as useState45 } from "react";
+var useOverwritableState = (overwriteValue, onChange) => {
+  const [state, setState] = useState45(overwriteValue);
+  useEffect54(() => {
+    setState(overwriteValue);
+  }, [overwriteValue]);
+  const onChangeWrapper = (action) => {
+    const resolved = resolveSetState(action, state);
+    setState(resolved);
+    onChange?.(resolved);
+  };
+  return [state, onChangeWrapper];
 };
 
-// src/components/utils/Polymorphic.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx108 } from "react/jsx-runtime";
-var PolymorphicSlot = forwardRef32(function PolymorphicSlot2({
-  children,
-  asChild,
-  defaultComponent = "div",
-  ...props
-}, ref) {
-  const Component = asChild ? Slot : defaultComponent;
-  return /* @__PURE__ */ jsx108(Component, { ...props, ref, children });
-});
+// src/hooks/useRerender.ts
+import { useReducer as useReducer2 } from "react";
+var useRerender = () => {
+  return useReducer2(() => ({}), {})[1];
+};
 
-// src/components/utils/Transition.tsx
-import { useEffect as useEffect55, useState as useState45 } from "react";
-function Transition({
-  children,
-  show,
-  includeAnimation = true
-}) {
-  const [isOpen, setIsOpen] = useState45(show);
-  const [isTransitioning, setIsTransitioning] = useState45(!isOpen);
-  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
+// src/hooks/useUpdatingDateString.ts
+import { useEffect as useEffect55, useState as useState46 } from "react";
+var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
+  const { locale: contextLocale } = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState46({
+    compareDate: date,
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    relative: DateUtils.formatRelative(date, locale)
+  });
   useEffect55(() => {
-    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
-    }
+    setDateAndTimeStrings({
+      compareDate: date,
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      relative: DateUtils.formatRelative(date, locale)
+    });
+  }, [date, absoluteFormat, locale]);
+  useEffect55(() => {
+    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
-import { jsx as jsx109 } from "react/jsx-runtime";
-var HightideProvider = ({
-  children,
-  theme,
-  locale,
-  config
-}) => {
-  return /* @__PURE__ */ jsx109(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx109(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx109(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
+import { useMemo as useMemo43 } from "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 useMemo43(() => ({
+    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
@@ -20691,6 +20938,7 @@ export {
   FilterOperatorUtils,
   FilterPopUp,
   FilterValueUtils,
+  FlexibleDateTimeInput,
   FocusTrap,
   FocusTrapWrapper,
   FormContext,
@@ -20765,6 +21013,7 @@ export {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
+  SortingList,
   StepperBar,
   StorageListener,
   Switch,