@helpwave/hightide 0.8.0 → 0.8.2

package/dist/index.mjs

@@ -10104,13 +10104,13 @@ var DividerInserter = ({
 };
 
 // src/components/layout/Expandable.tsx
-import { useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useRef as useRef10 } from "react";
+import { useEffect as useEffect14, useImperativeHandle as useImperativeHandle4, useRef as useRef11 } from "react";
 import { useState as useState12 } from "react";
-import { createContext as createContext6, forwardRef as forwardRef7, useCallback as useCallback9, useContext as useContext6, useId as useId5, useMemo as useMemo11 } from "react";
+import { createContext as createContext6, forwardRef as forwardRef7, useCallback as useCallback10, useContext as useContext6, useId as useId5, useMemo as useMemo11 } from "react";
 import clsx4 from "clsx";
 
 // src/hooks/useControlledState.ts
-import { useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect13, useRef as useRef10, useState as useState11 } from "react";
 
 // src/utils/resolveSetState.ts
 function resolveSetState(action, prev) {
@@ -10119,28 +10119,34 @@ function resolveSetState(action, prev) {
 
 // src/hooks/useControlledState.ts
 var useControlledState = ({
-  value,
+  value: controlledValue,
   onValueChange,
   defaultValue,
   isControlled: isEnforcingControlled
 }) => {
-  const [internalValue, setInternalValue] = useState11(defaultValue);
-  const [isControlled] = useState11(isEnforcingControlled || value !== void 0);
+  const [internalValue, setInternalValue] = useState11(() => defaultValue);
+  const [isControlled] = useState11(isEnforcingControlled || controlledValue !== void 0);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
   useLogOnce(
     "useControlledState: Attempted to change from controlled to uncontrolled or vice versa.For a controlled state: isControlled === true OR value !== undefinedFor an uncontrolled state: isControlled === false OR value === undefined",
-    isControlled !== (isEnforcingControlled || value !== void 0),
+    isControlled !== (isEnforcingControlled || controlledValue !== void 0),
     { type: "error" }
   );
-  if (isControlled) {
-    return [value, onValueChangeStable];
-  }
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, internalValue);
-    setInternalValue(resolved);
+  const lastValue = useRef10(isControlled ? controlledValue : internalValue);
+  useEffect13(() => {
+    lastValue.current = isControlled ? controlledValue : internalValue;
+  }, [isControlled, controlledValue, internalValue]);
+  const setState = useCallback9((action) => {
+    const resolved = resolveSetState(action, lastValue.current);
+    if (resolved === lastValue.current) return;
+    if (!isControlled) {
+      lastValue.current = resolved;
+      setInternalValue(resolved);
+    }
     onValueChangeStable(resolved);
-  };
-  return [internalValue, onChangeWrapper];
+  }, [onValueChangeStable, isControlled]);
+  const value = isControlled ? controlledValue : internalValue;
+  return [value, setState];
 };
 
 // src/components/layout/Expandable.tsx
@@ -10174,7 +10180,7 @@ var ExpandableRoot = forwardRef7(function ExpandableRoot2({
     onValueChange: onExpandedChange,
     defaultValue: isInitialExpanded
   });
-  const toggle = useCallback9(() => {
+  const toggle = useCallback10(() => {
     if (!disabled) {
       setIsExpanded(!isExpanded);
     }
@@ -10213,7 +10219,7 @@ var ExpandableHeader = forwardRef7(function ExpandableHeader2({
   ...props
 }, ref) {
   const { isExpanded, toggle, ids, setIds, disabled } = useExpandableContext();
-  useEffect13(() => {
+  useEffect14(() => {
     if (props.id) {
       setIds((prevState) => ({ ...prevState, header: props.id }));
     }
@@ -10248,9 +10254,9 @@ var ExpandableContent = forwardRef7(function ExpandableContent2({
   ...props
 }, forwardedRef) {
   const { isExpanded, ids, setIds } = useExpandableContext();
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   useImperativeHandle4(forwardedRef, () => ref.current, [ref]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (props.id) {
       setIds((prevState) => ({ ...prevState, content: props.id }));
     }
@@ -10308,11 +10314,11 @@ var FAQSection = ({
 
 // src/components/layout/InifiniteScroll.tsx
 import {
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState13,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo12,
-  useCallback as useCallback10
+  useCallback as useCallback11
 } from "react";
 import clsx5 from "clsx";
 import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
@@ -10334,8 +10340,8 @@ function InfiniteScroll({
     throw new Error("InfiniteScroll: itemCount > 0 must hold");
   }
   const items = useMemo12(() => range(itemCount), [itemCount]);
-  const containerRef = useRef11(null);
-  const snapshotRef = useRef11({ scrollHeight: 0, scrollTop: 0, fromTop: false });
+  const containerRef = useRef12(null);
+  const snapshotRef = useRef12({ scrollHeight: 0, scrollTop: 0, fromTop: false });
   const [windowState, setWindowState] = useState13(() => {
     let index = initialIndex;
     if (index < 0) {
@@ -10348,14 +10354,14 @@ function InfiniteScroll({
       end: Math.min(items.length, safeStart + bufferSize)
     };
   });
-  const addToStart = useCallback10((amount = stepSize) => {
+  const addToStart = useCallback11((amount = stepSize) => {
     setWindowState((prev) => {
       const newStart = Math.max(0, prev.start - amount);
       const newEnd = Math.min(items.length, newStart + bufferSize);
       return { start: newStart, end: newEnd };
     });
   }, [bufferSize, items.length, stepSize]);
-  const addToEnd = useCallback10((amount = stepSize) => {
+  const addToEnd = useCallback11((amount = stepSize) => {
     setWindowState((prev) => {
       const newEnd = Math.min(items.length, prev.end + amount);
       const newStart = Math.max(0, newEnd - bufferSize);
@@ -10403,7 +10409,7 @@ function InfiniteScroll({
 }
 
 // src/components/layout/ListBox.tsx
-import React2, { createContext as createContext7, forwardRef as forwardRef8, useCallback as useCallback11, useContext as useContext7, useEffect as useEffect14, useRef as useRef12, useState as useState14 } from "react";
+import React2, { createContext as createContext7, forwardRef as forwardRef8, useCallback as useCallback12, useContext as useContext7, useEffect as useEffect15, useRef as useRef13, useState as useState14 } from "react";
 import { clsx as clsx6 } from "clsx";
 
 // src/utils/match.ts
@@ -10431,9 +10437,9 @@ var ListBoxItem = forwardRef8(
       onItemClick,
       isSelected
     } = useListBoxContext();
-    const itemRef = useRef12(null);
+    const itemRef = useRef13(null);
     const id = React2.useId();
-    useEffect14(() => {
+    useEffect15(() => {
       registerItem({ id, value, disabled, ref: itemRef });
       return () => unregisterItem(id);
     }, [id, value, disabled, registerItem, unregisterItem]);
@@ -10491,9 +10497,9 @@ var ListBoxPrimitive = forwardRef8(
       onValueChange: onSelectionChanged,
       defaultValue: initialValue
     });
-    const itemsRef = useRef12([]);
+    const itemsRef = useRef13([]);
     const [highlightedIndex, setHighlightedIndex] = useState14(void 0);
-    const registerItem = useCallback11((item) => {
+    const registerItem = useCallback12((item) => {
       itemsRef.current.push(item);
       itemsRef.current.sort((a, b) => {
         const aEl = a.ref.current;
@@ -10502,14 +10508,14 @@ var ListBoxPrimitive = forwardRef8(
         return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
       });
     }, []);
-    const unregisterItem = useCallback11((id) => {
+    const unregisterItem = useCallback12((id) => {
       itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
     }, []);
-    const isSelected = useCallback11(
+    const isSelected = useCallback12(
       (val) => (value ?? []).includes(val),
       [value]
     );
-    const onItemClickedHandler = useCallback11(
+    const onItemClickedHandler = useCallback12(
       (id) => {
         const index = itemsRef.current.findIndex((i) => i.id === id);
         if (index === -1) {
@@ -10533,13 +10539,13 @@ var ListBoxPrimitive = forwardRef8(
       },
       [onItemClicked, isSelection, isMultiple, setValue, isSelected, value]
     );
-    const setHighlightedId = useCallback11((id) => {
+    const setHighlightedId = useCallback12((id) => {
       const index = itemsRef.current.findIndex((i) => i.id === id);
       if (index !== -1) {
         setHighlightedIndex(index);
       }
     }, []);
-    useEffect14(() => {
+    useEffect15(() => {
       if (highlightedIndex !== void 0) {
         itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
       }
@@ -10880,8 +10886,8 @@ var MarkdownInterpreter = ({ text, className }) => {
 };
 
 // src/components/layout/TabSwitcher.tsx
-import { useCallback as useCallback12, useId as useId6, useState as useState15 } from "react";
-import { createContext as createContext8, useContext as useContext8, useEffect as useEffect15, useRef as useRef13 } from "react";
+import { useCallback as useCallback13, useId as useId6, useState as useState15 } from "react";
+import { createContext as createContext8, useContext as useContext8, useEffect as useEffect16, useRef as useRef14 } from "react";
 import clsx7 from "clsx";
 
 // src/utils/propsUtil.ts
@@ -11052,7 +11058,7 @@ function TabSwitcher({ children }) {
     infos: []
   });
   const [portalState, setPortalState] = useState15(null);
-  const subscribe = useCallback12((info) => {
+  const subscribe = useCallback13((info) => {
     const id = info.id;
     setState((prevState) => {
       const existingIndex = prevState.infos.findIndex((t) => t.id === id);
@@ -11073,10 +11079,10 @@ function TabSwitcher({ children }) {
       });
     };
   }, []);
-  const registerPortal = useCallback12((state2) => {
+  const registerPortal = useCallback13((state2) => {
     setPortalState(state2);
   }, []);
-  const setActiveId = useCallback12((activeId) => {
+  const setActiveId = useCallback13((activeId) => {
     setState((prevState) => ({ ...prevState, activeId }));
   }, []);
   return /* @__PURE__ */ jsx25(
@@ -11102,7 +11108,7 @@ function TabSwitcher({ children }) {
 function TabList({ ...props }) {
   const { tabs } = useTabContext();
   const { info, activeId, setActiveId: setActive } = tabs;
-  const refs = useRef13({});
+  const refs = useRef14({});
   const onKeyDown = (e) => {
     const idx = info.findIndex((tab) => tab.id === activeId);
     if (idx === -1) return;
@@ -11159,8 +11165,8 @@ function TabView({ ...props }) {
   const id = props.id ?? "tab-view-" + generated;
   const { portal } = useTabContext();
   const { setPortal } = portal;
-  const ref = useRef13(null);
-  useEffect15(() => {
+  const ref = useRef14(null);
+  useEffect16(() => {
     setPortal({ id, ref });
     return () => setPortal(null);
   }, [id, setPortal]);
@@ -11180,8 +11186,8 @@ function TabPanel({ label, forceMount = false, disabled = false, ...props }) {
   const generatedId = useId6();
   const id = props.id ?? "tab-panel-" + generatedId;
   const labelId = "tab-list-button-" + generatedId;
-  const ref = useRef13(null);
-  useEffect15(() => {
+  const ref = useRef14(null);
+  useEffect16(() => {
     return subscribe({ id, label, labelId, disabled, ref });
   }, [id, label, labelId, disabled, subscribe]);
   const isActive = activeId === id;
@@ -11317,11 +11323,11 @@ var VerticalDivider = ({
 };
 
 // src/components/layout/dialog/Dialog.tsx
-import { forwardRef as forwardRef10, useCallback as useCallback15, useContext as useContext10, useId as useId8, useImperativeHandle as useImperativeHandle6, useMemo as useMemo13, useRef as useRef17 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback16, useContext as useContext10, useId as useId8, useImperativeHandle as useImperativeHandle6, useMemo as useMemo13, useRef as useRef18 } from "react";
 import { X } from "lucide-react";
 
 // src/hooks/focus/useFocusTrap.ts
-import { useCallback as useCallback13, useEffect as useEffect16, useId as useId7, useRef as useRef14, useState as useState16 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect17, useId as useId7, useRef as useRef15, useState as useState16 } from "react";
 var createFocusGuard = () => {
   const div = document.createElement("div");
   Object.assign(div.style, {
@@ -11437,10 +11443,10 @@ var useFocusTrap = ({
   active,
   initialFocus
 }) => {
-  const lastFocusRef = useRef14(null);
+  const lastFocusRef = useRef15(null);
   const [paused, setPaused] = useState16(false);
   const id = useId7();
-  const focusElement = useCallback13(() => {
+  const focusElement = useCallback14(() => {
     const containerElement = container.current;
     if (initialFocus?.current) {
       initialFocus.current.focus();
@@ -11454,7 +11460,7 @@ var useFocusTrap = ({
       }
     }
   }, [container, initialFocus]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (active) {
       let pause = function() {
         setPaused(true);
@@ -11479,7 +11485,7 @@ var useFocusTrap = ({
       };
     }
   }, [active, container, focusElement, id, initialFocus]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (active && !paused) {
       let onKeyDown = function(event) {
         const key = event.key;
@@ -11507,7 +11513,7 @@ var useFocusTrap = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { useImperativeHandle as useImperativeHandle5 } from "react";
 import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -11522,24 +11528,24 @@ var FocusTrapWrapper = forwardRef9(function FocusTrap2({
   initialFocus,
   ...props
 }, forwardedRef) {
-  const innerRef = useRef15(null);
+  const innerRef = useRef16(null);
   useImperativeHandle5(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus });
   return /* @__PURE__ */ jsx28("div", { ref: innerRef, ...props });
 });
 
 // src/hooks/usePresenceRef.ts
-import { useCallback as useCallback14, useEffect as useEffect17, useRef as useRef16, useState as useState17 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect18, useRef as useRef17, useState as useState17 } from "react";
 var usePresenceRef = ({
   isOpen = true
 }) => {
   const [isPresent, setIsPresent] = useState17(false);
-  const ref = useRef16(null);
-  const refAssignment = useCallback14((node) => {
+  const ref = useRef17(null);
+  const refAssignment = useCallback15((node) => {
     ref.current = node;
     setIsPresent((prev) => prev || !!node);
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!isOpen) {
       setIsPresent(false);
     }
@@ -11585,7 +11591,7 @@ var Dialog = forwardRef10(function Dialog2({
     title: `dialog-title-${generatedId}`,
     description: `dialog-description-${generatedId}`
   }), [generatedId, props.id]);
-  const containerRef = useRef17(null);
+  const containerRef = useRef18(null);
   const context = useContext10(DialogContext);
   const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
   const isModal = isModalOverwrite ?? context?.isModal ?? true;
@@ -11594,7 +11600,7 @@ var Dialog = forwardRef10(function Dialog2({
   });
   useImperativeHandle6(forwardedRef, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
-  const onCloseWrapper = useCallback15(() => {
+  const onCloseWrapper = useCallback16(() => {
     if (!isModal) return;
     onCloseStable();
     context?.setIsOpen(false);
@@ -11793,10 +11799,10 @@ var DiscardChangesDialog = ({
 };
 
 // src/components/user-interaction/input/Input.tsx
-import { forwardRef as forwardRef11, useImperativeHandle as useImperativeHandle7, useRef as useRef18 } from "react";
+import { forwardRef as forwardRef11, useImperativeHandle as useImperativeHandle7, useRef as useRef19 } from "react";
 
 // src/hooks/useDelay.ts
-import { useEffect as useEffect18, useState as useState18 } from "react";
+import { useEffect as useEffect19, useState as useState18 } from "react";
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
@@ -11821,12 +11827,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  useEffect18(() => {
+  useEffect19(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -11836,9 +11842,9 @@ function useDelay(options) {
 }
 
 // src/hooks/focus/useFocusManagement.ts
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback17 } from "react";
 function useFocusManagement() {
-  const getFocusableElements = useCallback16(() => {
+  const getFocusableElements = useCallback17(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -11847,7 +11853,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = useCallback16(() => {
+  const getNextFocusElement = useCallback17(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -11859,11 +11865,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = useCallback16(() => {
+  const focusNext = useCallback17(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = useCallback16(() => {
+  const getPreviousFocusElement = useCallback17(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -11879,7 +11885,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = useCallback16(() => {
+  const focusPrevious = useCallback17(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -11924,7 +11930,7 @@ var Input = forwardRef11(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = useRef18(null);
+  const innerRef = useRef19(null);
   useImperativeHandle7(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ jsx33(
@@ -11992,7 +11998,7 @@ import {
 } from "react";
 
 // src/components/user-interaction/select/SelectContext.tsx
-import { createContext as createContext10, useCallback as useCallback17, useContext as useContext11, useEffect as useEffect19, useId as useId9, useMemo as useMemo15, useRef as useRef19, useState as useState19 } from "react";
+import { createContext as createContext10, useCallback as useCallback18, useContext as useContext11, useEffect as useEffect20, useId as useId9, useMemo as useMemo15, useRef as useRef20, useState as useState19 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var defaultToggleOpenOptions = {
   highlightStartPositionBehavior: "first"
@@ -12033,7 +12039,7 @@ var PrimitveSelectRoot = ({
     onValueChange: onValuesChange,
     defaultValue: initialValues ?? []
   });
-  const triggerRef = useRef19(null);
+  const triggerRef = useRef20(null);
   const generatedId = useId9();
   const [ids, setIds] = useState19({
     trigger: id ?? (isMultiSelect ? "multi-select-" + generatedId : "select-" + generatedId),
@@ -12064,7 +12070,7 @@ var PrimitveSelectRoot = ({
     isMultiSelect,
     iconAppearance
   };
-  const registerItem = useCallback17((item) => {
+  const registerItem = useCallback18((item) => {
     setInternalState((prev) => {
       const updatedOptions = [...prev.options, item];
       updatedOptions.sort((a, b) => {
@@ -12079,7 +12085,7 @@ var PrimitveSelectRoot = ({
       };
     });
   }, []);
-  const unregisterItem = useCallback17((value2) => {
+  const unregisterItem = useCallback18((value2) => {
     setInternalState((prev) => {
       const updatedOptions = prev.options.filter((i) => i.value !== value2);
       return {
@@ -12128,10 +12134,10 @@ var PrimitveSelectRoot = ({
       highlightedValue: value2
     }));
   };
-  const registerTrigger = useCallback17((ref) => {
+  const registerTrigger = useCallback18((ref) => {
     triggerRef.current = ref.current;
   }, []);
-  const unregisterTrigger = useCallback17(() => {
+  const unregisterTrigger = useCallback18(() => {
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen, toggleOpenOptions) => {
@@ -12181,7 +12187,7 @@ var PrimitveSelectRoot = ({
       highlightedValue
     }));
   };
-  useEffect19(() => {
+  useEffect20(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = internalState.options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -12245,17 +12251,17 @@ var MultiSelectRoot = ({ value, onValueChange, initialValue, onEditComplete, ...
 };
 
 // src/components/user-interaction/select/SelectComponents.tsx
-import { forwardRef as forwardRef13, useEffect as useEffect21, useImperativeHandle as useImperativeHandle9, useRef as useRef20 } from "react";
+import { forwardRef as forwardRef13, useEffect as useEffect22, useImperativeHandle as useImperativeHandle9, useRef as useRef21 } from "react";
 import clsx10 from "clsx";
 import { CheckIcon } from "lucide-react";
 
 // src/components/layout/popup/PopUp.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback18, useContext as useContext13, useImperativeHandle as useImperativeHandle8, useMemo as useMemo16 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback19, useContext as useContext13, useImperativeHandle as useImperativeHandle8, useMemo as useMemo16 } from "react";
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
-  useEffect20(() => {
+  useEffect21(() => {
     if (!active) return;
     const listener = (event) => {
       if (event.target === null) return;
@@ -12308,13 +12314,13 @@ var PopUp = forwardRef12(function PopUp2({
   useImperativeHandle8(forwardRef23, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
-  const onCloseWrapper = useCallback18(() => {
+  const onCloseWrapper = useCallback19(() => {
     onCloseStable();
     context?.setIsOpen(false);
   }, [onCloseStable, context]);
   const { zIndex, isInFront } = useOverlayRegistry({ isActive: isOpen, tags: useMemo16(() => ["popup"], []) });
   useOutsideClick({
-    onOutsideClick: useCallback18((event) => {
+    onOutsideClick: useCallback19((event) => {
       event.preventDefault();
       onCloseWrapper();
       onOutsideClickStable(event);
@@ -12356,10 +12362,10 @@ var SelectOption = forwardRef13(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = useRef20(null);
+    const itemRef = useRef21(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect21(() => {
+    useEffect22(() => {
       register({
         value,
         label,
@@ -12439,7 +12445,7 @@ var SelectButton = forwardRef13(function SelectButton2({
   const translation = useHightideTranslation();
   const { state, trigger, setIds, ids } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  useEffect21(() => {
+  useEffect22(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -12447,9 +12453,9 @@ var SelectButton = forwardRef13(function SelectButton2({
       }));
     }
   }, [id, setIds]);
-  const innerRef = useRef20(null);
+  const innerRef = useRef21(null);
   useImperativeHandle9(ref, () => innerRef.current);
-  useEffect21(() => {
+  useEffect22(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -12507,10 +12513,10 @@ var SelectContent = forwardRef13(function SelectContent2({
   options,
   ...props
 }, ref) {
-  const innerRef = useRef20(null);
+  const innerRef = useRef21(null);
   useImperativeHandle9(ref, () => innerRef.current);
   const { trigger, state, config, item, ids, setIds } = useSelectContext();
-  useEffect21(() => {
+  useEffect22(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -12655,7 +12661,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx12 from "clsx";
 
 // src/global-contexts/ThemeContext.tsx
-import { createContext as createContext12, useCallback as useCallback19, useContext as useContext14, useEffect as useEffect22, useMemo as useMemo17, useState as useState20 } from "react";
+import { createContext as createContext12, useCallback as useCallback20, useContext as useContext14, useEffect as useEffect23, useMemo as useMemo17, useState as useState20 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
@@ -12682,7 +12688,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -12690,18 +12696,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme, deleteStoredTheme, setStoredTheme]);
-  useEffect22(() => {
+  useEffect23(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = useCallback19(() => {
+  const getPreference = useCallback20(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     getPreference();
   }, [getPreference]);
-  useEffect22(() => {
+  useEffect23(() => {
     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)");
@@ -12804,7 +12810,7 @@ var ThemeDialog = ({
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/layout/drawer/DrawerContent.tsx
-import { forwardRef as forwardRef15, useId as useId10, useImperativeHandle as useImperativeHandle10, useMemo as useMemo18, useRef as useRef21 } from "react";
+import { forwardRef as forwardRef15, useId as useId10, useImperativeHandle as useImperativeHandle10, useMemo as useMemo18, useRef as useRef22 } from "react";
 
 // src/components/layout/drawer/DrawerContext.tsx
 import { createContext as createContext13, useContext as useContext15 } from "react";
@@ -12834,7 +12840,7 @@ var DrawerContent = forwardRef15(function DrawerContent2({
     background: `dialog-background-${generatedId}`,
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
-  const ref = useRef21(null);
+  const ref = useRef22(null);
   useImperativeHandle10(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
@@ -13082,8 +13088,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 useEffect23 } from "react";
-import { useCallback as useCallback20, useId as useId11, useRef as useRef22, useState as useState22 } from "react";
+import { useEffect as useEffect24 } from "react";
+import { useCallback as useCallback21, useId as useId11, useRef as useRef23, useState as useState22 } from "react";
 import clsx17 from "clsx";
 import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 function isSubItem(item) {
@@ -13096,8 +13102,8 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = useState22(false);
-  const containerRef = useRef22(null);
-  const triggerRef = useRef22(null);
+  const containerRef = useRef23(null);
+  const triggerRef = useRef23(null);
   const id = useId11();
   const style = useAnchoredPosition({
     active: isOpen,
@@ -13106,7 +13112,7 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = useCallback20((event) => {
+  const onBlur = useCallback21((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
@@ -13174,8 +13180,8 @@ var Navigation = ({ ...props }) => {
   const translation = useHightideTranslation();
   const [isMobileOpen, setIsMobileOpen] = useState22(false);
   const id = useId11();
-  const menuRef = useRef22(null);
-  useEffect23(() => {
+  const menuRef = useRef23(null);
+  useEffect24(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
@@ -13243,7 +13249,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 useEffect24, useState as useState23 } from "react";
+import { useEffect as useEffect25, useState as useState23 } from "react";
 import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
@@ -13256,7 +13262,7 @@ var Pagination = ({
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect24(() => {
+  useEffect25(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -13450,12 +13456,12 @@ var StepperBar = ({
 };
 
 // src/components/layout/popup/PopUpOpener.tsx
-import { useEffect as useEffect25, useMemo as useMemo19, useRef as useRef23 } from "react";
+import { useEffect as useEffect26, useMemo as useMemo19, useRef as useRef24 } from "react";
 function PopUpOpener({ children }) {
   const context = usePopUpContext();
   const { setTriggerRef } = context;
-  const ref = useRef23(null);
-  useEffect25(() => {
+  const ref = useRef24(null);
+  useEffect26(() => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
@@ -13686,7 +13692,7 @@ var FillerCell = ({ ...props }) => {
 };
 
 // src/components/layout/table/TableProvider.tsx
-import { useCallback as useCallback21, useEffect as useEffect26, useLayoutEffect as useLayoutEffect6, useMemo as useMemo21, useRef as useRef24, useState as useState25 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect27, useLayoutEffect as useLayoutEffect6, useMemo as useMemo21, useRef as useRef25, useState as useState25 } from "react";
 
 // src/components/layout/table/TableContext.tsx
 import { createContext as createContext14, useContext as useContext16 } from "react";
@@ -14086,7 +14092,7 @@ var TableProvider = ({
   const onRowClickStable = useEventCallbackStabilizer(onRowClick);
   const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
   const [registeredColumns, setRegisteredColumns] = useState25([]);
-  const containerRef = useRef24(null);
+  const containerRef = useRef25(null);
   const [, setTableState] = useState25({
     columnSizing: {},
     columnOrder: [],
@@ -14117,11 +14123,11 @@ var TableProvider = ({
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]);
-  useWindowResizeObserver(useCallback21(() => {
+  useWindowResizeObserver(useCallback22(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]));
-  const registerColumn = useCallback21((column) => {
+  const registerColumn = useCallback22((column) => {
     setRegisteredColumns((prev) => {
       return [...prev, column];
     });
@@ -14148,7 +14154,7 @@ var TableProvider = ({
     defaultColumn: {
       minSize: 60,
       maxSize: 800,
-      cell: useCallback21(({ cell }) => {
+      cell: useCallback22(({ cell }) => {
         return /* @__PURE__ */ jsx57(TableCell, { children: String(cell.getValue()) });
       }, []),
       enableResizing: true,
@@ -14189,7 +14195,7 @@ var TableProvider = ({
   });
   const pagination = table.getState().pagination;
   const pageCount = table.getPageCount();
-  useEffect26(() => {
+  useEffect27(() => {
     if (pageCount === -1) {
       return;
     }
@@ -14197,13 +14203,13 @@ var TableProvider = ({
       table.setPageIndex(pageCount - 1);
     }
   }, [table, pagination.pageIndex, pageCount]);
-  useEffect26(() => {
+  useEffect27(() => {
     table.setColumnOrder((prev) => [...prev]);
   }, [table, columns]);
   const columnVisibility = table.getState().columnVisibility;
   const columnOrder = table.getState().columnOrder;
   const columnPinning = table.getState().columnPinning;
-  useEffect26(() => {
+  useEffect27(() => {
     table.setColumnSizing((prev) => ({ ...prev }));
   }, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
   const tableColumnDefinitionContextValue = useMemo21(() => ({
@@ -14321,7 +14327,7 @@ var TableBody = React5.memo(function TableBodyVisual() {
 
 // src/components/layout/table/TableHeader.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import clsx26 from "clsx";
+import clsx25 from "clsx";
 
 // src/components/layout/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp as ChevronUp2 } from "lucide-react";
@@ -14374,188 +14380,15 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect31, useId as useId15, useMemo as useMemo26, useRef as useRef29, useState as useState30 } from "react";
+import { useEffect as useEffect32, useId as useId15, useMemo as useMemo26, useRef as useRef30, useState as useState30 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef17, useCallback as useCallback24, useEffect as useEffect30, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo24, useRef as useRef28, useState as useState28 } from "react";
+import { forwardRef as forwardRef17, useCallback as useCallback25, useEffect as useEffect31, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo24, useRef as useRef29, useState as useState28 } from "react";
 import { CalendarIcon } from "lucide-react";
-import clsx25 from "clsx";
-
-// src/utils/date.ts
-var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
-var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-var formatDate = (date) => {
-  const year = date.getFullYear().toString().padStart(4, "0");
-  const month = (date.getMonth() + 1).toString().padStart(2, "0");
-  const day = date.getDate().toString().padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-var formatDateTime = (date) => {
-  const dateString = formatDate(date);
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  return `${dateString}T${hours}:${minutes}`;
-};
-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 getBetweenDuration = (startDate, endDate) => {
-  const durationInMilliseconds = endDate.getTime() - startDate.getTime();
-  const millisecondsInSecond = 1e3;
-  const millisecondsInMinute = 60 * millisecondsInSecond;
-  const millisecondsInHour = 60 * millisecondsInMinute;
-  const millisecondsInDay = 24 * millisecondsInHour;
-  const millisecondsInMonth = 30 * millisecondsInDay;
-  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay));
-  const months = Math.floor(durationInMilliseconds / millisecondsInMonth);
-  const days = Math.floor(durationInMilliseconds / millisecondsInDay);
-  const hours = Math.floor(durationInMilliseconds % millisecondsInDay / millisecondsInHour);
-  const seconds = Math.floor(durationInMilliseconds % millisecondsInHour / millisecondsInSecond);
-  const milliseconds = durationInMilliseconds % millisecondsInSecond;
-  return {
-    years,
-    months,
-    days,
-    hours,
-    seconds,
-    milliseconds
-  };
-};
-var isInTimeSpan = (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 getWeeksForCalenderMonth = (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 formatGerman = (date, showTime) => {
-  const d = new Intl.DateTimeFormat("de-DE", {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric"
-  }).format(date);
-  if (!showTime) return d;
-  const t = new Intl.DateTimeFormat("de-DE", {
-    hour: "2-digit",
-    minute: "2-digit"
-  }).format(date);
-  return `${d} um ${t} Uhr`;
-};
-var formatAbsolute = (date, locale, showTime) => {
-  if (locale === "de-DE") {
-    return formatGerman(date, showTime);
-  }
-  const options = {
-    year: "numeric",
-    month: "numeric",
-    day: "numeric"
-  };
-  if (showTime) {
-    options.hour = "numeric";
-    options.minute = "numeric";
-  }
-  return new Intl.DateTimeFormat(locale, options).format(date);
-};
-var formatRelative = (date, locale, showTime) => {
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-  const now = /* @__PURE__ */ new Date();
-  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
-  if (Math.abs(diffInSeconds) < 60) return rtf.format(Math.round(diffInSeconds), "second");
-  if (Math.abs(diffInSeconds) < 3600) return rtf.format(Math.round(diffInSeconds / 60), "minute");
-  if (Math.abs(diffInSeconds) < 86400) return rtf.format(Math.round(diffInSeconds / 3600), "hour");
-  if (Math.abs(diffInSeconds) < 604800) return rtf.format(Math.round(diffInSeconds / 86400), "day");
-  return formatAbsolute(date, locale, showTime);
-};
-var DateUtils = {
-  monthsList,
-  weekDayList,
-  equalDate,
-  formatAbsolute,
-  formatRelative
-};
-
-// src/components/user-interaction/date/DateTimePicker.tsx
 import clsx24 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
-import { useEffect as useEffect27, useRef as useRef25 } from "react";
+import { useEffect as useEffect28, useRef as useRef26 } from "react";
 import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 var TimePicker = ({
   value: controlledValue,
@@ -14571,8 +14404,8 @@ var TimePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const minuteRef = useRef25(null);
-  const hourRef = useRef25(null);
+  const minuteRef = useRef26(null);
+  const hourRef = useRef26(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
   let minutes = range(60);
@@ -14592,13 +14425,13 @@ var TimePicker = ({
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
   const hour = value.getHours();
-  useEffect27(() => {
+  useEffect28(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  useEffect27(() => {
+  useEffect28(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -14669,10 +14502,177 @@ var TimePicker = ({
 // src/components/user-interaction/date/DatePicker.tsx
 import { useState as useState27 } from "react";
 import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown4 } from "lucide-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.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
+  return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "year");
+};
+var toInputString = (date, format) => {
+  switch (format) {
+    case "date":
+      return date.toISOString().split("T")[0];
+    case "time":
+      return date.toISOString().split("T")[1].split("Z")[0];
+    case "dateTime":
+      return date.toISOString();
+  }
+};
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  formatAbsolute,
+  formatRelative,
+  addDuration,
+  subtractDuration,
+  between,
+  weeksForCalenderMonth,
+  timesInSeconds,
+  toInputString
+};
+
+// src/components/user-interaction/date/DatePicker.tsx
 import clsx23 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
-import { useCallback as useCallback22, useEffect as useEffect28, useMemo as useMemo22, useRef as useRef26 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect29, useMemo as useMemo22, useRef as useRef27 } from "react";
 import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
@@ -14700,18 +14700,18 @@ var DayPicker = ({
     defaultValue: initialDisplayedMonth ?? value
   });
   const month = displayedMonth.getMonth();
-  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  const selectedButtonRef = useRef26(null);
+  const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
+  const selectedButtonRef = useRef27(null);
   const isValueInDisplayedWeeks = useMemo22(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = useCallback22(
+  const firstDayOfMonth = useCallback23(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
   const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
-  useEffect28(() => {
+  useEffect29(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
   const end = useMemo22(() => {
@@ -14722,27 +14722,27 @@ var DayPicker = ({
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = useCallback22((date) => {
+  const clampToRange = useCallback23((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = useCallback22((candidate) => {
+  const navigateTo = useCallback23((candidate) => {
     const clamped = clampToRange(candidate);
-    if (!isInTimeSpan(clamped, start, end)) return;
+    if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
     onEditComplete?.(clamped);
     if (clamped.getMonth() !== displayedMonth.getMonth() || clamped.getFullYear() !== displayedMonth.getFullYear()) {
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = useCallback22(
+  const onKeyDown = useCallback23(
     (event) => {
       PropsUtil.aria.navigate({
-        left: () => focusTargetDate && navigateTo(subtractDuration(focusTargetDate, { days: 1 })),
-        right: () => focusTargetDate && navigateTo(addDuration(focusTargetDate, { days: 1 })),
-        up: () => focusTargetDate && navigateTo(subtractDuration(focusTargetDate, { days: 7 })),
-        down: () => focusTargetDate && navigateTo(addDuration(focusTargetDate, { days: 7 }))
+        left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
+        right: () => focusTargetDate && navigateTo(DateUtils.addDuration(focusTargetDate, { days: 1 })),
+        up: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 7 })),
+        down: () => focusTargetDate && navigateTo(DateUtils.addDuration(focusTargetDate, { days: 7 }))
       })(event);
     },
     [focusTargetDate, navigateTo]
@@ -14754,7 +14754,7 @@ var DayPicker = ({
       const isFocused = !!focusTargetDate && DateUtils.equalDate(focusTargetDate, date);
       const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
-      const isDayValid = isInTimeSpan(date, start, end);
+      const isDayValid = DateUtils.between(date, start, end);
       return /* @__PURE__ */ jsx61(
         "div",
         {
@@ -14792,7 +14792,7 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback23, useEffect as useEffect29, useMemo as useMemo23, useRef as useRef27, useState as useState26 } from "react";
+import { memo, useCallback as useCallback24, useEffect as useEffect30, useMemo as useMemo23, useRef as useRef28, useState as useState26 } from "react";
 import clsx22 from "clsx";
 import { jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
@@ -14803,10 +14803,10 @@ var YearRow = memo(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = useRef27(null);
+  const ref = useRef28(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
   const [isExpanded, setIsExpanded] = useState26(false);
-  useEffect29(() => {
+  useEffect30(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
@@ -14848,8 +14848,8 @@ var YearRow = memo(function YearRow2({
     }
   );
 });
-var defaultStart = subtractDuration(/* @__PURE__ */ new Date(), { years: 100 });
-var defaultEnd = addDuration(/* @__PURE__ */ new Date(), { years: 100 });
+var defaultStart = DateUtils.subtractDuration(/* @__PURE__ */ new Date(), { years: 100 });
+var defaultEnd = DateUtils.addDuration(/* @__PURE__ */ new Date(), { years: 100 });
 var YearMonthPicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -14882,7 +14882,7 @@ var YearMonthPicker = ({
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = useCallback23((newDate) => {
+  const handleSelect = useCallback24((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
@@ -14975,9 +14975,9 @@ var DatePicker = ({
           {
             tooltip: translation("time.previousMonth"),
             size: "sm",
-            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
+            disabled: !DateUtils.between(DateUtils.subtractDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
-              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
+              setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }));
             },
             children: /* @__PURE__ */ jsx63(ArrowUp, { size: 20 })
           }
@@ -14987,9 +14987,9 @@ var DatePicker = ({
           {
             tooltip: translation("time.nextMonth"),
             size: "sm",
-            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
+            disabled: !DateUtils.between(DateUtils.addDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
-              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
+              setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }));
             },
             children: /* @__PURE__ */ jsx63(ArrowDown, { size: 20 })
           }
@@ -15079,7 +15079,6 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
-        className: clsx24({ "justify-between": mode === "time" }),
         value,
         onValueChange: setValue,
         onEditComplete
@@ -15175,9 +15174,9 @@ var DateTimePickerDialog = ({
 // src/components/user-interaction/input/DateTimeInput.tsx
 import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
 var DateTimeInput = forwardRef17(function DateTimeInput2({
+  id: inputId,
   value,
   initialValue = null,
-  placeholder,
   onValueChange,
   onEditComplete,
   allowRemove = false,
@@ -15193,7 +15192,6 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const { locale } = useLocale();
   const [isOpen, setIsOpen] = useState28(false);
   const [state, setState] = useControlledState({
     value,
@@ -15201,50 +15199,50 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
     defaultValue: initialValue
   });
   const [dialogValue, setDialogValue] = useState28(state ?? /* @__PURE__ */ new Date());
-  useEffect30(() => {
+  const [dateString, setDateString] = useState28(state ? DateUtils.toInputString(state, mode) : "");
+  useEffect31(() => {
     setDialogValue(state ?? /* @__PURE__ */ new Date());
-  }, [state]);
-  const changeOpenWrapper = useCallback24((isOpen2) => {
+    setDateString(state ? DateUtils.toInputString(state, mode) : "");
+  }, [mode, state]);
+  const changeOpenWrapper = useCallback25((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
-  const id = useId13();
+  const generatedId = useId13();
   const ids = useMemo24(() => ({
-    input: `date-time-input-${id}`,
-    popup: `date-time-input-popup-${id}`,
-    label: `date-time-input-label-${id}`
-  }), [id]);
-  const innerRef = useRef28(null);
+    input: inputId ?? `date-time-input-${generatedId}`,
+    popup: `date-time-input-popup-${generatedId}`,
+    label: `date-time-input-label-${generatedId}`
+  }), [generatedId, inputId]);
+  const innerRef = useRef29(null);
   useImperativeHandle11(forwardedRef, () => innerRef.current);
-  useEffect30(() => {
+  useEffect31(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
   }, [changeOpenWrapper, readOnly, disabled]);
-  const clickHandler = PropsUtil.aria.click(() => changeOpenWrapper(true));
   return /* @__PURE__ */ jsxs36(Fragment7, { children: [
-    /* @__PURE__ */ jsxs36("div", { ...containerProps, className: clsx25("relative w-full", containerProps?.className), children: [
+    /* @__PURE__ */ jsxs36("div", { ...containerProps, className: clsx24("relative w-full", containerProps?.className), children: [
       /* @__PURE__ */ jsx66(
-        "div",
+        "input",
         {
           ...props,
           ref: innerRef,
           id: ids.input,
-          onClick: (event) => {
-            clickHandler.onClick();
-            props.onClick?.(event);
+          value: dateString,
+          onChange: (event) => {
+            const date = event.target.valueAsDate;
+            if (date) {
+              setState(date);
+            } else {
+              setDateString(event.target.value);
+            }
           },
-          onKeyDown: clickHandler.onKeyDown,
+          type: mode === "date" ? "date" : mode === "time" ? "time" : "datetime-local",
           ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
-          "data-value": PropsUtil.dataAttributes.bool(!!state),
-          ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props),
-          tabIndex: 0,
-          role: "combobox",
-          "aria-haspopup": "dialog",
-          "aria-expanded": isOpen,
-          "aria-controls": isOpen ? ids.popup : void 0,
           "data-name": props["data-name"] ?? "date-time-input",
-          children: state ? DateUtils.formatAbsolute(state, locale, mode === "dateTime") : placeholder ?? translation("clickToSelect")
+          "data-value": PropsUtil.dataAttributes.bool(!!state || !!dateString),
+          ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
         }
       ),
       /* @__PURE__ */ jsx66(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx66(
@@ -15342,7 +15340,7 @@ import {
 
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check2, Minus as Minus2 } from "lucide-react";
-import { useCallback as useCallback25 } from "react";
+import { useCallback as useCallback26 } from "react";
 import { jsx as jsx68, jsxs as jsxs38 } from "react/jsx-runtime";
 var Checkbox = ({
   value: controlledValue,
@@ -15360,7 +15358,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback25((value2) => {
+  const onChangeWrapper = useCallback26((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -15376,16 +15374,16 @@ var Checkbox = ({
       onClick: (event) => {
         if (!disabled) {
           setValue((prev) => !prev);
-          props.onClick?.(event);
         }
+        props.onClick?.(event);
       },
       onKeyDown: (event) => {
         if (disabled) return;
         if (event.key === " " || event.key === "Enter") {
           event.preventDefault();
           setValue((prev) => !prev);
-          props.onKeyDown?.(event);
         }
+        props.onKeyDown?.(event);
       },
       "data-checked": !indeterminate ? value : "indeterminate",
       "data-size": size ?? void 0,
@@ -15726,6 +15724,12 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var DateFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
+  const id = useId14();
+  const ids = {
+    startDate: `date-filter-start-date-${id}`,
+    endDate: `date-filter-end-date-${id}`,
+    compareDate: `date-filter-compare-date-${id}`
+  };
   const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
   const [temporaryMinDateValue, setTemporaryMinDateValue] = useState29(null);
@@ -15753,11 +15757,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
     ),
     /* @__PURE__ */ jsx69("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
     /* @__PURE__ */ jsx69(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs39("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ jsx69("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
       /* @__PURE__ */ jsx69(
         DateTimeInput,
         {
+          id: ids.startDate,
           value: temporaryMinDateValue ?? parameter.min ?? null,
-          placeholder: translation("startDate"),
           onValueChange: (value) => setTemporaryMinDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.max && value > parameter.max) {
@@ -15786,11 +15791,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
+      /* @__PURE__ */ jsx69("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
       /* @__PURE__ */ jsx69(
         DateTimeInput,
         {
+          id: ids.endDate,
           value: temporaryMaxDateValue ?? parameter.max ?? null,
-          placeholder: translation("endDate"),
           onValueChange: (value) => setTemporaryMaxDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.min && value < parameter.min) {
@@ -15819,27 +15825,36 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx69(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx69(
-      DateTimeInput,
-      {
-        value: parameter.compareDate ?? null,
-        placeholder: translation("date"),
-        onValueChange: (compareDate) => {
-          onFilterValueChange({
-            operator,
-            parameter: { compareDate }
-          });
-        },
-        allowRemove: true,
-        outsideClickCloses: false,
-        className: "min-w-64"
-      }
-    ) }),
+    /* @__PURE__ */ jsxs39(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+      /* @__PURE__ */ jsx69("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+      /* @__PURE__ */ jsx69(
+        DateTimeInput,
+        {
+          id: ids.compareDate,
+          value: parameter.compareDate ?? null,
+          onValueChange: (compareDate) => {
+            onFilterValueChange({
+              operator,
+              parameter: { compareDate }
+            });
+          },
+          allowRemove: true,
+          outsideClickCloses: false,
+          className: "min-w-64"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx69(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx69("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
+  const id = useId14();
+  const ids = {
+    startDate: `datetime-filter-start-date-${id}`,
+    endDate: `datetime-filter-end-date-${id}`,
+    compareDate: `datetime-filter-compare-date-${id}`
+  };
   const operator = filterValue?.operator ?? "dateTimeBetween";
   const parameter = filterValue?.parameter ?? {};
   const [temporaryMinDateValue, setTemporaryMinDateValue] = useState29(null);
@@ -15867,12 +15882,13 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
     ),
     /* @__PURE__ */ jsx69("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
     /* @__PURE__ */ jsx69(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ jsxs39("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ jsx69("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
       /* @__PURE__ */ jsx69(
         DateTimeInput,
         {
+          id: ids.startDate,
           mode: "dateTime",
           value: temporaryMinDateValue ?? parameter.min ?? null,
-          placeholder: translation("startDate"),
           onValueChange: (value) => setTemporaryMinDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.max && value > parameter.max) {
@@ -15901,12 +15917,13 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
+      /* @__PURE__ */ jsx69("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
       /* @__PURE__ */ jsx69(
         DateTimeInput,
         {
+          id: ids.endDate,
           mode: "dateTime",
           value: temporaryMaxDateValue ?? parameter.max ?? null,
-          placeholder: translation("endDate"),
           onValueChange: (value) => setTemporaryMaxDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.min && value < parameter.min) {
@@ -15935,22 +15952,25 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx69(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ jsx69(
-      DateTimeInput,
-      {
-        value: parameter.compareDatetime ?? null,
-        placeholder: translation("date"),
-        onValueChange: (compareDatetime) => {
-          onFilterValueChange({
-            operator,
-            parameter: { compareDatetime }
-          });
-        },
-        allowRemove: true,
-        outsideClickCloses: false,
-        className: "min-w-64"
-      }
-    ) }),
+    /* @__PURE__ */ jsxs39(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+      /* @__PURE__ */ jsx69("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+      /* @__PURE__ */ jsx69(
+        DateTimeInput,
+        {
+          id: ids.compareDate,
+          value: parameter.compareDatetime ?? null,
+          onValueChange: (compareDatetime) => {
+            onFilterValueChange({
+              operator,
+              parameter: { compareDatetime }
+            });
+          },
+          allowRemove: true,
+          outsideClickCloses: false,
+          className: "min-w-64"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx69(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ jsx69("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
@@ -16145,8 +16165,8 @@ var TableFilterButton = ({
   const columnFilterValue = column.getFilterValue();
   const [filterValue, setFilterValue] = useState30(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = useRef29(null);
-  const containerRef = useRef29(null);
+  const anchorRef = useRef30(null);
+  const containerRef = useRef30(null);
   const [isOpen, setIsOpen] = useState30(false);
   const id = useId15();
   const ids = useMemo26(() => ({
@@ -16154,7 +16174,7 @@ var TableFilterButton = ({
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  useEffect31(() => {
+  useEffect32(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -16229,11 +16249,11 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback26, useEffect as useEffect32 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect33 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = useCallback26((e) => {
+  const handleResizeMove = useCallback27((e) => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
     const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
@@ -16249,7 +16269,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = useCallback26(() => {
+  const handleResizeEnd = useCallback27(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -16267,7 +16287,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  useEffect32(() => {
+  useEffect33(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -16287,14 +16307,14 @@ var TableHeader = ({ isSticky = false }) => {
       },
       header.id
     )) }) }, headerGroup.id)),
-    /* @__PURE__ */ jsx71("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx71("tr", { "data-name": "table-header-row", className: clsx26(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+    /* @__PURE__ */ jsx71("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx71("tr", { "data-name": "table-header-row", className: clsx25(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
       return /* @__PURE__ */ jsxs41(
         "th",
         {
           colSpan: header.colSpan,
           "data-sticky": isSticky ? "" : void 0,
           "data-name": "table-header-cell",
-          className: clsx26("group/table-header-cell", header.column.columnDef.meta?.className),
+          className: clsx25("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
             /* @__PURE__ */ jsx71(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs41("div", { className: "flex-row-1 items-center", children: [
               /* @__PURE__ */ jsx71(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx71(
@@ -16394,7 +16414,7 @@ var TableDisplay = ({
 };
 
 // src/components/layout/table/TablePagination.tsx
-import clsx27 from "clsx";
+import clsx26 from "clsx";
 import { jsx as jsx73, jsxs as jsxs43 } from "react/jsx-runtime";
 var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
@@ -16429,14 +16449,14 @@ var TablePageSizeSelect = ({
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ jsxs43("div", { ...props, className: clsx27("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+  return /* @__PURE__ */ jsxs43("div", { ...props, className: clsx26("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
     /* @__PURE__ */ jsx73(TablePaginationMenu, {}),
     /* @__PURE__ */ jsx73(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx73(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
   ] });
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-import { useCallback as useCallback27, useMemo as useMemo27 } from "react";
+import { useCallback as useCallback28, useMemo as useMemo27 } from "react";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
@@ -16492,7 +16512,7 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRowCell: useCallback27((columnId, table) => {
+      fillerRowCell: useCallback28((columnId, table) => {
         if (columnId === selectionRowId) {
           return /* @__PURE__ */ jsx74(Checkbox, { value: false, disabled: true });
         }
@@ -16510,7 +16530,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: useCallback27((row, table) => {
+      onRowClick: useCallback28((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -16522,11 +16542,11 @@ var TableWithSelectionProvider = ({
 };
 
 // src/components/layout/table/Table.tsx
-import clsx28 from "clsx";
+import clsx27 from "clsx";
 import { jsx as jsx75, jsxs as jsxs44 } from "react/jsx-runtime";
 var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ jsx75("div", { ...props, className: clsx28("flex-col-3", props.className), children: /* @__PURE__ */ jsxs44(TableProvider, { ...table, children: [
+  return /* @__PURE__ */ jsx75("div", { ...props, className: clsx27("flex-col-3", props.className), children: /* @__PURE__ */ jsxs44(TableProvider, { ...table, children: [
     header,
     /* @__PURE__ */ jsx75(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ jsx75(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx75(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -16543,7 +16563,7 @@ var TableWithSelection = ({
   ...props
 }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ jsx75("div", { ...props, className: clsx28("flex-col-3", props.className), children: /* @__PURE__ */ jsxs44(TableWithSelectionProvider, { ...table, children: [
+  return /* @__PURE__ */ jsx75("div", { ...props, className: clsx27("flex-col-3", props.className), children: /* @__PURE__ */ jsxs44(TableWithSelectionProvider, { ...table, children: [
     header,
     /* @__PURE__ */ jsx75(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ jsx75(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx75(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -16552,7 +16572,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect33, useMemo as useMemo28, useState as useState31 } from "react";
+import { memo as memo2, useEffect as useEffect34, useMemo as useMemo28, useState as useState31 } from "react";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -16568,7 +16588,7 @@ var TableColumnComponent = ({
     ...props,
     filterFn
   });
-  useEffect33(() => {
+  useEffect34(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -16588,13 +16608,13 @@ var TableColumn = (props) => {
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo29, useRef as useRef30, useId as useId16 } from "react";
+import { useMemo as useMemo29, useRef as useRef31, useId as useId16 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs45 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = useRef30(null);
+  const containerRef = useRef31(null);
   const generatedId = useId16();
   const ids = useMemo29(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
@@ -16862,7 +16882,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 import { useState as useState32 } from "react";
-import { clsx as clsx29 } from "clsx";
+import { clsx as clsx28 } from "clsx";
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -16901,7 +16921,7 @@ var CopyToClipboardWrapper = ({
           "div",
           {
             ref: callbackRef,
-            className: clsx29("w-fit hover:cursor-copy", containerClassName),
+            className: clsx28("w-fit hover:cursor-copy", containerClassName),
             ...disabled2 ? void 0 : props2,
             onClick: () => {
               if (disabled2) return;
@@ -16933,8 +16953,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback28, useRef as useRef31, useState as useState33 } from "react";
-import clsx30 from "clsx";
+import { useCallback as useCallback29, useRef as useRef32, useState as useState33 } from "react";
+import clsx29 from "clsx";
 import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs47 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
@@ -16944,7 +16964,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ jsx79(
   "div",
   {
-    className: clsx30("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: clsx29("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-disabled cursor-not-allowed": isDisabled,
       "text-menu-text hover:bg-primary/20": !isDisabled,
       "cursor-pointer": !!onClick
@@ -16959,7 +16979,7 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = useRef31(null);
+  const triggerRef = useRef32(null);
   const [isOpen, setIsOpen] = useState33(false);
   const bag = {
     isOpen,
@@ -16968,7 +16988,7 @@ var Menu = ({
     disabled
   };
   return /* @__PURE__ */ jsxs47(Fragment11, { children: [
-    trigger(bag, useCallback28((el) => triggerRef.current = el, [])),
+    trigger(bag, useCallback29((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ jsx79(
       PopUp,
       {
@@ -16990,8 +17010,8 @@ var Menu = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback29, useEffect as useEffect34, useState as useState34 } from "react";
-import clsx31 from "clsx";
+import { useCallback as useCallback30, useEffect as useEffect35, useState as useState34 } from "react";
+import clsx30 from "clsx";
 import { jsx as jsx80, jsxs as jsxs48 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
@@ -17027,7 +17047,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = useCallback29((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = useCallback30((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -17037,7 +17057,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = useCallback29((timestamp, startTime) => {
+  const animate = useCallback30((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -17110,7 +17130,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect34(() => {
+  useEffect35(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -17161,7 +17181,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx80(
               "div",
               {
-                className: clsx31(
+                className: clsx30(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -17188,7 +17208,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-import { useCallback as useCallback30 } from "react";
+import { useCallback as useCallback31 } from "react";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var Switch = ({
   value: controlledValue,
@@ -17203,7 +17223,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback30((value2) => {
+  const onChangeWrapper = useCallback31((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -17243,8 +17263,8 @@ var Switch = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-import { forwardRef as forwardRef19, useCallback as useCallback31, useId as useId17 } from "react";
-import clsx32 from "clsx";
+import { forwardRef as forwardRef19, useCallback as useCallback32, useId as useId17 } from "react";
+import clsx31 from "clsx";
 import { jsx as jsx82, jsxs as jsxs49 } from "react/jsx-runtime";
 var Textarea = forwardRef19(function Textarea2({
   value: controlledValue,
@@ -17262,7 +17282,7 @@ var Textarea = forwardRef19(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = useCallback31((text) => {
+  const onEditCompleteWrapper = useCallback32((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
@@ -17305,7 +17325,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ jsxs49(
     "div",
     {
-      className: clsx32(
+      className: clsx31(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -17314,13 +17334,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx82("label", { ...headlineProps, htmlFor: usedId, className: clsx32("typography-lable-md text-label", headlineProps.className), children: headline }),
+        headline && /* @__PURE__ */ jsx82("label", { ...headlineProps, htmlFor: usedId, className: clsx31("typography-lable-md text-label", headlineProps.className), children: headline }),
         /* @__PURE__ */ jsx82(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: clsx32(
+            className: clsx31(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             )
@@ -17375,7 +17395,7 @@ var TimeDisplay = ({
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId18 } from "react";
 import { forwardRef as forwardRef20, useState as useState35 } from "react";
-import clsx33 from "clsx";
+import clsx32 from "clsx";
 import { jsx as jsx84, jsxs as jsxs50 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef20(function InsideLabelInput2({
   id: customId,
@@ -17393,7 +17413,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
   const [isFocused, setIsFocused] = useState35(false);
   const generatedId = useId18();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs50("div", { className: clsx33("relative"), children: [
+  return /* @__PURE__ */ jsxs50("div", { className: clsx32("relative"), children: [
     /* @__PURE__ */ jsx84(
       Input,
       {
@@ -17411,7 +17431,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: clsx33("h-14 px-4 pb-2 py-6.5", props.className)
+        className: clsx32("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
     /* @__PURE__ */ jsx84(
@@ -17420,7 +17440,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx33(
+        className: clsx32(
           // 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",
@@ -17434,7 +17454,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
 
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx34 } from "clsx";
+import { clsx as clsx33 } from "clsx";
 import { jsx as jsx85, jsxs as jsxs51 } from "react/jsx-runtime";
 var SearchBar = ({
   value: controlledValue,
@@ -17451,7 +17471,7 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsxs51("div", { ...containerProps, className: clsx34("relative", containerProps?.className), children: [
+  return /* @__PURE__ */ jsxs51("div", { ...containerProps, className: clsx33("relative", containerProps?.className), children: [
     /* @__PURE__ */ jsx85(
       Input,
       {
@@ -17460,7 +17480,7 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx34("pr-10 w-full", inputProps.className)
+        className: clsx33("pr-10 w-full", inputProps.className)
       }
     ),
     /* @__PURE__ */ jsx85(
@@ -17472,7 +17492,7 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: clsx34("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        className: clsx33("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
         children: /* @__PURE__ */ jsx85(Search, { className: "w-full h-full" })
       }
     )
@@ -17480,9 +17500,9 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect35, useImperativeHandle as useImperativeHandle12, useRef as useRef32, useState as useState36 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect36, useImperativeHandle as useImperativeHandle12, useRef as useRef33, useState as useState36 } from "react";
 import { Pencil } from "lucide-react";
-import clsx35 from "clsx";
+import clsx34 from "clsx";
 import { jsx as jsx86, jsxs as jsxs52 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef21(function ToggleableInput2({
   value: controlledValue,
@@ -17498,14 +17518,14 @@ var ToggleableInput = forwardRef21(function ToggleableInput2({
     defaultValue: initialValue
   });
   const [isEditing, setIsEditing] = useState36(initialState !== "display");
-  const innerRef = useRef32(null);
+  const innerRef = useRef33(null);
   useImperativeHandle12(forwardedRef, () => innerRef.current);
-  useEffect35(() => {
+  useEffect36(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs52("div", { className: clsx35("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ jsxs52("div", { className: clsx34("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ jsx86(
       Input,
       {
@@ -17531,8 +17551,8 @@ var ToggleableInput = forwardRef21(function ToggleableInput2({
       }
     ),
     !isEditing && /* @__PURE__ */ jsxs52("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx86("span", { className: clsx35(" truncate"), children: value }),
-      /* @__PURE__ */ jsx86(Pencil, { className: clsx35(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ jsx86("span", { className: clsx34(" truncate"), children: value }),
+      /* @__PURE__ */ jsx86(Pencil, { className: clsx34(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -17541,7 +17561,7 @@ var ToggleableInput = forwardRef21(function ToggleableInput2({
 import { Check as Check3 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-import clsx36 from "clsx";
+import clsx35 from "clsx";
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
 import { jsx as jsx87, jsxs as jsxs53 } from "react/jsx-runtime";
 var PropertyBase = ({
@@ -17565,7 +17585,7 @@ var PropertyBase = ({
   return /* @__PURE__ */ jsxs53(
     "div",
     {
-      className: clsx36("group/property", className),
+      className: clsx35("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
@@ -17710,7 +17730,7 @@ var DateProperty = ({
 import { List } from "lucide-react";
 
 // src/components/user-interaction/select/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect36, useImperativeHandle as useImperativeHandle13, useRef as useRef33 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect37, useImperativeHandle as useImperativeHandle13, useRef as useRef34 } from "react";
 import { XIcon as XIcon2, Plus } from "lucide-react";
 import { jsx as jsx90, jsxs as jsxs55 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayButton2({
@@ -17720,7 +17740,7 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
   const translation = useHightideTranslation();
   const { state, trigger, item, ids, setIds } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  useEffect36(() => {
+  useEffect37(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -17728,9 +17748,9 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
       }));
     }
   }, [id, setIds]);
-  const innerRef = useRef33(null);
+  const innerRef = useRef34(null);
   useImperativeHandle13(ref, () => innerRef.current);
-  useEffect36(() => {
+  useEffect37(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -18016,7 +18036,7 @@ var TextProperty = ({
 };
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect37, useState as useState37 } from "react";
+import { useEffect as useEffect38, useState as useState37 } from "react";
 function Transition({
   children,
   show,
@@ -18025,7 +18045,7 @@ function Transition({
   const [isOpen, setIsOpen] = useState37(show);
   const [isTransitioning, setIsTransitioning] = useState37(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect37(() => {
+  useEffect38(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -18061,7 +18081,7 @@ var HightideProvider = ({
 };
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect39 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -18099,7 +18119,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect38(() => {
+  useEffect39(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -18108,10 +18128,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect39 } from "react";
+import React6, { useEffect as useEffect40 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect39(() => {
+  useEffect40(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -18131,9 +18151,9 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect40, useLayoutEffect as useLayoutEffect7, useState as useState38 } from "react";
+import { useEffect as useEffect41, useLayoutEffect as useLayoutEffect7, useState as useState38 } from "react";
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect40;
+var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect41;
 var useIsMounted = () => {
   const [isMounted, setIsMounted] = useState38(false);
   useIsomorphicEffect(() => {
@@ -18146,10 +18166,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-import { useEffect as useEffect41, useRef as useRef34 } from "react";
+import { useEffect as useEffect42, useRef as useRef35 } from "react";
 function useHandleRefs(handleRef) {
-  const refs = useRef34([]);
-  useEffect41(() => {
+  const refs = useRef35([]);
+  useEffect42(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -18187,10 +18207,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect42, useState as useState39 } from "react";
+import { useEffect as useEffect43, useState as useState39 } from "react";
 var useOverwritableState = (overwriteValue, onChange) => {
   const [state, setState] = useState39(overwriteValue);
-  useEffect42(() => {
+  useEffect43(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -18208,7 +18228,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback32, useEffect as useEffect43, useMemo as useMemo30, useState as useState40 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect44, useMemo as useMemo30, useState as useState40 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -18250,14 +18270,14 @@ var useSearch = ({
   const [search, setSearch] = useState40(initialSearch ?? "");
   const [result, setResult] = useState40(list);
   const searchTags = useMemo30(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = useCallback32((newSearch) => {
+  const updateSearch = useCallback33((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
@@ -18290,6 +18310,53 @@ var useSearch = ({
   };
 };
 
+// src/hooks/useUpdatingDateStrings.ts
+import { useEffect as useEffect45, useState as useState41 } from "react";
+var useUpdatingDateTime = ({ absoluteFormat, localeOverride, date }) => {
+  const { locale: contextLocale } = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState41({
+    compareDate: date,
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    relative: DateUtils.formatRelative(date, locale)
+  });
+  useEffect45(() => {
+    setDateAndTimeStrings({
+      compareDate: date,
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      relative: DateUtils.formatRelative(date, locale)
+    });
+  }, [date, absoluteFormat, locale]);
+  useEffect45(() => {
+    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);
@@ -18784,9 +18851,7 @@ export {
   VerticalDivider,
   Visibility,
   YearMonthPicker,
-  addDuration,
   builder,
-  changeDuration,
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
@@ -18799,21 +18864,15 @@ export {
   filterTags,
   filterTagsSingle,
   filterText,
-  formatDate,
-  formatDateTime,
-  getBetweenDuration,
   getNeighbours,
-  getWeeksForCalenderMonth,
   hightideTranslation,
   hightideTranslationLocales,
-  isInTimeSpan,
   isTableFilterCategory,
   match,
   mergeProps,
   noop,
   range,
   resolveSetState,
-  subtractDuration,
   toSizeVars,
   useAnchoredPosition,
   useControlledState,
@@ -18859,6 +18918,7 @@ export {
   useTooltip,
   useTransitionState,
   useTranslatedValidators,
+  useUpdatingDateTime,
   useWindowResizeObserver,
   validateEmail,
   writeToClipboard