@helpwave/hightide 0.12.2 → 0.12.4

package/dist/index.js

@@ -7186,6 +7186,7 @@ __export(index_exports, {
   useSelectOptionDisplayLocation: () => useSelectOptionDisplayLocation,
   useSingleSelection: () => useSingleSelection,
   useStorage: () => useStorage,
+  useSwipeGesture: () => useSwipeGesture,
   useTabContext: () => useTabContext,
   useTableColumnDefinitionContext: () => useTableColumnDefinitionContext,
   useTableContainerContext: () => useTableContainerContext,
@@ -8654,7 +8655,7 @@ var ProcessModelCanvas = ({
 };
 
 // src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
-var import_react41 = require("react");
+var import_react40 = require("react");
 var import_clsx9 = __toESM(require("clsx"));
 
 // src/global-contexts/LocaleContext.tsx
@@ -9828,7 +9829,7 @@ function useHightideTranslation(extensions, overwrites) {
 }
 
 // src/components/user-interaction/Select/Select.tsx
-var import_react40 = require("react");
+var import_react39 = require("react");
 
 // src/components/user-interaction/Select/SelectRoot.tsx
 var import_react20 = require("react");
@@ -10611,11 +10612,11 @@ var SelectButton = (0, import_react22.forwardRef)(
 );
 
 // src/components/user-interaction/Select/SelectContent.tsx
-var import_react39 = require("react");
+var import_react38 = require("react");
 var import_clsx8 = __toESM(require("clsx"));
 
 // src/components/layout/popup/PopUp.tsx
-var import_react35 = require("react");
+var import_react34 = require("react");
 
 // src/components/utils/Portal.tsx
 var import_react_dom = require("react-dom");
@@ -10974,7 +10975,6 @@ var AnchoredFloatingContainer = (0, import_react27.forwardRef)(function Floating
 // src/components/utils/FocusTrap.tsx
 var import_react29 = require("react");
 var import_react30 = require("react");
-var import_react31 = require("react");
 
 // src/hooks/focus/useFocusTrap.ts
 var import_react28 = require("react");
@@ -10994,7 +10994,7 @@ var createFocusGuard = () => {
   return div;
 };
 function getContainedFocusableElements(element) {
-  return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  return [...element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? []];
 }
 var FocusTrapService = class {
   constructor() {
@@ -11004,7 +11004,7 @@ var FocusTrapService = class {
       const active = this.getActive();
       if (!active || !active.container.current) return;
       const { container } = active;
-      if (!container.current.contains(event.target)) {
+      if (container.current && !container.current.contains(event.target)) {
         this.focusElement();
       }
     };
@@ -11020,10 +11020,10 @@ var FocusTrapService = class {
     const containerElement = container.current;
     if (initialFocusElement?.current) {
       initialFocusElement.current.focus();
-    } else {
+    } else if (containerElement) {
       const elements = getContainedFocusableElements(containerElement);
       if (elements && elements.length > 0) {
-        const first = elements.item(0);
+        const first = elements[0];
         first.focus();
       } else {
         containerElement.focus();
@@ -11100,10 +11100,10 @@ var useFocusTrap = ({
     const containerElement = container.current;
     if (initialFocus?.current) {
       initialFocus.current.focus();
-    } else {
+    } else if (containerElement) {
       const elements = getContainedFocusableElements(containerElement);
       if (elements && elements.length > 0) {
-        const first = elements.item(0);
+        const first = elements[0];
         first.focus();
       } else {
         console.warn("No focusable elements found in the focus trap. Affected element: ", containerElement);
@@ -11131,12 +11131,13 @@ var useFocusTrap = ({
       service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
       return () => {
         service.unregister(id);
-        lastFocusRef.current = void 0;
+        lastFocusRef.current = null;
       };
     }
   }, [active, container, focusElement, id, initialFocus]);
   (0, import_react28.useEffect)(() => {
-    if (active && !paused) {
+    const containerElement = container.current;
+    if (active && !paused && containerElement) {
       let onKeyDown = function(event) {
         const key = event.key;
         const elements = getContainedFocusableElements(containerElement);
@@ -11153,7 +11154,6 @@ var useFocusTrap = ({
           event.preventDefault();
         }
       };
-      const containerElement = container.current;
       containerElement.addEventListener("keydown", onKeyDown);
       return () => {
         containerElement.removeEventListener("keydown", onKeyDown);
@@ -11170,21 +11170,33 @@ var FocusTrap = ({ children, ...props }) => {
   });
   return children;
 };
-var FocusTrapWrapper = (0, import_react31.forwardRef)(function FocusTrap2({
+var FocusTrapWrapper = (0, import_react30.forwardRef)(function FocusTrap2({
   active,
   initialFocus,
   ...props
 }, forwardedRef) {
   const innerRef = (0, import_react29.useRef)(null);
-  (0, import_react30.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        innerRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...props
+    }
+  );
 });
 
 // src/hooks/useOutsideClick.ts
-var import_react32 = require("react");
+var import_react31 = require("react");
 var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
-  (0, import_react32.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!active) return;
     const listener = (event) => {
       if (event.target === null) return;
@@ -11205,17 +11217,17 @@ var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
 };
 
 // src/hooks/usePresenceRef.ts
-var import_react33 = require("react");
+var import_react32 = require("react");
 var usePresenceRef = ({
   isOpen = true
 }) => {
-  const [isPresent, setIsPresent] = (0, import_react33.useState)(false);
-  const ref = (0, import_react33.useRef)(null);
-  const refAssignment = (0, import_react33.useCallback)((node) => {
+  const [isPresent, setIsPresent] = (0, import_react32.useState)(false);
+  const ref = (0, import_react32.useRef)(null);
+  const refAssignment = (0, import_react32.useCallback)((node) => {
     ref.current = node;
     setIsPresent((prev) => prev || !!node);
   }, []);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!isOpen) {
       setIsPresent(false);
     }
@@ -11228,7 +11240,7 @@ var usePresenceRef = ({
 };
 
 // src/hooks/useOverlayRegistry.ts
-var import_react34 = require("react");
+var import_react33 = require("react");
 var OverlayRegistry = class _OverlayRegistry {
   constructor() {
     // The frontmost overlay is at the end of the array
@@ -11293,18 +11305,18 @@ var OverlayRegistry = class _OverlayRegistry {
   }
 };
 var useOverlayRegistry = (props = {}) => {
-  const generatedId = (0, import_react34.useId)();
-  const item = (0, import_react34.useMemo)(() => ({
+  const generatedId = (0, import_react33.useId)();
+  const item = (0, import_react33.useMemo)(() => ({
     id: props.id ?? generatedId,
     tags: props.tags
   }), [props.id, generatedId, props.tags]);
-  const [value, setValue] = (0, import_react34.useState)({
+  const [value, setValue] = (0, import_react33.useState)({
     activeId: null,
     itemInformation: {},
     tagItemCounts: {}
   });
-  const registry = (0, import_react34.useMemo)(() => OverlayRegistry.getInstance(), []);
-  (0, import_react34.useEffect)(() => {
+  const registry = (0, import_react33.useMemo)(() => OverlayRegistry.getInstance(), []);
+  (0, import_react33.useEffect)(() => {
     if (!props.isActive) {
       return;
     }
@@ -11335,7 +11347,7 @@ var useOverlayRegistry = (props = {}) => {
 
 // src/components/layout/popup/PopUp.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var PopUp = (0, import_react35.forwardRef)(function PopUp2({
+var PopUp = (0, import_react34.forwardRef)(function PopUp2({
   children,
   isOpen: isOpenOverwrite,
   focusTrapOptions,
@@ -11347,23 +11359,23 @@ var PopUp = (0, import_react35.forwardRef)(function PopUp2({
   anchorExcludedFromOutsideClick = false,
   ...props
 }, forwardRef36) {
-  const context = (0, import_react35.useContext)(PopUpContext);
+  const context = (0, import_react34.useContext)(PopUpContext);
   const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
   const anchor = anchorOverwrite ?? context?.triggerRef ?? void 0;
   const id = props.id ?? context?.popUpId;
   const { refAssignment, isPresent, ref } = usePresenceRef({ isOpen });
-  (0, import_react35.useImperativeHandle)(forwardRef36, () => ref.current, [ref]);
+  (0, import_react34.useImperativeHandle)(forwardRef36, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
-  const onCloseWrapper = (0, import_react35.useCallback)(() => {
+  const onCloseWrapper = (0, import_react34.useCallback)(() => {
     onCloseStable();
     context?.setIsOpen(false);
   }, [onCloseStable, context]);
-  const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: (0, import_react35.useMemo)(() => ["popup"], []) });
+  const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: (0, import_react34.useMemo)(() => ["popup"], []) });
   const isInFront = tagPositions?.["popup"] === 0;
   const isOutsideClickActive = isOpen && isInFront && (outsideClickOptions?.active ?? true);
   useOutsideClick({
-    onOutsideClick: (0, import_react35.useCallback)((event) => {
+    onOutsideClick: (0, import_react34.useCallback)((event) => {
       if (event.defaultPrevented) return;
       onCloseWrapper();
       onOutsideClickStable(event);
@@ -11400,16 +11412,16 @@ var PopUp = (0, import_react35.forwardRef)(function PopUp2({
 });
 
 // src/components/user-interaction/input/Input.tsx
-var import_react38 = require("react");
+var import_react37 = require("react");
 
 // src/hooks/useDelay.ts
-var import_react36 = require("react");
+var import_react35 = require("react");
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = (0, import_react36.useState)(void 0);
+  const [timer, setTimer] = (0, import_react35.useState)(void 0);
   const { delay, disabled } = {
     ...defaultOptions2,
     ...options
@@ -11428,12 +11440,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -11443,9 +11455,9 @@ function useDelay(options) {
 }
 
 // src/hooks/focus/useFocusManagement.ts
-var import_react37 = require("react");
+var import_react36 = require("react");
 function useFocusManagement() {
-  const getFocusableElements = (0, import_react37.useCallback)(() => {
+  const getFocusableElements = (0, import_react36.useCallback)(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -11454,7 +11466,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = (0, import_react37.useCallback)(() => {
+  const getNextFocusElement = (0, import_react36.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -11466,11 +11478,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = (0, import_react37.useCallback)(() => {
+  const focusNext = (0, import_react36.useCallback)(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = (0, import_react37.useCallback)(() => {
+  const getPreviousFocusElement = (0, import_react36.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -11486,7 +11498,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = (0, import_react37.useCallback)(() => {
+  const focusPrevious = (0, import_react36.useCallback)(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -11507,7 +11519,7 @@ var defaultEditCompleteOptions = {
   afterDelay: false,
   delay: 2500
 };
-var Input = (0, import_react38.forwardRef)(function Input2({
+var Input = (0, import_react37.forwardRef)(function Input2({
   value: controlledValue,
   initialValue,
   invalid = false,
@@ -11531,8 +11543,8 @@ var Input = (0, import_react38.forwardRef)(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay || props.disabled || props.readOnly });
-  const innerRef = (0, import_react38.useRef)(null);
-  (0, import_react38.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react37.useRef)(null);
+  (0, import_react37.useImperativeHandle)(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
@@ -11578,7 +11590,7 @@ var Input = (0, import_react38.forwardRef)(function Input2({
 
 // src/components/user-interaction/Select/SelectContent.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var SelectContent = (0, import_react39.forwardRef)(function SelectContent2({
+var SelectContent = (0, import_react38.forwardRef)(function SelectContent2({
   id,
   options,
   showSearch: showSearchOverride,
@@ -11586,18 +11598,18 @@ var SelectContent = (0, import_react39.forwardRef)(function SelectContent2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = (0, import_react39.useRef)(null);
-  const searchInputRef = (0, import_react39.useRef)(null);
-  (0, import_react39.useImperativeHandle)(ref, () => innerRef.current);
+  const innerRef = (0, import_react38.useRef)(null);
+  const searchInputRef = (0, import_react38.useRef)(null);
+  (0, import_react38.useImperativeHandle)(ref, () => innerRef.current);
   const context = useSelectContext();
   const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context;
   const { setIds } = config;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = (0, import_react39.useCallback)(
+  const keyHandler = (0, import_react38.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -11706,7 +11718,7 @@ var SelectContent = (0, import_react39.forwardRef)(function SelectContent2({
 
 // src/components/user-interaction/Select/Select.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Select = (0, import_react40.forwardRef)(function Select2({ children, contentPanelProps, buttonProps, ...props }, ref) {
+var Select = (0, import_react39.forwardRef)(function Select2({ children, contentPanelProps, buttonProps, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(SelectRoot, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SelectButton,
@@ -11782,20 +11794,20 @@ function runParticleAlongPath(path, durationMs, signal, onFrame) {
 }
 var ProcessModelTraceReplay = ({ graph, className }) => {
   const translation = useHightideTranslation();
-  const pathPrefix = (0, import_react41.useId)().replace(/:/g, "");
-  const hostRef = (0, import_react41.useRef)(null);
-  const traceIndexRef = (0, import_react41.useRef)(0);
-  const playbackRef = (0, import_react41.useRef)(null);
-  const playbackLoopLockRef = (0, import_react41.useRef)(false);
-  const [speedMult, setSpeedMult] = (0, import_react41.useState)(2);
-  const [isPlaying, setIsPlaying] = (0, import_react41.useState)(false);
-  const [activeNodeId, setActiveNodeId] = (0, import_react41.useState)();
-  const [visitedNodeIds, setVisitedNodeIds] = (0, import_react41.useState)(/* @__PURE__ */ new Set());
-  const [edgeReplayHighlight, setEdgeReplayHighlight] = (0, import_react41.useState)(null);
-  const [replayParticle, setReplayParticle] = (0, import_react41.useState)(null);
-  const [logLines, setLogLines] = (0, import_react41.useState)([]);
-  const [logPlaceholder, setLogPlaceholder] = (0, import_react41.useState)(true);
-  const getPath = (0, import_react41.useCallback)(
+  const pathPrefix = (0, import_react40.useId)().replace(/:/g, "");
+  const hostRef = (0, import_react40.useRef)(null);
+  const traceIndexRef = (0, import_react40.useRef)(0);
+  const playbackRef = (0, import_react40.useRef)(null);
+  const playbackLoopLockRef = (0, import_react40.useRef)(false);
+  const [speedMult, setSpeedMult] = (0, import_react40.useState)(2);
+  const [isPlaying, setIsPlaying] = (0, import_react40.useState)(false);
+  const [activeNodeId, setActiveNodeId] = (0, import_react40.useState)();
+  const [visitedNodeIds, setVisitedNodeIds] = (0, import_react40.useState)(/* @__PURE__ */ new Set());
+  const [edgeReplayHighlight, setEdgeReplayHighlight] = (0, import_react40.useState)(null);
+  const [replayParticle, setReplayParticle] = (0, import_react40.useState)(null);
+  const [logLines, setLogLines] = (0, import_react40.useState)([]);
+  const [logPlaceholder, setLogPlaceholder] = (0, import_react40.useState)(true);
+  const getPath = (0, import_react40.useCallback)(
     (from, to) => {
       const root = hostRef.current;
       if (!root) {
@@ -11810,7 +11822,7 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
     },
     [pathPrefix]
   );
-  const addLog = (0, import_react41.useCallback)((text) => {
+  const addLog = (0, import_react40.useCallback)((text) => {
     setLogPlaceholder(false);
     const time = (/* @__PURE__ */ new Date()).toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
     setLogLines((prev) => [
@@ -11818,20 +11830,20 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
       { id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, time, text }
     ]);
   }, []);
-  const getLabel = (0, import_react41.useCallback)(
+  const getLabel = (0, import_react40.useCallback)(
     (id) => {
       const n = graph.nodes.find((x) => x.id === id);
       return n ? `${n.label} (${n.count})` : id;
     },
     [graph.nodes]
   );
-  const stopPlayback = (0, import_react41.useCallback)(() => {
+  const stopPlayback = (0, import_react40.useCallback)(() => {
     playbackRef.current?.abort();
     playbackRef.current = null;
     setIsPlaying(false);
     setReplayParticle(null);
   }, []);
-  const resetReplay = (0, import_react41.useCallback)(() => {
+  const resetReplay = (0, import_react40.useCallback)(() => {
     stopPlayback();
     traceIndexRef.current = 0;
     setActiveNodeId(void 0);
@@ -11840,14 +11852,14 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
     setLogLines([]);
     setLogPlaceholder(true);
   }, [stopPlayback]);
-  const awaitDoubleRaf = (0, import_react41.useCallback)(() => {
+  const awaitDoubleRaf = (0, import_react40.useCallback)(() => {
     return new Promise((resolve2) => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => resolve2());
       });
     });
   }, []);
-  const runTraceOnce = (0, import_react41.useCallback)(
+  const runTraceOnce = (0, import_react40.useCallback)(
     async (trace, signal) => {
       await awaitDoubleRaf();
       if (signal.aborted) {
@@ -11900,7 +11912,7 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
     },
     [addLog, awaitDoubleRaf, getLabel, getPath, speedMult]
   );
-  const startPlayback = (0, import_react41.useCallback)(async () => {
+  const startPlayback = (0, import_react40.useCallback)(async () => {
     if (!graph.traces.length || playbackLoopLockRef.current) {
       return;
     }
@@ -11931,10 +11943,10 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
       setReplayParticle(null);
     }
   }, [graph.traces, runTraceOnce, speedMult, stopPlayback]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     resetReplay();
   }, [graph, resetReplay]);
-  (0, import_react41.useEffect)(() => () => {
+  (0, import_react40.useEffect)(() => () => {
     playbackRef.current?.abort();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-name": "process-model-trace-replay", className: (0, import_clsx9.default)("process-model-trace-replay", className), children: [
@@ -12263,9 +12275,9 @@ function getProcessModelLibraryEntry(id) {
 }
 
 // src/components/form/FieldLayout.tsx
-var import_react42 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
+var FormFieldLayout = (0, import_react41.forwardRef)(function FormFieldLayout2({
   children,
   ids: idOverwrites = {},
   required = false,
@@ -12280,8 +12292,8 @@ var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
   showRequiredIndicator = true,
   ...props
 }, ref) {
-  const generatedId = (0, import_react42.useId)();
-  const ids = (0, import_react42.useMemo)(() => ({
+  const generatedId = (0, import_react41.useId)();
+  const ids = (0, import_react41.useMemo)(() => ({
     input: idOverwrites.input ?? `form-field-input-${generatedId}`,
     error: idOverwrites.error ?? `form-field-error-${generatedId}`,
     label: idOverwrites.label ?? `form-field-label-${generatedId}`,
@@ -12292,14 +12304,14 @@ var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
     invalidDescription ? ids.error : void 0
   ].filter(Boolean).join(" ");
   const invalid = !!invalidDescription;
-  const inputAriaAttributes = (0, import_react42.useMemo)(() => ({
+  const inputAriaAttributes = (0, import_react41.useMemo)(() => ({
     "aria-required": required,
     "aria-describedby": describedBy,
     "aria-labelledby": label ? ids.label : void 0,
     "aria-invalid": invalid,
     "aria-errormessage": invalid ? ids.error : void 0
   }), [describedBy, ids.error, ids.label, invalid, label, required]);
-  const state = (0, import_react42.useMemo)(() => ({
+  const state = (0, import_react41.useMemo)(() => ({
     disabled,
     invalid,
     readOnly,
@@ -12358,47 +12370,47 @@ var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
 });
 
 // src/components/form/FormContext.tsx
-var import_react43 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var FormContext = (0, import_react43.createContext)(null);
+var FormContext = (0, import_react42.createContext)(null);
 var FormProvider = ({ children, state }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormContext.Provider, { value: state, children });
 };
 function useForm() {
-  const ctx = (0, import_react43.useContext)(FormContext);
+  const ctx = (0, import_react42.useContext)(FormContext);
   if (!ctx) throw new Error("FormContext is only available inside a <Form>");
   return ctx;
 }
 function useFormField(key, { triggerUpdate = true, validationBehaviour = "touched" }) {
-  const context = (0, import_react43.useContext)(FormContext);
-  const subscribe = (0, import_react43.useCallback)((cb) => {
+  const context = (0, import_react42.useContext)(FormContext);
+  const subscribe = (0, import_react42.useCallback)((cb) => {
     if (!context) return () => {
     };
     return context.store.subscribe(key, cb);
   }, [context, key]);
-  const subscribeAll = (0, import_react43.useCallback)((cb) => {
+  const subscribeAll = (0, import_react42.useCallback)((cb) => {
     if (!context) return () => {
     };
     return context.store.subscribe("ALL", cb);
   }, [context]);
-  const value = (0, import_react43.useSyncExternalStore)(
+  const value = (0, import_react42.useSyncExternalStore)(
     subscribe,
     () => context ? context.store.getValue(key) : void 0
   );
-  const error = (0, import_react43.useSyncExternalStore)(
+  const error = (0, import_react42.useSyncExternalStore)(
     subscribe,
     () => context ? context.store.getError(key) : void 0
   );
-  const touched = (0, import_react43.useSyncExternalStore)(
+  const touched = (0, import_react42.useSyncExternalStore)(
     subscribe,
     () => context ? context.store.getTouched(key) : void 0
   );
-  const hasTriedSubmitting = (0, import_react43.useSyncExternalStore)(
+  const hasTriedSubmitting = (0, import_react42.useSyncExternalStore)(
     subscribeAll,
     () => context ? context.store.getHasTriedSubmitting() : void 0
   );
   const isShowingErrors = validationBehaviour === "always" || validationBehaviour === "touched" && (touched ?? false) || validationBehaviour === "submit" && (hasTriedSubmitting ?? false);
-  const getDataProps = (0, import_react43.useCallback)(() => {
+  const getDataProps = (0, import_react42.useCallback)(() => {
     return {
       value,
       onValueChange: (val) => context?.store.setValue(key, val),
@@ -12421,18 +12433,18 @@ function useFormField(key, { triggerUpdate = true, validationBehaviour = "touche
   };
 }
 function useFormObserver({ formStore } = {}) {
-  const context = (0, import_react43.useContext)(FormContext);
+  const context = (0, import_react42.useContext)(FormContext);
   const store = formStore ?? context?.store;
-  const subscribe = (0, import_react43.useCallback)((cb) => {
+  const subscribe = (0, import_react42.useCallback)((cb) => {
     if (!store) return () => {
     };
     return store.subscribe("ALL", cb);
   }, [store]);
-  const values = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getAllValues() : void 0);
-  const errors = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getErrors() : void 0);
-  const touched = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getAllTouched() : void 0);
-  const hasErrors = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getHasError() : void 0);
-  const hasTriedSubmitting = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getHasTriedSubmitting() : void 0);
+  const values = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getAllValues() : void 0);
+  const errors = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getErrors() : void 0);
+  const touched = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getAllTouched() : void 0);
+  const hasErrors = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getHasError() : void 0);
+  const hasTriedSubmitting = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getHasTriedSubmitting() : void 0);
   if (!store) return null;
   return {
     store,
@@ -12444,16 +12456,16 @@ function useFormObserver({ formStore } = {}) {
   };
 }
 function useFormObserverKey({ formStore, formKey }) {
-  const context = (0, import_react43.useContext)(FormContext);
+  const context = (0, import_react42.useContext)(FormContext);
   const store = formStore ?? context?.store;
-  const subscribe = (0, import_react43.useCallback)((cb) => {
+  const subscribe = (0, import_react42.useCallback)((cb) => {
     if (!store) return () => {
     };
     return store.subscribe(formKey, cb);
   }, [store, formKey]);
-  const value = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getValue(formKey) : void 0);
-  const error = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getError(formKey) : void 0);
-  const touched = (0, import_react43.useSyncExternalStore)(subscribe, () => store ? store.getTouched(formKey) : void 0);
+  const value = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getValue(formKey) : void 0);
+  const error = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getError(formKey) : void 0);
+  const touched = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getTouched(formKey) : void 0);
   if (!store) return null;
   return {
     store,
@@ -12679,7 +12691,7 @@ var FormStore = class {
 };
 
 // src/components/form/useCreateForm.tsx
-var import_react44 = require("react");
+var import_react43 = require("react");
 function useCreateForm({
   onFormSubmit,
   onFormError,
@@ -12697,23 +12709,23 @@ function useCreateForm({
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
   const onUpdateStable = useEventCallbackStabilizer(onUpdate);
   const onValidUpdateStable = useEventCallbackStabilizer(onValidUpdate);
-  const storeRef = (0, import_react44.useRef)(
+  const storeRef = (0, import_react43.useRef)(
     new FormStore({
       initialValues,
       hasTriedSubmitting,
       validators
     })
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     storeRef.current.changeValidators(validators);
   }, [validators]);
-  const fieldRefs = (0, import_react44.useRef)({});
-  const registerRef = (0, import_react44.useCallback)((key) => {
+  const fieldRefs = (0, import_react43.useRef)({});
+  const registerRef = (0, import_react43.useCallback)((key) => {
     return (el) => {
       fieldRefs.current[key] = el;
     };
   }, []);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const handleUpdate = (event) => {
       if (event.type === "onSubmit") {
         if (event.hasErrors) {
@@ -12764,7 +12776,7 @@ function useCreateForm({
       unsubscribe();
     };
   }, [onFormErrorStable, onFormSubmitStable, onUpdateStable, onValidUpdateStable, onValueChangeStable, scrollOptions, scrollToElements]);
-  const callbacks = (0, import_react44.useMemo)(() => ({
+  const callbacks = (0, import_react43.useMemo)(() => ({
     reset: () => storeRef.current.reset(),
     submit: () => storeRef.current.submit(),
     update: (updater, triggerUpdate = false) => {
@@ -12784,20 +12796,20 @@ function useCreateForm({
 }
 
 // src/components/layout/Carousel.tsx
-var import_react51 = require("react");
+var import_react50 = require("react");
 var import_clsx10 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
 
 // src/components/user-interaction/IconButton.tsx
-var import_react50 = require("react");
+var import_react49 = require("react");
 
 // src/components/user-interaction/Tooltip.tsx
+var import_react45 = require("react");
 var import_react46 = require("react");
 var import_react47 = require("react");
-var import_react48 = require("react");
 
 // src/hooks/useTransitionState.ts
-var import_react45 = require("react");
+var import_react44 = require("react");
 var reducer = (state, action) => {
   switch (action) {
     case "open":
@@ -12823,18 +12835,18 @@ var useTransitionState = ({
   ref,
   timeout: initialTimeout = 1e3
 }) => {
-  const [state, dispatch] = (0, import_react45.useReducer)(reducer, initialState);
-  const timer = (0, import_react45.useRef)(void 0);
-  const hasAnimation = (0, import_react45.useRef)(false);
-  const [timeout] = (0, import_react45.useState)(initialTimeout);
-  (0, import_react45.useEffect)(() => {
+  const [state, dispatch] = (0, import_react44.useReducer)(reducer, initialState);
+  const timer = (0, import_react44.useRef)(void 0);
+  const hasAnimation = (0, import_react44.useRef)(false);
+  const [timeout] = (0, import_react44.useState)(initialTimeout);
+  (0, import_react44.useEffect)(() => {
     if (isOpen && (state !== "opened" && state !== "opening")) {
       dispatch("open");
     } else if (!isOpen && (state !== "closed" && state !== "closing")) {
       dispatch("close");
     }
   }, [isOpen, state]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (state === "opening" || state === "closing") {
       if (timer.current) {
         clearTimeout(timer.current);
@@ -12850,7 +12862,7 @@ var useTransitionState = ({
       }
     }
   }, [state, timeout]);
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     if (state === "opening" || state === "closing") {
       let element = ref?.current;
       if (!element && ref) {
@@ -12872,14 +12884,14 @@ var useTransitionState = ({
       }
     }
   }, [ref, state]);
-  const onStart = (0, import_react45.useCallback)(() => {
+  const onStart = (0, import_react44.useCallback)(() => {
     hasAnimation.current = true;
   }, []);
-  const onEnd = (0, import_react45.useCallback)(() => {
+  const onEnd = (0, import_react44.useCallback)(() => {
     dispatch("finished");
     hasAnimation.current = false;
   }, []);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (ref?.current && (state === "opening" || state === "closing")) {
       const element = ref.current;
       element.addEventListener("animationstart", onStart);
@@ -12903,11 +12915,11 @@ var useTransitionState = ({
 };
 
 // src/components/user-interaction/Tooltip.tsx
-var import_react49 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var TooltipContext = (0, import_react49.createContext)(null);
+var TooltipContext = (0, import_react48.createContext)(null);
 var useTooltip = () => {
-  const context = (0, import_react46.useContext)(TooltipContext);
+  const context = (0, import_react45.useContext)(TooltipContext);
   if (!context) {
     throw new Error("useTooltip must be used within a TooltipContext.Provider or TooltipRoot");
   }
@@ -12920,20 +12932,20 @@ var TooltipRoot = ({
   appearDelay: appearOverwrite,
   disabled = false
 }) => {
-  const generatedId = "tooltip-" + (0, import_react47.useId)();
-  const [tooltipId, setTooltipId] = (0, import_react48.useState)(generatedId);
-  const [isShown, setIsShown] = (0, import_react48.useState)(isInitiallyShown);
-  const timeoutRef = (0, import_react48.useRef)(void 0);
+  const generatedId = "tooltip-" + (0, import_react46.useId)();
+  const [tooltipId, setTooltipId] = (0, import_react47.useState)(generatedId);
+  const [isShown, setIsShown] = (0, import_react47.useState)(isInitiallyShown);
+  const timeoutRef = (0, import_react47.useRef)(void 0);
   const { config } = useHightideConfig();
-  const appearDelay = (0, import_react48.useMemo)(
+  const appearDelay = (0, import_react47.useMemo)(
     () => appearOverwrite ?? config.tooltip.appearDelay,
     [appearOverwrite, config.tooltip.appearDelay]
   );
-  const triggerRef = (0, import_react48.useRef)(null);
-  (0, import_react46.useEffect)(() => {
+  const triggerRef = (0, import_react47.useRef)(null);
+  (0, import_react45.useEffect)(() => {
     onIsShownChange?.(isShown);
   }, [isShown, onIsShownChange]);
-  const openWithDelay = (0, import_react48.useCallback)(() => {
+  const openWithDelay = (0, import_react47.useCallback)(() => {
     if (timeoutRef.current || isShown) return;
     if (appearDelay < 0) {
       setIsShown(true);
@@ -12944,14 +12956,14 @@ var TooltipRoot = ({
       setIsShown(true);
     }, appearDelay);
   }, [appearDelay, isShown]);
-  const close2 = (0, import_react48.useCallback)(() => {
+  const close2 = (0, import_react47.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = void 0;
     }
     setIsShown(false);
   }, []);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!isShown) return;
     const closeOnBlur = () => close2();
     const closeOnScroll = () => close2();
@@ -12962,7 +12974,7 @@ var TooltipRoot = ({
       window.removeEventListener("scroll", closeOnScroll, true);
     };
   }, [isShown, close2]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (disabled) {
       setIsShown(false);
       if (timeoutRef.current) {
@@ -12971,7 +12983,7 @@ var TooltipRoot = ({
       }
     }
   }, [disabled]);
-  const contextValue = (0, import_react48.useMemo)(() => ({
+  const contextValue = (0, import_react47.useMemo)(() => ({
     tooltip: {
       id: tooltipId,
       setId: setTooltipId
@@ -12995,7 +13007,7 @@ var TooltipRoot = ({
   }), [tooltipId, openWithDelay, close2, isShown, disabled]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContext.Provider, { value: contextValue, children });
 };
-var TooltipDisplay = (0, import_react46.forwardRef)(function TooltipAnchoredFloatingContainer({
+var TooltipDisplay = (0, import_react45.forwardRef)(function TooltipAnchoredFloatingContainer({
   children,
   alignment = "bottom",
   disabled: disabledOverwrite,
@@ -13005,30 +13017,30 @@ var TooltipDisplay = (0, import_react46.forwardRef)(function TooltipAnchoredFloa
   ...props
 }, forwardRef36) {
   const { config } = useHightideConfig();
-  const tooltipContext = (0, import_react46.useContext)(TooltipContext);
+  const tooltipContext = (0, import_react45.useContext)(TooltipContext);
   const disabled = disabledOverwrite ?? tooltipContext?.disabled;
   const isShown = isShownOverwrite ?? tooltipContext?.isShown;
   const anchor = anchorOverwrite ?? tooltipContext?.trigger.ref;
   const id = tooltipContext?.tooltip.id ?? props.id;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!tooltipContext || !props.id) return;
     tooltipContext?.tooltip.setId(props.id);
   }, [props.id, tooltipContext]);
-  const isAnimated = (0, import_react48.useMemo)(
+  const isAnimated = (0, import_react47.useMemo)(
     () => isAnimatedOverwrite ?? config.tooltip.isAnimated,
     [isAnimatedOverwrite, config.tooltip.isAnimated]
   );
-  const container = (0, import_react48.useRef)(null);
-  (0, import_react46.useImperativeHandle)(forwardRef36, () => container.current);
+  const container = (0, import_react47.useRef)(null);
+  (0, import_react45.useImperativeHandle)(forwardRef36, () => container.current);
   const isActive = !disabled && isShown;
   const { isVisible, transitionState } = useTransitionState(
-    (0, import_react48.useMemo)(() => ({ isOpen: isShown, ref: container }), [isShown])
+    (0, import_react47.useMemo)(() => ({ isOpen: isShown, ref: container }), [isShown])
   );
-  const verticalAlignment = (0, import_react48.useMemo)(
+  const verticalAlignment = (0, import_react47.useMemo)(
     () => alignment === "top" ? "beforeStart" : alignment === "bottom" ? "afterEnd" : "center",
     [alignment]
   );
-  const horizontalAlignment = (0, import_react48.useMemo)(
+  const horizontalAlignment = (0, import_react47.useMemo)(
     () => alignment === "left" ? "beforeStart" : alignment === "right" ? "afterEnd" : "center",
     [alignment]
   );
@@ -13116,7 +13128,7 @@ var Tooltip = ({
 
 // src/components/user-interaction/IconButton.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var IconButtonBase = (0, import_react50.forwardRef)(function IconButtonBase2({
+var IconButtonBase = (0, import_react49.forwardRef)(function IconButtonBase2({
   children,
   size = "md",
   color = "primary",
@@ -13143,14 +13155,14 @@ var IconButtonBase = (0, import_react50.forwardRef)(function IconButtonBase2({
     }
   );
 });
-var IconButtonTooltipTrigger = (0, import_react50.forwardRef)(function IconButtonTooltipTrigger2({
+var IconButtonTooltipTrigger = (0, import_react49.forwardRef)(function IconButtonTooltipTrigger2({
   disabled,
   ...props
 }, ref) {
   const { trigger: { ref: triggerRef, props: tooltipTriggerProps } } = useTooltip();
-  const innerRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react50.useImperativeHandle)(triggerRef, () => innerRef.current);
+  const innerRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react49.useImperativeHandle)(triggerRef, () => innerRef.current);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     IconButtonBase,
     {
@@ -13199,7 +13211,7 @@ var IconButtonTooltipTrigger = (0, import_react50.forwardRef)(function IconButto
     }
   );
 });
-var IconButton = (0, import_react50.forwardRef)(function IconButton2({
+var IconButton = (0, import_react49.forwardRef)(function IconButton2({
   tooltip,
   tooltipProps,
   "aria-label": ariaLabel,
@@ -13235,9 +13247,9 @@ var IconButton = (0, import_react50.forwardRef)(function IconButton2({
 
 // src/components/layout/Carousel.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var CarouselContext = (0, import_react51.createContext)(null);
+var CarouselContext = (0, import_react50.createContext)(null);
 var useCarouselContext = () => {
-  const context = (0, import_react51.useContext)(CarouselContext);
+  const context = (0, import_react50.useContext)(CarouselContext);
   if (!context) {
     console.error("useCarouselContext must be used within CarouselContext");
   }
@@ -13248,7 +13260,7 @@ function CarouselTabs({
 }) {
   const translation = useHightideTranslation();
   const { id, slideCount, currentIndex, isLooping } = useCarouselContext();
-  const tabRefs = (0, import_react51.useRef)([]);
+  const tabRefs = (0, import_react50.useRef)([]);
   const handleKeyDown = (event, index) => {
     let newIndex = index;
     if (event.key === "ArrowRight") {
@@ -13301,7 +13313,7 @@ function CarouselTabs({
     }
   );
 }
-var CarouselSlide = (0, import_react51.forwardRef)(
+var CarouselSlide = (0, import_react50.forwardRef)(
   function CarouselSlide2({
     index,
     isSelected,
@@ -13347,17 +13359,17 @@ var Carousel = ({
 }) => {
   const translation = useHightideTranslation();
   const onSlideChangedStable = useEventCallbackStabilizer(onSlideChanged);
-  const slideRefs = (0, import_react51.useRef)([]);
-  const [currentIndex, setCurrentIndex] = (0, import_react51.useState)(0);
-  const [hasFocus, setHasFocus] = (0, import_react51.useState)(false);
-  const [dragState, setDragState] = (0, import_react51.useState)();
+  const slideRefs = (0, import_react50.useRef)([]);
+  const [currentIndex, setCurrentIndex] = (0, import_react50.useState)(0);
+  const [hasFocus, setHasFocus] = (0, import_react50.useState)(false);
+  const [dragState, setDragState] = (0, import_react50.useState)();
   const isPaused = hasFocus;
-  const carouselContainerRef = (0, import_react51.useRef)(null);
-  const [disableClick, setDisableClick] = (0, import_react51.useState)(false);
-  const timeOut = (0, import_react51.useRef)(void 0);
-  const length = (0, import_react51.useMemo)(() => children.length, [children]);
+  const carouselContainerRef = (0, import_react50.useRef)(null);
+  const [disableClick, setDisableClick] = (0, import_react50.useState)(false);
+  const timeOut = (0, import_react50.useRef)(void 0);
+  const length = (0, import_react50.useMemo)(() => children.length, [children]);
   const paddingItemCount = 3;
-  const generatedId = "carousel" + (0, import_react51.useId)();
+  const generatedId = "carousel" + (0, import_react50.useId)();
   const id = props.id ?? generatedId;
   if (isAutoPlaying && !isLooping) {
     console.error("When isAutoLooping is true, isLooping should also be true");
@@ -13366,7 +13378,7 @@ var Carousel = ({
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   animationTime = Math.max(100, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const carousel = carouselContainerRef.current;
     if (carousel) {
       let onFocus = function() {
@@ -13389,7 +13401,7 @@ var Carousel = ({
   const canGoLeft = () => {
     return isLooping || currentIndex !== 0;
   };
-  const canGoRight = (0, import_react51.useCallback)(() => {
+  const canGoRight = (0, import_react50.useCallback)(() => {
     return isLooping || currentIndex !== length - 1;
   }, [currentIndex, isLooping, length]);
   const left = () => {
@@ -13397,12 +13409,12 @@ var Carousel = ({
       setCurrentIndex((currentIndex + length - 1) % length);
     }
   };
-  const right = (0, import_react51.useCallback)(() => {
+  const right = (0, import_react50.useCallback)(() => {
     if (canGoRight()) {
       setCurrentIndex((currentIndex + length + 1) % length);
     }
   }, [canGoRight, currentIndex, length]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!timeOut.current && !isPaused) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -13454,10 +13466,10 @@ var Carousel = ({
     }
     setDragState(void 0);
   };
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     setDisableClick(!dragState);
   }, [dragState]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     onSlideChangedStable(currentIndex);
   }, [currentIndex, onSlideChangedStable]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -13593,20 +13605,20 @@ var DividerInserter = ({
 };
 
 // src/components/layout/Expandable.tsx
+var import_react51 = require("react");
 var import_react52 = require("react");
 var import_react53 = require("react");
-var import_react54 = require("react");
 var import_clsx11 = __toESM(require("clsx"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var ExpandableContext = (0, import_react54.createContext)(null);
+var ExpandableContext = (0, import_react53.createContext)(null);
 function useExpandableContext() {
-  const context = (0, import_react54.useContext)(ExpandableContext);
+  const context = (0, import_react53.useContext)(ExpandableContext);
   if (!context) {
     throw new Error("Expandable components must be used within an ExpandableRoot");
   }
   return context;
 }
-var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
+var ExpandableRoot = (0, import_react53.forwardRef)(function ExpandableRoot2({
   children,
   id: providedId,
   isExpanded: controlledExpanded,
@@ -13616,8 +13628,8 @@ var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
   allowContainerToggle = false,
   ...props
 }, ref) {
-  const generatedId = (0, import_react54.useId)();
-  const [ids, setIds] = (0, import_react53.useState)({
+  const generatedId = (0, import_react53.useId)();
+  const [ids, setIds] = (0, import_react52.useState)({
     root: providedId ?? `expandable-${generatedId}-root`,
     header: `expandable-${generatedId}-header`,
     content: `expandable-${generatedId}-content`
@@ -13627,12 +13639,12 @@ var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
     onValueChange: onExpandedChange,
     defaultValue: isInitialExpanded
   });
-  const toggle = (0, import_react54.useCallback)(() => {
+  const toggle = (0, import_react53.useCallback)(() => {
     if (!disabled) {
       setIsExpanded(!isExpanded);
     }
   }, [disabled, isExpanded, setIsExpanded]);
-  const contextValue = (0, import_react54.useMemo)(() => ({
+  const contextValue = (0, import_react53.useMemo)(() => ({
     isExpanded,
     toggle,
     setIsExpanded,
@@ -13660,13 +13672,13 @@ var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
     }
   ) });
 });
-var ExpandableHeader = (0, import_react54.forwardRef)(function ExpandableHeader2({
+var ExpandableHeader = (0, import_react53.forwardRef)(function ExpandableHeader2({
   children,
   isUsingDefaultIcon = true,
   ...props
 }, ref) {
   const { isExpanded, toggle, ids, setIds, disabled } = useExpandableContext();
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (props.id) {
       setIds((prevState) => ({ ...prevState, header: props.id }));
     }
@@ -13695,15 +13707,15 @@ var ExpandableHeader = (0, import_react54.forwardRef)(function ExpandableHeader2
     }
   );
 });
-var ExpandableContent = (0, import_react54.forwardRef)(function ExpandableContent2({
+var ExpandableContent = (0, import_react53.forwardRef)(function ExpandableContent2({
   children,
   forceMount = false,
   ...props
 }, forwardedRef) {
   const { isExpanded, ids, setIds } = useExpandableContext();
-  const ref = (0, import_react52.useRef)(null);
-  (0, import_react52.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
-  (0, import_react52.useEffect)(() => {
+  const ref = (0, import_react51.useRef)(null);
+  (0, import_react51.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
+  (0, import_react51.useEffect)(() => {
     if (props.id) {
       setIds((prevState) => ({ ...prevState, content: props.id }));
     }
@@ -13722,7 +13734,7 @@ var ExpandableContent = (0, import_react54.forwardRef)(function ExpandableConten
     }
   );
 });
-var Expandable = (0, import_react54.forwardRef)(function Expandable2({
+var Expandable = (0, import_react53.forwardRef)(function Expandable2({
   children,
   trigger,
   triggerProps,
@@ -13761,7 +13773,7 @@ var FAQSection = ({
 };
 
 // src/components/layout/InifiniteScroll.tsx
-var import_react55 = require("react");
+var import_react54 = require("react");
 var import_clsx12 = __toESM(require("clsx"));
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -13781,10 +13793,10 @@ function InfiniteScroll({
   if (itemCount < 1) {
     throw new Error("InfiniteScroll: itemCount > 0 must hold");
   }
-  const items = (0, import_react55.useMemo)(() => range(itemCount), [itemCount]);
-  const containerRef = (0, import_react55.useRef)(null);
-  const snapshotRef = (0, import_react55.useRef)({ scrollHeight: 0, scrollTop: 0, fromTop: false });
-  const [windowState, setWindowState] = (0, import_react55.useState)(() => {
+  const items = (0, import_react54.useMemo)(() => range(itemCount), [itemCount]);
+  const containerRef = (0, import_react54.useRef)(null);
+  const snapshotRef = (0, import_react54.useRef)({ scrollHeight: 0, scrollTop: 0, fromTop: false });
+  const [windowState, setWindowState] = (0, import_react54.useState)(() => {
     let index = initialIndex;
     if (index < 0) {
       index = 0;
@@ -13796,14 +13808,14 @@ function InfiniteScroll({
       end: Math.min(items.length, safeStart + bufferSize)
     };
   });
-  const addToStart = (0, import_react55.useCallback)((amount = stepSize) => {
+  const addToStart = (0, import_react54.useCallback)((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 = (0, import_react55.useCallback)((amount = stepSize) => {
+  const addToEnd = (0, import_react54.useCallback)((amount = stepSize) => {
     setWindowState((prev) => {
       const newEnd = Math.min(items.length, prev.end + amount);
       const newStart = Math.max(0, newEnd - bufferSize);
@@ -13820,7 +13832,7 @@ function InfiniteScroll({
       addToEnd();
     }
   };
-  (0, import_react55.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     const container = containerRef.current;
     if (!container || !snapshotRef.current.fromTop) return;
     const heightDifference = container.scrollHeight - snapshotRef.current.scrollHeight;
@@ -13829,7 +13841,7 @@ function InfiniteScroll({
     }
     snapshotRef.current.fromTop = false;
   }, [windowState]);
-  const visibleItems = (0, import_react55.useMemo)(
+  const visibleItems = (0, import_react54.useMemo)(
     () => items.slice(windowState.start, windowState.end),
     [items, windowState]
   );
@@ -14082,8 +14094,8 @@ var MarkdownInterpreter = ({ text, className }) => {
 };
 
 // src/components/layout/TabSwitcher.tsx
+var import_react55 = require("react");
 var import_react56 = require("react");
-var import_react57 = require("react");
 var import_clsx13 = __toESM(require("clsx"));
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -14097,9 +14109,9 @@ function sortByDomOrder(infos) {
     return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
   });
 }
-var TabContext = (0, import_react57.createContext)(null);
+var TabContext = (0, import_react56.createContext)(null);
 function useTabContext() {
-  const context = (0, import_react57.useContext)(TabContext);
+  const context = (0, import_react56.useContext)(TabContext);
   if (!context) throw new Error("useTabContext must be used inside a <TabView>");
   return context;
 }
@@ -14109,9 +14121,9 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
     defaultValue: initialActiveId ?? null,
     onValueChange: onActiveIdChange
   });
-  const [tabInfos, setTabInfos] = (0, import_react56.useState)([]);
-  const [portalState, setPortalState] = (0, import_react56.useState)(null);
-  const subscribe = (0, import_react56.useCallback)((info) => {
+  const [tabInfos, setTabInfos] = (0, import_react55.useState)([]);
+  const [portalState, setPortalState] = (0, import_react55.useState)(null);
+  const subscribe = (0, import_react55.useCallback)((info) => {
     const id = info.id;
     setTabInfos((prevState) => {
       const existingIndex = prevState.findIndex((t) => t.id === id);
@@ -14124,7 +14136,7 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
       });
     };
   }, []);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const active = tabInfos.find((value) => value.id === activeId);
     if (!active || !active.disabled) return;
     const firstEnabled = tabInfos.find((value) => !value.disabled);
@@ -14134,10 +14146,10 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
       setActiveId(null);
     }
   }, [activeId, setActiveId, tabInfos]);
-  const registerPortal = (0, import_react56.useCallback)((state) => {
+  const registerPortal = (0, import_react55.useCallback)((state) => {
     setPortalState(state);
   }, []);
-  const changeActiveId = (0, import_react56.useCallback)((activeId2) => {
+  const changeActiveId = (0, import_react55.useCallback)((activeId2) => {
     const info = tabInfos.find((value) => value.id === activeId2);
     if (info && info.disabled) return;
     setActiveId(activeId2);
@@ -14172,7 +14184,7 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
 function TabList({ ...props }) {
   const { tabs } = useTabContext();
   const { infos, activeId, setActiveId: setActive } = tabs;
-  const refs = (0, import_react57.useRef)({});
+  const refs = (0, import_react56.useRef)({});
   const onKeyDown = (e) => {
     const idx = infos.findIndex((tab) => tab.id === activeId);
     if (idx === -1) return;
@@ -14225,12 +14237,12 @@ function TabList({ ...props }) {
   );
 }
 function TabView({ ...props }) {
-  const generated = (0, import_react56.useId)();
+  const generated = (0, import_react55.useId)();
   const id = props.id ?? "tab-view-" + generated;
   const { portal } = useTabContext();
   const { setPortal } = portal;
-  const ref = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const ref = (0, import_react56.useRef)(null);
+  (0, import_react56.useEffect)(() => {
     setPortal({ id, ref });
     return () => setPortal(null);
   }, [id, setPortal]);
@@ -14247,15 +14259,15 @@ function TabView({ ...props }) {
 function TabPanel({ label, forceMount = false, disabled = false, initiallyActive = false, ...props }) {
   const { tabs, portal } = useTabContext();
   const { subscribe, activeId, setActiveId } = tabs;
-  const generatedId = (0, import_react56.useId)();
+  const generatedId = (0, import_react55.useId)();
   const id = props.id ?? "tab-panel-" + generatedId;
   const labelId = "tab-list-button-" + generatedId;
-  const ref = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const ref = (0, import_react56.useRef)(null);
+  (0, import_react56.useEffect)(() => {
     return subscribe({ id, label, labelId, disabled, ref });
   }, [id, label, labelId, disabled, subscribe]);
-  const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = (0, import_react56.useState)(false);
-  (0, import_react57.useEffect)(() => {
+  const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = (0, import_react55.useState)(false);
+  (0, import_react56.useEffect)(() => {
     if (!hasAnnouncedIntialliyActive) {
       if (initiallyActive) {
         setActiveId(id);
@@ -14397,14 +14409,14 @@ var VerticalDivider = ({
 
 // src/components/layout/app/AppPage.tsx
 var import_clsx15 = __toESM(require("clsx"));
-var import_react61 = require("react");
+var import_react60 = require("react");
 var import_lucide_react10 = require("lucide-react");
 
 // src/components/layout/navigation/navigation-menus/NavigationContext.tsx
-var import_react59 = require("react");
+var import_react58 = require("react");
 
 // src/hooks/useTreeNavigation.ts
-var import_react58 = require("react");
+var import_react57 = require("react");
 function buildTreeIndex(nodes) {
   const byId = /* @__PURE__ */ new Map();
   const walk = (nodeList, parentId, parentPath) => {
@@ -14488,32 +14500,32 @@ function useTreeNavigation({
   initialActiveId,
   onlyOneExpandedTree = false
 }) {
-  const index = (0, import_react58.useMemo)(() => buildTreeIndex(nodes), [nodes]);
+  const index = (0, import_react57.useMemo)(() => buildTreeIndex(nodes), [nodes]);
   const [activeId, setActiveId] = useControlledState({
     value: controlledActiveId,
     onValueChange: onActiveIdChange,
     defaultValue: initialActiveId ?? null
   });
-  const resolvedActiveId = (0, import_react58.useMemo)(() => {
+  const resolvedActiveId = (0, import_react57.useMemo)(() => {
     if (activeId == null) return null;
     if (index.byId.has(activeId)) return activeId;
     return null;
   }, [activeId, index]);
-  const [expandedIds, setExpandedIds] = (0, import_react58.useState)(() => /* @__PURE__ */ new Set());
-  (0, import_react58.useEffect)(() => {
+  const [expandedIds, setExpandedIds] = (0, import_react57.useState)(() => /* @__PURE__ */ new Set());
+  (0, import_react57.useEffect)(() => {
     if (resolvedActiveId == null) return;
     const entry = index.byId.get(resolvedActiveId);
     if (entry == null) return;
     setExpandedIds((prev) => syncExpansionForActive(prev, entry.path, onlyOneExpandedTree, index));
   }, [resolvedActiveId, onlyOneExpandedTree, index]);
-  const items = (0, import_react58.useMemo)(() => {
+  const items = (0, import_react57.useMemo)(() => {
     return flattenVisibleItems(nodes, expandedIds);
   }, [nodes, expandedIds]);
-  const activeItem = (0, import_react58.useMemo)(() => {
+  const activeItem = (0, import_react57.useMemo)(() => {
     if (resolvedActiveId == null) return null;
     return items.find((item) => item.id === resolvedActiveId) ?? null;
   }, [items, resolvedActiveId]);
-  const navigateTo = (0, import_react58.useCallback)((id) => {
+  const navigateTo = (0, import_react57.useCallback)((id) => {
     const entry = index.byId.get(id);
     if (entry == null) {
       console.warn(`Attempted to navigate to node ${id} that does not exist`);
@@ -14525,7 +14537,7 @@ function useTreeNavigation({
       return next2;
     });
   }, [index, onlyOneExpandedTree, setActiveId]);
-  const expand = (0, import_react58.useCallback)((id, options) => {
+  const expand = (0, import_react57.useCallback)((id, options) => {
     const entry = index.byId.get(id);
     if (entry == null || entry.node.items.length === 0) return;
     if (options?.isFocusing) {
@@ -14538,7 +14550,7 @@ function useTreeNavigation({
       return pruneExpandedIds(next2, activePath, onlyOneExpandedTree, index);
     });
   }, [index, onlyOneExpandedTree, resolvedActiveId, setActiveId]);
-  const collapse = (0, import_react58.useCallback)((id, options) => {
+  const collapse = (0, import_react57.useCallback)((id, options) => {
     if (!options?.isFocusing && resolvedActiveId != null) {
       const activeEntry = index.byId.get(resolvedActiveId);
       if (activeEntry != null && isAncestorOf(id, activeEntry.path)) return;
@@ -14556,7 +14568,7 @@ function useTreeNavigation({
       return next2;
     });
   }, [index, resolvedActiveId, setActiveId]);
-  const toggleExpansion = (0, import_react58.useCallback)((id, options) => {
+  const toggleExpansion = (0, import_react57.useCallback)((id, options) => {
     const entry = index.byId.get(id);
     if (entry == null || entry.node.items.length === 0) return;
     if (options?.isFocusing) {
@@ -14586,7 +14598,7 @@ function useTreeNavigation({
       expand(id);
     }
   }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setActiveId]);
-  const next = (0, import_react58.useCallback)(() => {
+  const next = (0, import_react57.useCallback)(() => {
     if (items.length === 0) return;
     if (resolvedActiveId == null) {
       navigateTo(items[0].id);
@@ -14599,7 +14611,7 @@ function useTreeNavigation({
       return;
     }
   }, [items, resolvedActiveId, navigateTo]);
-  const previous = (0, import_react58.useCallback)(() => {
+  const previous = (0, import_react57.useCallback)(() => {
     if (items.length === 0) return;
     if (resolvedActiveId == null) {
       navigateTo(items[items.length - 1].id);
@@ -14612,15 +14624,15 @@ function useTreeNavigation({
       return;
     }
   }, [items, resolvedActiveId, navigateTo]);
-  const first = (0, import_react58.useCallback)(() => {
+  const first = (0, import_react57.useCallback)(() => {
     if (items.length === 0) return;
     navigateTo(items[0].id);
   }, [items, navigateTo]);
-  const last = (0, import_react58.useCallback)(() => {
+  const last = (0, import_react57.useCallback)(() => {
     if (items.length === 0) return;
     navigateTo(items[items.length - 1].id);
   }, [items, navigateTo]);
-  return (0, import_react58.useMemo)(() => ({
+  return (0, import_react57.useMemo)(() => ({
     items,
     activeItem,
     navigateTo,
@@ -14636,15 +14648,15 @@ function useTreeNavigation({
 
 // src/components/layout/navigation/navigation-menus/NavigationContext.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var NavigationContext = (0, import_react59.createContext)(null);
+var NavigationContext = (0, import_react58.createContext)(null);
 function NavigationProvider({
   children,
   ...options
 }) {
   const navigation = useTreeNavigation(options);
-  const itemRefs = (0, import_react59.useRef)(/* @__PURE__ */ new Map());
+  const itemRefs = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
   const focusedId = navigation.activeItem?.id ?? navigation.items[0]?.id ?? null;
-  const itemStateById = (0, import_react59.useMemo)(() => {
+  const itemStateById = (0, import_react58.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const item of navigation.items) {
       map.set(item.id, {
@@ -14655,21 +14667,21 @@ function NavigationProvider({
     }
     return map;
   }, [navigation.items, focusedId]);
-  const getItemState = (0, import_react59.useCallback)((id) => {
+  const getItemState = (0, import_react58.useCallback)((id) => {
     return itemStateById.get(id) ?? null;
   }, [itemStateById]);
-  const registerItemRef = (0, import_react59.useCallback)((id, element) => {
+  const registerItemRef = (0, import_react58.useCallback)((id, element) => {
     if (element == null) {
       itemRefs.current.delete(id);
       return;
     }
     itemRefs.current.set(id, element);
   }, []);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (focusedId == null) return;
     itemRefs.current.get(focusedId)?.focus();
   }, [focusedId]);
-  const value = (0, import_react59.useMemo)(() => ({
+  const value = (0, import_react58.useMemo)(() => ({
     activeItem: navigation.activeItem,
     focusedId,
     items: navigation.items,
@@ -14701,7 +14713,7 @@ function NavigationProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NavigationContext.Provider, { value, children });
 }
 function useNavigationContext() {
-  const context = (0, import_react59.useContext)(NavigationContext);
+  const context = (0, import_react58.useContext)(NavigationContext);
   if (context == null) {
     throw new Error("useNavigationContext must be used within NavigationProvider");
   }
@@ -14713,10 +14725,10 @@ function useNavigationItem(id) {
   if (state == null) {
     throw new Error(`useNavigationItem could not resolve state for id "${id}"`);
   }
-  const ref = (0, import_react59.useCallback)((element) => {
+  const ref = (0, import_react58.useCallback)((element) => {
     context.registerItemRef(id, element);
   }, [context, id]);
-  return (0, import_react59.useMemo)(() => ({
+  return (0, import_react58.useMemo)(() => ({
     ...state,
     ref,
     navigateTo: context.navigateTo,
@@ -14742,7 +14754,7 @@ function useNavigationItem(id) {
 }
 
 // src/components/layout/navigation/navigation-menus/VerticalNavigationItem.tsx
-var import_react60 = require("react");
+var import_react59 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function VerticalNavigationItem({
@@ -14753,7 +14765,7 @@ function VerticalNavigationItem({
   items,
   depth = 0
 }) {
-  const headerRef = (0, import_react60.useRef)(null);
+  const headerRef = (0, import_react59.useRef)(null);
   const {
     expanded,
     isFocused,
@@ -14770,7 +14782,7 @@ function VerticalNavigationItem({
   } = useNavigationItem(id);
   const hasChildren = items != null && items.length > 0;
   const firstChildId = hasChildren ? items[0]?.id : void 0;
-  const handleKeyDown = (0, import_react60.useCallback)((event) => {
+  const handleKeyDown = (0, import_react59.useCallback)((event) => {
     if (!isFocused || event.target !== event.currentTarget) return;
     if (event.key === "ArrowRight") {
       if (!hasChildren) return;
@@ -14824,10 +14836,10 @@ function VerticalNavigationItem({
       window.location.assign(url);
     }
   }, [collapse, expand, expanded, external, first, firstChildId, hasChildren, id, isFocused, last, navigateTo, next, path, previous, toggleExpansion, url]);
-  const handleHeaderActivate = (0, import_react60.useCallback)(() => {
+  const handleHeaderActivate = (0, import_react59.useCallback)(() => {
     toggleExpansion(id, { isFocusing: true });
   }, [id, toggleExpansion]);
-  const handleLeafActivate = (0, import_react60.useCallback)((event) => {
+  const handleLeafActivate = (0, import_react59.useCallback)((event) => {
     if (event.target.closest('[data-name="vertical-navigation-item-link"]')) return;
     navigateTo(id);
   }, [id, navigateTo]);
@@ -14930,10 +14942,10 @@ function VerticalNavigationTree({
 
 // src/components/layout/app/AppPage.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var AppSidebar = ({ isOpen, onClose, children, ...props }) => {
+var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
   const translation = useHightideTranslation();
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
-  const ref = (0, import_react61.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
@@ -15000,11 +15012,11 @@ var AppPageSidebarWithNavigation = ({
 };
 var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const translation = useHightideTranslation();
-  const [isSidebarOpen, setIsSidebarOpen] = (0, import_react61.useState)(false);
-  const toNavigationItems = (0, import_react61.useCallback)((items) => {
+  const [isSidebarOpen, setIsSidebarOpen] = (0, import_react60.useState)(false);
+  const toNavigationItems = (0, import_react60.useCallback)((items) => {
     return items?.map((item) => ({
       id: item.id,
-      label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: (0, import_clsx15.default)("flex-row-2 items-center", { "text-primary": item.isActive }), children: [
+      label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "app-page-navigation-item-label", "data-acitve": item.isActive ? "" : void 0, children: [
         item.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "size-5", children: item.icon }),
         item.label
       ] }),
@@ -15013,7 +15025,7 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
       items: toNavigationItems(item.items)
     })) ?? void 0;
   }, []);
-  const navigationItems = (0, import_react61.useMemo)(() => toNavigationItems(
+  const navigationItems = (0, import_react60.useMemo)(() => toNavigationItems(
     sidebarProps.items
   ), [sidebarProps.items, toNavigationItems]);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
@@ -15059,14 +15071,14 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
 };
 
 // src/components/layout/dialog/Dialog.tsx
-var import_react63 = require("react");
+var import_react62 = require("react");
 var import_lucide_react11 = require("lucide-react");
 
 // src/components/layout/dialog/DialogContext.tsx
-var import_react62 = require("react");
-var DialogContext = (0, import_react62.createContext)(null);
+var import_react61 = require("react");
+var DialogContext = (0, import_react61.createContext)(null);
 function useDialogContext() {
-  const context = (0, import_react62.useContext)(DialogContext);
+  const context = (0, import_react61.useContext)(DialogContext);
   if (!context) {
     throw new Error("useDialogContext must be used within a <DialogContext.Provider>");
   }
@@ -15075,7 +15087,7 @@ function useDialogContext() {
 
 // src/components/layout/dialog/Dialog.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var Dialog = (0, import_react63.forwardRef)(function Dialog2({
+var Dialog = (0, import_react62.forwardRef)(function Dialog2({
   children,
   isOpen: isOpenOverwrite,
   titleElement,
@@ -15088,24 +15100,24 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const generatedId = (0, import_react63.useId)();
-  const ids = (0, import_react63.useMemo)(() => ({
+  const generatedId = (0, import_react62.useId)();
+  const ids = (0, import_react62.useMemo)(() => ({
     container: `dialog-container-${generatedId}`,
     background: `dialog-background-${generatedId}`,
     content: props.id ?? `dialog-content-${generatedId}`,
     title: `dialog-title-${generatedId}`,
     description: `dialog-description-${generatedId}`
   }), [generatedId, props.id]);
-  const containerRef = (0, import_react63.useRef)(null);
-  const context = (0, import_react63.useContext)(DialogContext);
+  const containerRef = (0, import_react62.useRef)(null);
+  const context = (0, import_react62.useContext)(DialogContext);
   const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
   const isModal = isModalOverwrite ?? context?.isModal ?? true;
   const { refAssignment, isPresent, ref } = usePresenceRef({
     isOpen
   });
-  (0, import_react63.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
+  (0, import_react62.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
-  const onCloseWrapper = (0, import_react63.useCallback)(() => {
+  const onCloseWrapper = (0, import_react62.useCallback)(() => {
     if (!isModal) return;
     onCloseStable();
     context?.setIsOpen(false);
@@ -15189,10 +15201,10 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({
 });
 
 // src/components/layout/dialog/DialogOpener.tsx
-var import_react64 = require("react");
+var import_react63 = require("react");
 function DialogOpenerWrapper({ children }) {
   const context = useDialogContext();
-  const bag = (0, import_react64.useMemo)(() => ({
+  const bag = (0, import_react63.useMemo)(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -15370,13 +15382,13 @@ var import_lucide_react12 = require("lucide-react");
 var import_clsx18 = __toESM(require("clsx"));
 
 // src/global-contexts/ThemeContext.tsx
-var import_react65 = require("react");
+var import_react64 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
 };
-var ThemeContext = (0, import_react65.createContext)(null);
+var ThemeContext = (0, import_react64.createContext)(null);
 var ThemeProvider = ({ children, theme, initialTheme }) => {
   const {
     value: storedTheme,
@@ -15384,8 +15396,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     deleteValue: deleteStoredTheme
   } = useStorage({ key: "theme", defaultValue: "system" });
   const { config } = useHightideConfig();
-  const [themePreference, setThemePreference] = (0, import_react65.useState)("system");
-  const resolvedTheme = (0, import_react65.useMemo)(() => {
+  const [themePreference, setThemePreference] = (0, import_react64.useState)("system");
+  const resolvedTheme = (0, import_react64.useMemo)(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -15397,7 +15409,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -15405,18 +15417,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme, deleteStoredTheme, setStoredTheme]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = (0, import_react65.useCallback)(() => {
+  const getPreference = (0, import_react64.useCallback)(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     getPreference();
   }, [getPreference]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
     const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
@@ -15447,7 +15459,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
   );
 };
 var useTheme = () => {
-  const context = (0, import_react65.useContext)(ThemeContext);
+  const context = (0, import_react64.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -15527,16 +15539,16 @@ var ThemeDialog = ({
 };
 
 // src/components/layout/drawer/Drawer.tsx
-var import_react68 = require("react");
+var import_react67 = require("react");
 
 // src/components/layout/drawer/DrawerContent.tsx
-var import_react67 = require("react");
+var import_react66 = require("react");
 
 // src/components/layout/drawer/DrawerContext.tsx
-var import_react66 = require("react");
-var DrawerContext = (0, import_react66.createContext)(null);
+var import_react65 = require("react");
+var DrawerContext = (0, import_react65.createContext)(null);
 function useDrawerContext() {
-  const context = (0, import_react66.useContext)(DrawerContext);
+  const context = (0, import_react65.useContext)(DrawerContext);
   if (!context) {
     throw new Error("useDrawerContext must be used within a <DrawerRoot>");
   }
@@ -15545,7 +15557,7 @@ function useDrawerContext() {
 
 // src/components/layout/drawer/DrawerContent.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
+var DrawerContent = (0, import_react66.forwardRef)(function DrawerContent2({
   children,
   alignment = "left",
   containerClassName,
@@ -15554,14 +15566,14 @@ var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
   ...props
 }, forwardedRef) {
   const { isOpen } = useDrawerContext();
-  const generatedId = (0, import_react67.useId)();
-  const ids = (0, import_react67.useMemo)(() => ({
+  const generatedId = (0, import_react66.useId)();
+  const ids = (0, import_react66.useMemo)(() => ({
     container: `dialog-container-${generatedId}`,
     background: `dialog-background-${generatedId}`,
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
-  const ref = (0, import_react67.useRef)(null);
-  (0, import_react67.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
+  const ref = (0, import_react66.useRef)(null);
+  (0, import_react66.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
     container: ref,
@@ -15569,7 +15581,7 @@ var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
   });
   const { zIndex, tagPositions, tagItemCounts } = useOverlayRegistry({
     isActive: isVisible,
-    tags: (0, import_react67.useMemo)(() => ["drawer"], [])
+    tags: (0, import_react66.useMemo)(() => ["drawer"], [])
   });
   const depth = tagPositions && tagItemCounts ? (tagItemCounts["drawer"] ?? 0) - (tagPositions["drawer"] ?? 0) : 0;
   const { setOpen } = useDrawerContext();
@@ -15664,7 +15676,7 @@ function DrawerRoot({
 
 // src/components/layout/drawer/Drawer.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var Drawer = (0, import_react68.forwardRef)(function Drawer2({
+var Drawer = (0, import_react67.forwardRef)(function Drawer2({
   children,
   isOpen = true,
   alignment = "left",
@@ -15722,7 +15734,7 @@ var ErrorComponent = ({
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-var import_react69 = require("react");
+var import_react68 = require("react");
 
 // src/components/layout/loading/LoadingContainer.tsx
 var import_clsx20 = require("clsx");
@@ -15743,8 +15755,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react69.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react69.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react68.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react68.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -15807,8 +15819,8 @@ var BreadCrumbs = ({ crumbs }) => {
 
 // src/components/layout/navigation/Navigation.tsx
 var import_lucide_react15 = require("lucide-react");
+var import_react69 = require("react");
 var import_react70 = require("react");
-var import_react71 = require("react");
 var import_link2 = __toESM(require_link2());
 var import_clsx23 = __toESM(require("clsx"));
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -15821,10 +15833,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = (0, import_react71.useState)(false);
-  const containerRef = (0, import_react71.useRef)(null);
-  const triggerRef = (0, import_react71.useRef)(null);
-  const id = (0, import_react71.useId)();
+  const [isOpen, setOpen] = (0, import_react70.useState)(false);
+  const containerRef = (0, import_react70.useRef)(null);
+  const triggerRef = (0, import_react70.useRef)(null);
+  const id = (0, import_react70.useId)();
   const style = useAnchoredPosition({
     active: isOpen,
     container: containerRef,
@@ -15832,7 +15844,7 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = (0, import_react71.useCallback)((event) => {
+  const onBlur = (0, import_react70.useCallback)((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
@@ -15898,10 +15910,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
 };
 var Navigation = ({ ...props }) => {
   const translation = useHightideTranslation();
-  const [isMobileOpen, setIsMobileOpen] = (0, import_react71.useState)(false);
-  const id = (0, import_react71.useId)();
-  const menuRef = (0, import_react71.useRef)(null);
-  (0, import_react70.useEffect)(() => {
+  const [isMobileOpen, setIsMobileOpen] = (0, import_react70.useState)(false);
+  const id = (0, import_react70.useId)();
+  const menuRef = (0, import_react70.useRef)(null);
+  (0, import_react69.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
@@ -15969,7 +15981,7 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 var import_lucide_react16 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
-var import_react72 = require("react");
+var import_react71 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
@@ -15978,11 +15990,11 @@ var Pagination = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = (0, import_react72.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react71.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react72.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -16176,18 +16188,18 @@ var StepperBar = ({
 };
 
 // src/components/layout/popup/PopUpOpener.tsx
-var import_react73 = require("react");
+var import_react72 = require("react");
 function PopUpOpener({ children }) {
   const context = usePopUpContext();
   const { setTriggerRef } = context;
-  const ref = (0, import_react73.useRef)(null);
-  (0, import_react73.useEffect)(() => {
+  const ref = (0, import_react72.useRef)(null);
+  (0, import_react72.useEffect)(() => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
     };
   }, [setTriggerRef]);
-  const bag = (0, import_react73.useMemo)(() => ({
+  const bag = (0, import_react72.useMemo)(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -16205,7 +16217,7 @@ function PopUpOpener({ children }) {
 }
 
 // src/components/layout/popup/PopUpRoot.tsx
-var import_react74 = require("react");
+var import_react73 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function PopUpRoot({
   children,
@@ -16215,17 +16227,17 @@ function PopUpRoot({
   popUpId: popUpIdOverwrite,
   triggerId: triggerIdOverwrite
 }) {
-  const generatedPopUpId = (0, import_react74.useId)();
-  const generatedTriggerId = (0, import_react74.useId)();
+  const generatedPopUpId = (0, import_react73.useId)();
+  const generatedTriggerId = (0, import_react73.useId)();
   const [isOpen, setIsOpen] = useControlledState({
     value: controlledIsOpen,
     onValueChange: onIsOpenChange,
     defaultValue: initialIsOpen
   });
-  const [triggerRef, setTriggerRef] = (0, import_react74.useState)(null);
-  const popUpId = (0, import_react74.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
-  const triggerId = (0, import_react74.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
-  const contextValue = (0, import_react74.useMemo)(() => ({
+  const [triggerRef, setTriggerRef] = (0, import_react73.useState)(null);
+  const popUpId = (0, import_react73.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
+  const triggerId = (0, import_react73.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
+  const contextValue = (0, import_react73.useMemo)(() => ({
     isOpen,
     setIsOpen,
     popUpId,
@@ -16412,31 +16424,31 @@ var FillerCell = ({ ...props }) => {
 };
 
 // src/components/layout/table/TableProvider.tsx
-var import_react77 = require("react");
+var import_react76 = require("react");
 
 // src/components/layout/table/TableContext.tsx
-var import_react75 = require("react");
-var TableStateWithoutSizingContext = (0, import_react75.createContext)(null);
+var import_react74 = require("react");
+var TableStateWithoutSizingContext = (0, import_react74.createContext)(null);
 var useTableStateWithoutSizingContext = () => {
-  const context = (0, import_react75.useContext)(TableStateWithoutSizingContext);
+  const context = (0, import_react74.useContext)(TableStateWithoutSizingContext);
   if (!context) throw new Error("useTableStateWithoutSizingContext must be used within a <TableStateWithoutSizingContext.Provider> like <TableStateWithoutSizing>");
   return context;
 };
-var TableStateContext = (0, import_react75.createContext)(null);
+var TableStateContext = (0, import_react74.createContext)(null);
 var useTableStateContext = () => {
-  const context = (0, import_react75.useContext)(TableStateContext);
+  const context = (0, import_react74.useContext)(TableStateContext);
   if (!context) throw new Error("useTableStateContext must be used within a <TableStateContext.Provider> like <TableState>");
   return context;
 };
-var TableContainerContext = (0, import_react75.createContext)(null);
+var TableContainerContext = (0, import_react74.createContext)(null);
 var useTableContainerContext = () => {
-  const context = (0, import_react75.useContext)(TableContainerContext);
+  const context = (0, import_react74.useContext)(TableContainerContext);
   if (!context) throw new Error("useTableContainerContext must be used within a <TableContainerContext.Provider> like <TableContainer>");
   return context;
 };
-var TableColumnDefinitionContext = (0, import_react75.createContext)(null);
+var TableColumnDefinitionContext = (0, import_react74.createContext)(null);
 var useTableColumnDefinitionContext = () => {
-  const context = (0, import_react75.useContext)(TableColumnDefinitionContext);
+  const context = (0, import_react74.useContext)(TableColumnDefinitionContext);
   if (!context) throw new Error("useTableColumnDefinitionContext must be used within a <TableColumnDefinitionContext.Provider> like <TableColumnDefinition>");
   return context;
 };
@@ -16615,7 +16627,7 @@ var FilterOperatorUtils = {
 };
 
 // src/components/user-interaction/data/filter-function.ts
-var import_react76 = require("react");
+var import_react75 = require("react");
 
 // src/utils/date.ts
 var timesInSeconds = {
@@ -17286,7 +17298,7 @@ function tagToLabel(tags, value) {
 function useFilterValueTranslation() {
   const translation = useHightideTranslation();
   const { locale } = useLocale();
-  return (0, import_react76.useCallback)((value, options) => {
+  return (0, import_react75.useCallback)((value, options) => {
     const p = value.parameter;
     const tags = options?.tags;
     const dateFormat = value.dataType === "dateTime" ? "dateTime" : "date";
@@ -17488,9 +17500,9 @@ var TableProvider = ({
 }) => {
   const onRowClickStable = useEventCallbackStabilizer(onRowClick);
   const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
-  const [registeredColumns, setRegisteredColumns] = (0, import_react77.useState)([]);
-  const containerRef = (0, import_react77.useRef)(null);
-  const [, setTableState] = (0, import_react77.useState)({
+  const [registeredColumns, setRegisteredColumns] = (0, import_react76.useState)([]);
+  const containerRef = (0, import_react76.useRef)(null);
+  const [, setTableState] = (0, import_react76.useState)({
     columnSizing: {},
     columnOrder: [],
     columnFilters: [],
@@ -17515,16 +17527,16 @@ var TableProvider = ({
       pageSize: 10
     }
   });
-  const [targetWidth, setTargetWidth] = (0, import_react77.useState)(void 0);
-  (0, import_react77.useLayoutEffect)(() => {
+  const [targetWidth, setTargetWidth] = (0, import_react76.useState)(void 0);
+  (0, import_react76.useLayoutEffect)(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]);
-  useWindowResizeObserver((0, import_react77.useCallback)(() => {
+  useWindowResizeObserver((0, import_react76.useCallback)(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]));
-  const registerColumn = (0, import_react77.useCallback)((column) => {
+  const registerColumn = (0, import_react76.useCallback)((column) => {
     setRegisteredColumns((prev) => {
       return [...prev, column];
     });
@@ -17534,7 +17546,7 @@ var TableProvider = ({
       });
     };
   }, []);
-  const columns = (0, import_react77.useMemo)(() => {
+  const columns = (0, import_react76.useMemo)(() => {
     const contextColumns = Array.from(registeredColumns.values());
     if (columnsProp) {
       return [...contextColumns, ...columnsProp];
@@ -17551,7 +17563,7 @@ var TableProvider = ({
     defaultColumn: {
       minSize: 60,
       maxSize: 800,
-      cell: (0, import_react77.useCallback)(({ cell }) => {
+      cell: (0, import_react76.useCallback)(({ cell }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { children: String(cell.getValue()) });
       }, []),
       enableResizing: true,
@@ -17592,7 +17604,7 @@ var TableProvider = ({
   });
   const pagination = table.getState().pagination;
   const pageCount = table.getPageCount();
-  (0, import_react77.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (pageCount === -1) {
       return;
     }
@@ -17600,20 +17612,20 @@ var TableProvider = ({
       table.setPageIndex(pageCount - 1);
     }
   }, [table, pagination.pageIndex, pageCount]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     table.setColumnOrder((prev) => [...prev]);
   }, [table, columns]);
   const columnVisibility = table.getState().columnVisibility;
   const columnOrder = table.getState().columnOrder;
   const columnPinning = table.getState().columnPinning;
-  (0, import_react77.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     table.setColumnSizing((prev) => ({ ...prev }));
   }, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
-  const tableColumnDefinitionContextValue = (0, import_react77.useMemo)(() => ({
+  const tableColumnDefinitionContextValue = (0, import_react76.useMemo)(() => ({
     table,
     registerColumn
   }), [table, registerColumn]);
-  const tableContainerContextValue = (0, import_react77.useMemo)(() => ({
+  const tableContainerContextValue = (0, import_react76.useMemo)(() => ({
     table,
     containerRef
   }), [table, containerRef]);
@@ -17622,7 +17634,7 @@ var TableProvider = ({
     return rest;
   })();
   const rowModel = table.getRowModel();
-  const tableStateWithoutSizingContextValue = (0, import_react77.useMemo)(() => ({
+  const tableStateWithoutSizingContextValue = (0, import_react76.useMemo)(() => ({
     table,
     isUsingFillerRows,
     fillerRowCell,
@@ -17665,7 +17677,7 @@ var TableProvider = ({
   ]);
   const columnSizing = table.getState().columnSizing;
   const columnSizingInfo = table.getState().columnSizingInfo;
-  const tableStateContextValue = (0, import_react77.useMemo)(() => ({
+  const tableStateContextValue = (0, import_react76.useMemo)(() => ({
     ...tableStateWithoutSizingContextValue,
     sizeVars: ColumnSizeUtil.toSizeVars(columnSizing),
     columnSizingInfo,
@@ -17676,10 +17688,10 @@ var TableProvider = ({
 
 // src/components/layout/table/TableBody.tsx
 var import_react_table2 = require("@tanstack/react-table");
-var import_react78 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var TableBody = import_react78.default.memo(function TableBodyVisual() {
+var TableBody = import_react77.default.memo(function TableBodyVisual() {
   const { table, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick } = useTableStateWithoutSizingContext();
   const rows = table.getRowModel().rows;
   const columnOrder = table.getState().columnOrder;
@@ -17777,20 +17789,20 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 var import_lucide_react25 = require("lucide-react");
-var import_react95 = require("react");
+var import_react94 = require("react");
 var import_react_table3 = require("@tanstack/react-table");
 
 // src/components/user-interaction/data/FilterPopUp.tsx
 var import_lucide_react24 = require("lucide-react");
-var import_react94 = require("react");
+var import_react93 = require("react");
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_react85 = require("react");
+var import_react84 = require("react");
 var import_lucide_react22 = require("lucide-react");
 var import_clsx31 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
-var import_react79 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var TimePicker = ({
   value: controlledValue,
@@ -17811,11 +17823,11 @@ var TimePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const minuteRef = (0, import_react79.useRef)(null);
-  const hourRef = (0, import_react79.useRef)(null);
+  const minuteRef = (0, import_react78.useRef)(null);
+  const hourRef = (0, import_react78.useRef)(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  const minutes = (0, import_react79.useMemo)(() => {
+  const minutes = (0, import_react78.useMemo)(() => {
     const full = range(60);
     switch (minuteIncrement) {
       case "5min":
@@ -17828,7 +17840,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [minuteIncrement]);
-  const seconds = (0, import_react79.useMemo)(() => {
+  const seconds = (0, import_react78.useMemo)(() => {
     const full = range(60);
     switch (secondIncrement) {
       case "1s":
@@ -17843,7 +17855,7 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 30 === 0);
     }
   }, [secondIncrement]);
-  const milliseconds = (0, import_react79.useMemo)(() => {
+  const milliseconds = (0, import_react78.useMemo)(() => {
     const full = range(1e3);
     switch (millisecondIncrement) {
       case "1ms":
@@ -17864,17 +17876,17 @@ var TimePicker = ({
         return full.filter((value2) => value2 % 500 === 0);
     }
   }, [millisecondIncrement]);
-  const closestMinute = (0, import_react79.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
-  const closestSecond = (0, import_react79.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
-  const closestMillisecond = (0, import_react79.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
+  const closestMinute = (0, import_react78.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = (0, import_react78.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = (0, import_react78.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
-  (0, import_react79.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -17973,12 +17985,12 @@ var TimePicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_react82 = require("react");
+var import_react81 = require("react");
 var import_lucide_react21 = require("lucide-react");
 var import_clsx29 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
-var import_react80 = require("react");
+var import_react79 = require("react");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
@@ -18007,33 +18019,33 @@ var DayPicker = ({
   });
   const month = displayedMonth.getMonth();
   const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
-  const selectedButtonRef = (0, import_react80.useRef)(null);
-  const isValueInDisplayedWeeks = (0, import_react80.useMemo)(
+  const selectedButtonRef = (0, import_react79.useRef)(null);
+  const isValueInDisplayedWeeks = (0, import_react79.useMemo)(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = (0, import_react80.useCallback)(
+  const firstDayOfMonth = (0, import_react79.useCallback)(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
   const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
-  (0, import_react80.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
-  const end = (0, import_react80.useMemo)(() => {
+  const end = (0, import_react79.useMemo)(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = (0, import_react80.useMemo)(() => {
+  const start = (0, import_react79.useMemo)(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = (0, import_react80.useCallback)((date) => {
+  const clampToRange = (0, import_react79.useCallback)((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = (0, import_react80.useCallback)((candidate) => {
+  const navigateTo = (0, import_react79.useCallback)((candidate) => {
     const clamped = clampToRange(candidate);
     if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
@@ -18042,7 +18054,7 @@ var DayPicker = ({
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = (0, import_react80.useCallback)(
+  const onKeyDown = (0, import_react79.useCallback)(
     (event) => {
       PropsUtil.aria.navigate({
         left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
@@ -18099,10 +18111,10 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-var import_react81 = require("react");
+var import_react80 = require("react");
 var import_clsx28 = __toESM(require("clsx"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var YearRow = (0, import_react81.memo)(function YearRow2({
+var YearRow = (0, import_react80.memo)(function YearRow2({
   year,
   selectedMonthIndex,
   minTimestamp,
@@ -18110,15 +18122,15 @@ var YearRow = (0, import_react81.memo)(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = (0, import_react81.useRef)(null);
+  const ref = (0, import_react80.useRef)(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = (0, import_react81.useState)(false);
-  (0, import_react81.useEffect)(() => {
+  const [isExpanded, setIsExpanded] = (0, import_react80.useState)(false);
+  (0, import_react80.useEffect)(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = (0, import_react81.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  const monthGrid = (0, import_react80.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     ExpandableRoot,
     {
@@ -18173,23 +18185,23 @@ var YearMonthPicker = ({
     defaultValue: initialValue
   });
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const monthNames = (0, import_react81.useMemo)(() => {
+  const monthNames = (0, import_react80.useMemo)(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = (0, import_react81.useMemo)(
+  const years = (0, import_react80.useMemo)(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = (0, import_react81.useMemo)(() => {
+  const minTimestamp = (0, import_react80.useMemo)(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = (0, import_react81.useMemo)(() => {
+  const maxTimestamp = (0, import_react80.useMemo)(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = (0, import_react81.useCallback)((newDate) => {
+  const handleSelect = (0, import_react80.useCallback)((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
@@ -18242,8 +18254,8 @@ var DatePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [displayedMonth, setDisplayedMonth] = (0, import_react82.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = (0, import_react82.useState)(initialDisplay);
+  const [displayedMonth, setDisplayedMonth] = (0, import_react81.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = (0, import_react81.useState)(initialDisplay);
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
@@ -18405,7 +18417,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
-var import_react83 = require("react");
+var import_react82 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var DateTimePickerDialog = ({
   initialValue = null,
@@ -18433,8 +18445,8 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [pickerState, setPickerState] = (0, import_react83.useState)(state ?? /* @__PURE__ */ new Date());
-  (0, import_react83.useEffect)(() => {
+  const [pickerState, setPickerState] = (0, import_react82.useState)(state ?? /* @__PURE__ */ new Date());
+  (0, import_react82.useEffect)(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
@@ -18508,7 +18520,7 @@ var DateTimePickerDialog = ({
 };
 
 // src/components/user-interaction/input/DateTimeField.tsx
-var import_react84 = require("react");
+var import_react83 = require("react");
 var import_clsx30 = __toESM(require("clsx"));
 
 // src/components/user-interaction/input/dateTimeSegments.ts
@@ -18785,7 +18797,7 @@ var formatSegment = (type, values, buffer, locale) => {
 // src/components/user-interaction/input/DateTimeField.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var advanceKeys = [".", ":", "/", ",", "-", " "];
-var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
+var DateTimeField = (0, import_react83.forwardRef)(function DateTimeField2({
   value: controlledValue,
   initialValue = null,
   onValueChange,
@@ -18810,20 +18822,20 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
     defaultValue: initialValue
   });
   const is24Hour = is24HourFormat ?? contextIs24HourFormat ?? true;
-  const layout = (0, import_react84.useMemo)(
+  const layout = (0, import_react83.useMemo)(
     () => buildSegmentLayout({ locale, mode, precision, is24HourFormat: is24Hour }),
     [locale, mode, precision, is24Hour]
   );
-  const editableTypes = (0, import_react84.useMemo)(() => editableTypesOf(layout), [layout]);
-  const [editState, setEditState] = (0, import_react84.useState)(() => ({
+  const editableTypes = (0, import_react83.useMemo)(() => editableTypesOf(layout), [layout]);
+  const [editState, setEditState] = (0, import_react83.useState)(() => ({
     values: value ? decomposeDate(value, layout, is24Hour) : {},
     buffer: null
   }));
-  const [focusedType, setFocusedType] = (0, import_react84.useState)(null);
-  const editStateRef = (0, import_react84.useRef)(editState);
+  const [focusedType, setFocusedType] = (0, import_react83.useState)(null);
+  const editStateRef = (0, import_react83.useRef)(editState);
   editStateRef.current = editState;
-  const segmentRefs = (0, import_react84.useRef)(/* @__PURE__ */ new Map());
-  const segmentRefCallbacks = (0, import_react84.useRef)(/* @__PURE__ */ new Map());
+  const segmentRefs = (0, import_react83.useRef)(/* @__PURE__ */ new Map());
+  const segmentRefCallbacks = (0, import_react83.useRef)(/* @__PURE__ */ new Map());
   const registerSegment = (type) => {
     const existing = segmentRefCallbacks.current.get(type);
     if (existing) {
@@ -18839,7 +18851,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
     segmentRefCallbacks.current.set(type, callback);
     return callback;
   };
-  (0, import_react84.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     if (editStateRef.current.buffer) {
       return;
     }
@@ -18867,7 +18879,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
   const focusType = (type) => {
     setFocusedType(type);
   };
-  (0, import_react84.useLayoutEffect)(() => {
+  (0, import_react83.useLayoutEffect)(() => {
     if (focusedType === null) {
       return;
     }
@@ -19032,7 +19044,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
 
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
+var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
   id: inputId,
   value,
   initialValue = null,
@@ -19065,34 +19077,34 @@ var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
   const translation = useHightideTranslation();
   const { timeZone: contextTimeZone } = useLocale();
   const timeZone = timeZoneOverride ?? contextTimeZone;
-  const [isOpen, setIsOpen] = (0, import_react85.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react84.useState)(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = (0, import_react85.useState)(state);
-  const changeOpenWrapper = (0, import_react85.useCallback)((isOpen2) => {
+  const [dialogValue, setDialogValue] = (0, import_react84.useState)(state);
+  const changeOpenWrapper = (0, import_react84.useCallback)((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
-  const toZoned = (0, import_react85.useCallback)((date) => DateUtils.toZonedDate(date, timeZone), [timeZone]);
-  const fromZoned = (0, import_react85.useCallback)((date) => DateUtils.fromZonedDate(date, timeZone), [timeZone]);
-  const generatedId = (0, import_react85.useId)();
-  const ids = (0, import_react85.useMemo)(() => ({
+  const toZoned = (0, import_react84.useCallback)((date) => DateUtils.toZonedDate(date, timeZone), [timeZone]);
+  const fromZoned = (0, import_react84.useCallback)((date) => DateUtils.fromZonedDate(date, timeZone), [timeZone]);
+  const generatedId = (0, import_react84.useId)();
+  const ids = (0, import_react84.useMemo)(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
-  const controlRef = (0, import_react85.useRef)(null);
-  const fieldRef = (0, import_react85.useRef)(null);
-  (0, import_react85.useImperativeHandle)(forwardedRef, () => controlRef.current);
-  (0, import_react85.useEffect)(() => {
+  const controlRef = (0, import_react84.useRef)(null);
+  const fieldRef = (0, import_react84.useRef)(null);
+  (0, import_react84.useImperativeHandle)(forwardedRef, () => controlRef.current);
+  (0, import_react84.useEffect)(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
   }, [changeOpenWrapper, readOnly, disabled]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (isOpen) {
       setDialogValue(state);
     }
@@ -19226,25 +19238,25 @@ var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
-var import_react93 = require("react");
+var import_react92 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
-var import_react89 = require("react");
+var import_react88 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
-var import_react86 = require("react");
-var MultiSelectContext = (0, import_react86.createContext)(null);
+var import_react85 = require("react");
+var MultiSelectContext = (0, import_react85.createContext)(null);
 function useMultiSelectContext() {
-  const ctx = (0, import_react86.useContext)(MultiSelectContext);
+  const ctx = (0, import_react85.useContext)(MultiSelectContext);
   if (!ctx) throw new Error("useMultiSelectContext must be used within MultiSelectRoot");
   return ctx;
 }
 
 // src/components/user-interaction/MultiSelect/useMultiSelect.ts
-var import_react88 = require("react");
+var import_react87 = require("react");
 
 // src/hooks/useMultiSelection.ts
-var import_react87 = require("react");
+var import_react86 = require("react");
 function useMultiSelection({
   options: optionsList,
   value,
@@ -19258,8 +19270,8 @@ function useMultiSelection({
     defaultValue: [...initialSelection],
     isControlled
   });
-  const isSelected = (0, import_react87.useCallback)((id) => selection.includes(id), [selection]);
-  const toggleSelection = (0, import_react87.useCallback)(
+  const isSelected = (0, import_react86.useCallback)((id) => selection.includes(id), [selection]);
+  const toggleSelection = (0, import_react86.useCallback)(
     (id) => {
       const option = optionsList.find((o) => o.id === id);
       if (!option || option.disabled) return;
@@ -19267,11 +19279,11 @@ function useMultiSelection({
     },
     [optionsList, setSelection]
   );
-  const setSelectionValue = (0, import_react87.useCallback)(
+  const setSelectionValue = (0, import_react86.useCallback)(
     (next) => setSelection(Array.from(next)),
     [setSelection]
   );
-  return (0, import_react87.useMemo)(
+  return (0, import_react86.useMemo)(
     () => ({
       selection,
       setSelection: setSelectionValue,
@@ -19293,9 +19305,9 @@ function useMultiSelect({
   initialIsOpen = false,
   typeAheadResetMs = 500
 }) {
-  const [isOpen, setIsOpen] = (0, import_react88.useState)(initialIsOpen);
-  const [searchQuery, setSearchQuery] = (0, import_react88.useState)("");
-  const selectionOptions = (0, import_react88.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react87.useState)(initialIsOpen);
+  const [searchQuery, setSearchQuery] = (0, import_react87.useState)("");
+  const selectionOptions = (0, import_react87.useMemo)(
     () => options.map((o) => ({ id: o.id, disabled: o.disabled })),
     [options]
   );
@@ -19311,13 +19323,13 @@ function useMultiSelect({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery,
-    toTags: (0, import_react88.useCallback)((o) => [o.label ?? ""], [])
+    toTags: (0, import_react87.useCallback)((o) => [o.label ?? ""], [])
   });
-  const visibleOptionIds = (0, import_react88.useMemo)(
+  const visibleOptionIds = (0, import_react87.useMemo)(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptions = (0, import_react88.useMemo)(
+  const enabledOptions = (0, import_react87.useMemo)(
     () => visibleOptions.filter((o) => !o.disabled),
     [visibleOptions]
   );
@@ -19330,7 +19342,7 @@ function useMultiSelect({
     options: enabledOptions,
     resetTimer: typeAheadResetMs,
     toString: (o) => o.label ?? "",
-    onResultChange: (0, import_react88.useCallback)(
+    onResultChange: (0, import_react87.useCallback)(
       (option) => {
         if (option) listNav.highlight(option.id);
       },
@@ -19338,14 +19350,14 @@ function useMultiSelect({
     )
   });
   const { reset: typeAheadReset, addToTypeAhead } = typeAhead;
-  (0, import_react88.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (!isOpen) typeAheadReset();
   }, [isOpen, typeAheadReset]);
-  const highlightItem = (0, import_react88.useCallback)((id) => {
+  const highlightItem = (0, import_react87.useCallback)((id) => {
     if (!enabledOptions.some((o) => o.id === id)) return;
     listNavHighlight(id);
   }, [enabledOptions, listNavHighlight]);
-  const toggleSelectionValue = (0, import_react88.useCallback)((id, newIsSelected) => {
+  const toggleSelectionValue = (0, import_react87.useCallback)((id, newIsSelected) => {
     const next = newIsSelected ?? !isSelected(id);
     if (next) {
       toggleSelection(id);
@@ -19354,7 +19366,7 @@ function useMultiSelect({
     }
     highlightItem(id);
   }, [toggleSelection, setSelection, highlightItem, isSelected, selection]);
-  const setIsOpenWrapper = (0, import_react88.useCallback)(
+  const setIsOpenWrapper = (0, import_react87.useCallback)(
     (open, behavior) => {
       setIsOpen(open);
       behavior = behavior ?? "first";
@@ -19385,13 +19397,13 @@ function useMultiSelect({
       enabledOptions
     ]
   );
-  const toggleOpenWrapper = (0, import_react88.useCallback)(
+  const toggleOpenWrapper = (0, import_react87.useCallback)(
     (behavior) => {
       setIsOpenWrapper(!isOpen, behavior);
     },
     [isOpen, setIsOpenWrapper]
   );
-  const state = (0, import_react88.useMemo)(
+  const state = (0, import_react87.useMemo)(
     () => ({
       value: [...selection],
       highlightedId: listNav.highlightedId,
@@ -19407,11 +19419,11 @@ function useMultiSelect({
       options
     ]
   );
-  const computedState = (0, import_react88.useMemo)(
+  const computedState = (0, import_react87.useMemo)(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = (0, import_react88.useMemo)(
+  const actions = (0, import_react87.useMemo)(
     () => ({
       setIsOpen: setIsOpenWrapper,
       toggleOpen: toggleOpenWrapper,
@@ -19440,7 +19452,7 @@ function useMultiSelect({
       addToTypeAhead
     ]
   );
-  return (0, import_react88.useMemo)(
+  return (0, import_react87.useMemo)(
     () => ({
       ...state,
       ...computedState,
@@ -19468,16 +19480,16 @@ function MultiSelectRoot({
   readOnly = false,
   required = false
 }) {
-  const [triggerRef, setTriggerRef] = (0, import_react89.useState)(null);
-  const [options, setOptions] = (0, import_react89.useState)([]);
-  const generatedId = (0, import_react89.useId)();
-  const [ids, setIds] = (0, import_react89.useState)({
+  const [triggerRef, setTriggerRef] = (0, import_react88.useState)(null);
+  const [options, setOptions] = (0, import_react88.useState)([]);
+  const generatedId = (0, import_react88.useId)();
+  const [ids, setIds] = (0, import_react88.useState)({
     trigger: "multi-select-" + generatedId,
     content: "multi-select-content-" + generatedId,
     listbox: "multi-select-listbox-" + generatedId,
     searchInput: "multi-select-search-" + generatedId
   });
-  const registerOption = (0, import_react89.useCallback)((item) => {
+  const registerOption = (0, import_react88.useCallback)((item) => {
     setOptions((prev) => {
       const next = prev.filter((o) => o.id !== item.id);
       next.push(item);
@@ -19486,12 +19498,12 @@ function MultiSelectRoot({
     });
     return () => setOptions((prev) => prev.filter((o) => o.id !== item.id));
   }, []);
-  const registerTrigger = (0, import_react89.useCallback)((ref) => {
+  const registerTrigger = (0, import_react88.useCallback)((ref) => {
     setTriggerRef(ref);
     return () => setTriggerRef(null);
   }, []);
-  const compare = (0, import_react89.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
-  const idToOptionMap = (0, import_react89.useMemo)(
+  const compare = (0, import_react88.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
+  const idToOptionMap = (0, import_react88.useMemo)(
     () => options.reduce(
       (acc, o) => {
         acc[o.id] = o;
@@ -19501,22 +19513,22 @@ function MultiSelectRoot({
     ),
     [options]
   );
-  const mappedValueIds = (0, import_react89.useMemo)(() => {
+  const mappedValueIds = (0, import_react88.useMemo)(() => {
     if (value == null) return void 0;
     return value.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, value, compare]);
-  const mappedInitialValueIds = (0, import_react89.useMemo)(() => {
+  const mappedInitialValueIds = (0, import_react88.useMemo)(() => {
     if (initialValue == null) return [];
     return initialValue.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
   }, [options, initialValue, compare]);
-  const onValueChangeStable = (0, import_react89.useCallback)(
+  const onValueChangeStable = (0, import_react88.useCallback)(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onValueChange?.(values);
     },
     [idToOptionMap, onValueChange]
   );
-  const onEditCompleteStable = (0, import_react89.useCallback)(
+  const onEditCompleteStable = (0, import_react88.useCallback)(
     (ids2) => {
       const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
       onEditComplete?.(values);
@@ -19533,12 +19545,12 @@ function MultiSelectRoot({
     onClose
   });
   const { setSearchQuery } = state;
-  (0, import_react89.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     if (showSearch === false) {
       setSearchQuery("");
     }
   }, [showSearch, setSearchQuery]);
-  const contextValue = (0, import_react89.useMemo)(() => {
+  const contextValue = (0, import_react88.useMemo)(() => {
     const valueT = state.value.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
     return {
       invalid,
@@ -19609,16 +19621,16 @@ function MultiSelectRoot({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-var import_react91 = require("react");
+var import_react90 = require("react");
 
 // src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
 var import_clsx32 = __toESM(require("clsx"));
 var import_lucide_react23 = require("lucide-react");
-var import_react90 = require("react");
+var import_react89 = require("react");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var MultiSelectOptionDisplayContext = (0, import_react90.createContext)(null);
+var MultiSelectOptionDisplayContext = (0, import_react89.createContext)(null);
 function useMultiSelectOptionDisplayLocation() {
-  const context = (0, import_react90.useContext)(MultiSelectOptionDisplayContext);
+  const context = (0, import_react89.useContext)(MultiSelectOptionDisplayContext);
   if (!context) {
     throw new Error(
       "useMultiSelectOptionDisplayLocation must be used within a MultiSelectOptionDisplayContext"
@@ -19626,7 +19638,7 @@ function useMultiSelectOptionDisplayLocation() {
   }
   return context;
 }
-var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOption2({
+var MultiSelectOption = (0, import_react89.forwardRef)(function MultiSelectOption2({
   children,
   label,
   value,
@@ -19636,12 +19648,12 @@ var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOptio
 }, ref) {
   const context = useMultiSelectContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react90.useRef)(null);
+  const itemRef = (0, import_react89.useRef)(null);
   const display = children ?? label;
   const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
-  const generatedId = (0, import_react90.useId)();
+  const generatedId = (0, import_react89.useId)();
   const optionId = props?.id ?? "multi-select-option-" + generatedId;
-  (0, import_react90.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -19709,7 +19721,7 @@ var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOptio
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButton2({
+var MultiSelectButton = (0, import_react90.forwardRef)(function MultiSelectButton2({
   id,
   placeholder,
   disabled: disabledOverride,
@@ -19722,12 +19734,12 @@ var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButto
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  (0, import_react91.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = (0, import_react91.useRef)(null);
-  (0, import_react91.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react91.useEffect)(() => {
+  const innerRef = (0, import_react90.useRef)(null);
+  (0, import_react90.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react90.useEffect)(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -19795,23 +19807,23 @@ var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButto
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-var import_react92 = require("react");
+var import_react91 = require("react");
 var import_clsx33 = __toESM(require("clsx"));
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var MultiSelectContent = (0, import_react92.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
+var MultiSelectContent = (0, import_react91.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
-  const innerRef = (0, import_react92.useRef)(null);
-  const searchInputRef = (0, import_react92.useRef)(null);
-  (0, import_react92.useImperativeHandle)(ref, () => innerRef.current);
+  const innerRef = (0, import_react91.useRef)(null);
+  const searchInputRef = (0, import_react91.useRef)(null);
+  (0, import_react91.useImperativeHandle)(ref, () => innerRef.current);
   const context = useMultiSelectContext();
   const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
   const { setIds } = config;
-  (0, import_react92.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, content: id }));
   }, [id, setIds]);
   const showSearch = showSearchOverride ?? context.search.hasSearch;
   const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
-  const keyHandler = (0, import_react92.useCallback)(
+  const keyHandler = (0, import_react91.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -19925,7 +19937,7 @@ var MultiSelectContent = (0, import_react92.forwardRef)(function MultiSelectCont
 
 // src/components/user-interaction/MultiSelect/MultiSelect.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react93.forwardRef)(
+var MultiSelect = (0, import_react92.forwardRef)(
   function MultiSelect2({ children, contentPanelProps, buttonProps, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(MultiSelectRoot, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(MultiSelectButton, { ref, ...buttonProps }),
@@ -19951,7 +19963,7 @@ var FilterOperatorLabel = ({ operator }) => {
 
 // src/components/user-interaction/data/FilterPopUp.tsx
 var import_jsx_runtime85 = require("react/jsx-runtime");
-var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
+var FilterBasePopUp = (0, import_react93.forwardRef)(function FilterBasePopUp2({
   children,
   name,
   operator,
@@ -19963,11 +19975,11 @@ var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operators = (0, import_react94.useMemo)(() => {
+  const operators = (0, import_react93.useMemo)(() => {
     if (!operatorOverrides || operatorOverrides.length === 0) return allowedOperators;
     return allowedOperators.filter((op) => operatorOverrides.includes(op));
   }, [allowedOperators, operatorOverrides]);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (operators.length === 0) {
       onRemove();
     }
@@ -20028,7 +20040,7 @@ var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
     }
   );
 });
-var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
+var TextFilterPopUp = (0, import_react93.forwardRef)(function TextFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20036,12 +20048,12 @@ var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react94.useId)();
+  const id = (0, import_react93.useId)();
   const ids = {
     search: `text-filter-search-${id}`,
     caseSensitive: `text-filter-case-sensitive-${id}`
   };
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.text(suggestion)) {
       return "contains";
@@ -20083,7 +20095,7 @@ var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
     }
   );
 });
-var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopUp2({
+var NumberFilterPopUp = (0, import_react93.forwardRef)(function NumberFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20091,13 +20103,13 @@ var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopU
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react94.useId)();
+  const id = (0, import_react93.useId)();
   const ids = {
     min: `number-filter-min-${id}`,
     max: `number-filter-max-${id}`,
     compareValue: `number-filter-compare-value-${id}`
   };
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.number(suggestion)) {
       return "between";
@@ -20186,7 +20198,7 @@ var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopU
     }
   );
 });
-var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
+var DateFilterPopUp = (0, import_react93.forwardRef)(function DateFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20194,13 +20206,13 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react94.useId)();
+  const id = (0, import_react93.useId)();
   const ids = {
     startDate: `date-filter-start-date-${id}`,
     endDate: `date-filter-end-date-${id}`,
     compareDate: `date-filter-compare-date-${id}`
   };
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.date(suggestion)) {
       return "between";
@@ -20208,8 +20220,8 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react94.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react94.useState)(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react93.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react93.useState)(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
@@ -20328,7 +20340,7 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
     }
   );
 });
-var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilterPopUp2({
+var DatetimeFilterPopUp = (0, import_react93.forwardRef)(function DatetimeFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20336,13 +20348,13 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const id = (0, import_react94.useId)();
+  const id = (0, import_react93.useId)();
   const ids = {
     startDate: `datetime-filter-start-date-${id}`,
     endDate: `datetime-filter-end-date-${id}`,
     compareDate: `datetime-filter-compare-date-${id}`
   };
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "between";
     if (!FilterOperatorUtils.typeCheck.datetime(suggestion)) {
       return "between";
@@ -20350,8 +20362,8 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
     return suggestion;
   }, [value]);
   const parameter = value?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react94.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react94.useState)(null);
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react93.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react93.useState)(null);
   const needsRangeInput = operator === "between" || operator === "notBetween";
   const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
@@ -20470,14 +20482,14 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
     }
   );
 });
-var BooleanFilterPopUp = (0, import_react94.forwardRef)(function BooleanFilterPopUp2({
+var BooleanFilterPopUp = (0, import_react93.forwardRef)(function BooleanFilterPopUp2({
   name,
   value,
   onValueChange,
   onRemove,
   ...props
 }, ref) {
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "isTrue";
     if (!FilterOperatorUtils.typeCheck.boolean(suggestion)) {
       return "isTrue";
@@ -20498,7 +20510,7 @@ var BooleanFilterPopUp = (0, import_react94.forwardRef)(function BooleanFilterPo
     }
   );
 });
-var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
+var TagsFilterPopUp = (0, import_react93.forwardRef)(function TagsFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20507,7 +20519,7 @@ var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tags(suggestion)) {
       return "contains";
@@ -20552,7 +20564,7 @@ var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
     }
   );
 });
-var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFilterPopUp2({
+var TagsSingleFilterPopUp = (0, import_react93.forwardRef)(function TagsSingleFilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20561,7 +20573,7 @@ var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFi
   ...props
 }, ref) {
   const translation = useHightideTranslation();
-  const operator = (0, import_react94.useMemo)(() => {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "contains";
     if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
       return "contains";
@@ -20623,8 +20635,8 @@ var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFi
     }
   );
 });
-var GenericFilterPopUp = (0, import_react94.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
-  const operator = (0, import_react94.useMemo)(() => {
+var GenericFilterPopUp = (0, import_react93.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
+  const operator = (0, import_react93.useMemo)(() => {
     const suggestion = value?.operator ?? "isNotUndefined";
     if (!FilterOperatorUtils.typeCheck.unknownType(suggestion)) {
       return "isNotUndefined";
@@ -20644,7 +20656,7 @@ var GenericFilterPopUp = (0, import_react94.forwardRef)(function GenericFilterPo
     }
   );
 });
-var FilterPopUp = (0, import_react94.forwardRef)(function FilterPopUp2({
+var FilterPopUp = (0, import_react93.forwardRef)(function FilterPopUp2({
   name,
   value,
   onValueChange,
@@ -20681,18 +20693,18 @@ var TableFilterButton = ({
   const translation = useHightideTranslation();
   const column = header.column;
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react95.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react94.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = (0, import_react95.useRef)(null);
-  const containerRef = (0, import_react95.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react95.useState)(false);
-  const id = (0, import_react95.useId)();
-  const ids = (0, import_react95.useMemo)(() => ({
+  const anchorRef = (0, import_react94.useRef)(null);
+  const containerRef = (0, import_react94.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react94.useState)(false);
+  const id = (0, import_react94.useId)();
+  const ids = (0, import_react94.useMemo)(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  (0, import_react95.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -20753,7 +20765,7 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-var import_react96 = require("react");
+var import_react95 = require("react");
 
 // src/components/user-interaction/data/data-types.tsx
 var import_lucide_react26 = require("lucide-react");
@@ -20817,7 +20829,7 @@ var DataTypeUtils = {
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = (0, import_react96.useCallback)((e) => {
+  const handleResizeMove = (0, import_react95.useCallback)((e) => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
     const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
@@ -20833,7 +20845,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = (0, import_react96.useCallback)(() => {
+  const handleResizeEnd = (0, import_react95.useCallback)(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -20851,7 +20863,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  (0, import_react96.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -20950,7 +20962,7 @@ var TableHeader = ({ isSticky = false }) => {
 };
 
 // src/components/layout/table/VirtualizedTableBody.tsx
-var import_react97 = require("react");
+var import_react96 = require("react");
 var import_react_table5 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_clsx36 = __toESM(require("clsx"));
@@ -20963,11 +20975,11 @@ var VirtualizedTableBody = ({
   const { table, onRowClick } = useTableStateWithoutSizingContext();
   const { containerRef } = useTableContainerContext();
   const rows = table.getRowModel().rows;
-  const bodyRef = (0, import_react97.useRef)(null);
-  const [isMounted, setIsMounted] = (0, import_react97.useState)(false);
-  const [scrollMargin, setScrollMargin] = (0, import_react97.useState)(0);
-  (0, import_react97.useEffect)(() => setIsMounted(true), []);
-  (0, import_react97.useEffect)(() => {
+  const bodyRef = (0, import_react96.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react96.useState)(false);
+  const [scrollMargin, setScrollMargin] = (0, import_react96.useState)(0);
+  (0, import_react96.useEffect)(() => setIsMounted(true), []);
+  (0, import_react96.useEffect)(() => {
     if (scroll !== "window") return;
     const element = bodyRef.current;
     if (!element || typeof window === "undefined") return;
@@ -21099,7 +21111,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 
 // src/components/user-interaction/Checkbox.tsx
 var import_lucide_react27 = require("lucide-react");
-var import_react98 = require("react");
+var import_react97 = require("react");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var Checkbox = ({
   value: controlledValue,
@@ -21118,7 +21130,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react98.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react97.useCallback)((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -21163,7 +21175,7 @@ var Checkbox = ({
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-var import_react99 = require("react");
+var import_react98 = require("react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var TableWithSelectionProvider = ({
   children,
@@ -21176,7 +21188,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = (0, import_react99.useMemo)(() => [
+  const columnDef = (0, import_react98.useMemo)(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -21219,7 +21231,7 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRowCell: (0, import_react99.useCallback)((columnId, table) => {
+      fillerRowCell: (0, import_react98.useCallback)((columnId, table) => {
         if (columnId === selectionRowId) {
           return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Checkbox, { value: false, disabled: true });
         }
@@ -21237,7 +21249,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: (0, import_react99.useCallback)((row, table) => {
+      onRowClick: (0, import_react98.useCallback)((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -21279,7 +21291,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-var import_react100 = require("react");
+var import_react99 = require("react");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var TableColumnComponent = ({
   filterType,
@@ -21291,11 +21303,11 @@ var TableColumnComponent = ({
     "TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
     (filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
   );
-  const [column] = (0, import_react100.useState)({
+  const [column] = (0, import_react99.useState)({
     ...props,
     filterFn
   });
-  (0, import_react100.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -21303,27 +21315,27 @@ var TableColumnComponent = ({
   }, [registerColumn, column]);
   return null;
 };
-var TableColumnFactory = () => (0, import_react100.memo)(
+var TableColumnFactory = () => (0, import_react99.memo)(
   TableColumnComponent,
   (prevProps, nextProps) => {
     return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta, prevProps.cell === nextProps.cell;
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = (0, import_react100.useMemo)(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = (0, import_react99.useMemo)(() => TableColumnFactory(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-var import_react101 = require("react");
+var import_react100 = require("react");
 var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = (0, import_react101.useRef)(null);
-  const generatedId = (0, import_react101.useId)();
-  const ids = (0, import_react101.useMemo)(() => ({
+  const containerRef = (0, import_react100.useRef)(null);
+  const generatedId = (0, import_react100.useId)();
+  const ids = (0, import_react100.useMemo)(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
@@ -21332,7 +21344,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
-  const columns = (0, import_react101.useMemo)(() => {
+  const columns = (0, import_react100.useMemo)(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -21590,16 +21602,16 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 };
 
 // src/components/user-interaction/Combobox/Combobox.tsx
-var import_react107 = require("react");
+var import_react106 = require("react");
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-var import_react104 = require("react");
+var import_react103 = require("react");
 
 // src/components/user-interaction/Combobox/ComboboxContext.tsx
-var import_react102 = require("react");
-var ComboboxContext = (0, import_react102.createContext)(null);
+var import_react101 = require("react");
+var ComboboxContext = (0, import_react101.createContext)(null);
 function useComboboxContext() {
-  const ctx = (0, import_react102.useContext)(ComboboxContext);
+  const ctx = (0, import_react101.useContext)(ComboboxContext);
   if (ctx == null) {
     throw new Error("useComboboxContext must be used within ComboboxRoot");
   }
@@ -21607,7 +21619,7 @@ function useComboboxContext() {
 }
 
 // src/components/user-interaction/Combobox/useCombobox.ts
-var import_react103 = require("react");
+var import_react102 = require("react");
 function useCombobox({
   options,
   searchQuery: controlledSearchQuery,
@@ -21622,36 +21634,36 @@ function useCombobox({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery: searchQuery ?? "",
-    toTags: (0, import_react103.useCallback)((o) => [o.label], [])
+    toTags: (0, import_react102.useCallback)((o) => [o.label], [])
   });
-  const visibleOptionIds = (0, import_react103.useMemo)(
+  const visibleOptionIds = (0, import_react102.useMemo)(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptionIds = (0, import_react103.useMemo)(
+  const enabledOptionIds = (0, import_react102.useMemo)(
     () => visibleOptions.filter((o) => !o.disabled).map((o) => o.id),
     [visibleOptions]
   );
   const listNav = useListNavigation({ options: enabledOptionIds });
-  const highlightItem = (0, import_react103.useCallback)(
+  const highlightItem = (0, import_react102.useCallback)(
     (id) => {
       if (!enabledOptionIds.includes(id)) return;
       listNav.highlight(id);
     },
     [enabledOptionIds, listNav]
   );
-  const state = (0, import_react103.useMemo)(
+  const state = (0, import_react102.useMemo)(
     () => ({
       searchQuery: searchQuery ?? "",
       highlightedId: listNav.highlightedId
     }),
     [searchQuery, listNav.highlightedId]
   );
-  const computedState = (0, import_react103.useMemo)(
+  const computedState = (0, import_react102.useMemo)(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = (0, import_react103.useMemo)(
+  const actions = (0, import_react102.useMemo)(
     () => ({
       setSearchQuery,
       highlightFirst: listNav.first,
@@ -21662,7 +21674,7 @@ function useCombobox({
     }),
     [setSearchQuery, listNav.first, listNav.last, listNav.next, listNav.previous, highlightItem]
   );
-  return (0, import_react103.useMemo)(
+  return (0, import_react102.useMemo)(
     () => ({
       ...state,
       ...computedState,
@@ -21679,14 +21691,14 @@ function ComboboxRoot({
   onItemClick,
   ...hookProps
 }) {
-  const [options, setOptions] = (0, import_react104.useState)([]);
-  const [listRef, setListRef] = (0, import_react104.useState)(null);
-  const generatedId = (0, import_react104.useId)();
-  const [ids, setIds] = (0, import_react104.useState)({
+  const [options, setOptions] = (0, import_react103.useState)([]);
+  const [listRef, setListRef] = (0, import_react103.useState)(null);
+  const generatedId = (0, import_react103.useId)();
+  const [ids, setIds] = (0, import_react103.useState)({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`
   });
-  const registerOption = (0, import_react104.useCallback)(
+  const registerOption = (0, import_react103.useCallback)(
     (option) => {
       setOptions((prev) => {
         const next = prev.filter((o) => o.id !== option.id);
@@ -21698,11 +21710,11 @@ function ComboboxRoot({
     },
     []
   );
-  const registerList = (0, import_react104.useCallback)((ref) => {
+  const registerList = (0, import_react103.useCallback)((ref) => {
     setListRef(() => ref);
     return () => setListRef(null);
   }, []);
-  const hookOptions = (0, import_react104.useMemo)(
+  const hookOptions = (0, import_react103.useMemo)(
     () => options.map((o) => ({
       id: o.id,
       label: o.label,
@@ -21711,38 +21723,38 @@ function ComboboxRoot({
     [options]
   );
   const state = useCombobox({ ...hookProps, options: hookOptions });
-  const idToOptionMap = (0, import_react104.useMemo)(() => {
+  const idToOptionMap = (0, import_react103.useMemo)(() => {
     return options.reduce((acc, o) => {
       acc[o.id] = o;
       return acc;
     }, {});
   }, [options]);
-  const selectOption = (0, import_react104.useCallback)(
+  const selectOption = (0, import_react103.useCallback)(
     (id) => {
       const option = idToOptionMap[id];
       if (option) onItemClick?.(option.value);
     },
     [idToOptionMap, onItemClick]
   );
-  const config = (0, import_react104.useMemo)(
+  const config = (0, import_react103.useMemo)(
     () => ({ ids, setIds }),
     [ids, setIds]
   );
-  const layout = (0, import_react104.useMemo)(
+  const layout = (0, import_react103.useMemo)(
     () => ({
       listRef: listRef ?? { current: null },
       registerList
     }),
     [listRef, registerList]
   );
-  const search = (0, import_react104.useMemo)(
+  const search = (0, import_react103.useMemo)(
     () => ({
       searchQuery: state.searchQuery,
       setSearchQuery: state.setSearchQuery
     }),
     [state.searchQuery, state.setSearchQuery]
   );
-  const contextValue = (0, import_react104.useMemo)(
+  const contextValue = (0, import_react103.useMemo)(
     () => ({
       highlightedId: state.highlightedId,
       options,
@@ -21780,14 +21792,14 @@ function ComboboxRoot({
 }
 
 // src/components/user-interaction/Combobox/ComboboxInput.tsx
-var import_react105 = require("react");
+var import_react104 = require("react");
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var ComboboxInput = (0, import_react105.forwardRef)(
+var ComboboxInput = (0, import_react104.forwardRef)(
   function ComboboxInput2(props, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, selectOption } = context;
-    const handleKeyDown = (0, import_react105.useCallback)(
+    const handleKeyDown = (0, import_react104.useCallback)(
       (event) => {
         props.onKeyDown?.(event);
         switch (event.key) {
@@ -21839,17 +21851,17 @@ var ComboboxInput = (0, import_react105.forwardRef)(
 );
 
 // src/components/user-interaction/Combobox/ComboboxList.tsx
-var import_react106 = require("react");
+var import_react105 = require("react");
 var import_clsx39 = __toESM(require("clsx"));
 var import_jsx_runtime99 = require("react/jsx-runtime");
-var ComboboxList = (0, import_react106.forwardRef)(
+var ComboboxList = (0, import_react105.forwardRef)(
   function ComboboxList2({ children, ...props }, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { layout } = context;
     const { registerList } = layout;
-    const innerRef = (0, import_react106.useRef)(null);
-    (0, import_react106.useEffect)(() => {
+    const innerRef = (0, import_react105.useRef)(null);
+    (0, import_react105.useEffect)(() => {
       return registerList(innerRef);
     }, [registerList]);
     const setRefs = (node) => {
@@ -21891,7 +21903,7 @@ var ComboboxList = (0, import_react106.forwardRef)(
 
 // src/components/user-interaction/Combobox/Combobox.tsx
 var import_jsx_runtime100 = require("react/jsx-runtime");
-var Combobox = (0, import_react107.forwardRef)(function Combobox2({
+var Combobox = (0, import_react106.forwardRef)(function Combobox2({
   children,
   onItemClick,
   searchQuery,
@@ -21916,10 +21928,10 @@ var Combobox = (0, import_react107.forwardRef)(function Combobox2({
 });
 
 // src/components/user-interaction/Combobox/ComboboxOption.tsx
-var import_react108 = require("react");
+var import_react107 = require("react");
 var import_clsx40 = __toESM(require("clsx"));
 var import_jsx_runtime101 = require("react/jsx-runtime");
-var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
+var ComboboxOption = (0, import_react107.forwardRef)(function ComboboxOption2({
   children,
   value,
   label,
@@ -21930,11 +21942,11 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
 }, ref) {
   const context = useComboboxContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react108.useRef)(null);
-  const generatedId = (0, import_react108.useId)();
+  const itemRef = (0, import_react107.useRef)(null);
+  const generatedId = (0, import_react107.useId)();
   const optionId = idProp ?? `combobox-option-${generatedId}`;
   const resolvedDisplay = children ?? label;
-  (0, import_react108.useEffect)(() => {
+  (0, import_react107.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -21944,7 +21956,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
       ref: itemRef
     });
   }, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
-  (0, import_react108.useEffect)(() => {
+  (0, import_react107.useEffect)(() => {
     if (context.highlightedId === optionId) {
       itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
     }
@@ -21990,7 +22002,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
 ComboboxOption.displayName = "ComboboxOption";
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-var import_react109 = require("react");
+var import_react108 = require("react");
 var import_clsx41 = require("clsx");
 
 // src/utils/writeToClipboard.ts
@@ -22013,7 +22025,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react109.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react108.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     TooltipRoot,
     {
@@ -22062,7 +22074,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-var import_react110 = require("react");
+var import_react109 = require("react");
 var import_clsx42 = __toESM(require("clsx"));
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var MenuItem = ({
@@ -22088,8 +22100,8 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = (0, import_react110.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react110.useState)(false);
+  const triggerRef = (0, import_react109.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react109.useState)(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -22097,7 +22109,7 @@ var Menu = ({
     disabled
   };
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
-    trigger(bag, (0, import_react110.useCallback)((el) => triggerRef.current = el, [])),
+    trigger(bag, (0, import_react109.useCallback)((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       PopUp,
       {
@@ -22119,21 +22131,21 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-var import_react111 = require("react");
+var import_react110 = require("react");
 var import_lucide_react30 = require("lucide-react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
-var MultiSelectChipDisplayButton = (0, import_react111.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
+var MultiSelectChipDisplayButton = (0, import_react110.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
   const translation = useHightideTranslation();
   const context = useMultiSelectContext();
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  (0, import_react111.useEffect)(() => {
+  (0, import_react110.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = (0, import_react111.useRef)(null);
-  (0, import_react111.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react111.useEffect)(() => {
+  const innerRef = (0, import_react110.useRef)(null);
+  (0, import_react110.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react110.useEffect)(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -22217,7 +22229,7 @@ var MultiSelectChipDisplayButton = (0, import_react111.forwardRef)(function Mult
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react111.forwardRef)(
+var MultiSelectChipDisplay = (0, import_react110.forwardRef)(
   function MultiSelectChipDisplay2({
     children,
     contentPanelProps,
@@ -22232,7 +22244,7 @@ var MultiSelectChipDisplay = (0, import_react111.forwardRef)(
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-var import_react112 = require("react");
+var import_react111 = require("react");
 var import_clsx43 = __toESM(require("clsx"));
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var up = 1;
@@ -22253,7 +22265,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react112.useState)({
+  }, setAnimation] = (0, import_react111.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -22269,7 +22281,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react112.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react111.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -22279,7 +22291,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react112.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react111.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -22352,7 +22364,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -22430,7 +22442,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-var import_react113 = require("react");
+var import_react112 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var Switch = ({
   value: controlledValue,
@@ -22445,7 +22457,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react113.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react112.useCallback)((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -22485,10 +22497,10 @@ var Switch = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-var import_react114 = require("react");
+var import_react113 = require("react");
 var import_clsx44 = __toESM(require("clsx"));
 var import_jsx_runtime107 = require("react/jsx-runtime");
-var Textarea = (0, import_react114.forwardRef)(function Textarea2({
+var Textarea = (0, import_react113.forwardRef)(function Textarea2({
   value: controlledValue,
   initialValue,
   invalid = false,
@@ -22504,7 +22516,7 @@ var Textarea = (0, import_react114.forwardRef)(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = (0, import_react114.useCallback)((text) => {
+  const onEditCompleteWrapper = (0, import_react113.useCallback)((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
@@ -22542,7 +22554,7 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react114.useId)();
+  const genId = (0, import_react113.useId)();
   const usedId = id ?? genId;
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
     "div",
@@ -22574,20 +22586,20 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/data/FilterList.tsx
-var import_react115 = require("react");
+var import_react114 = require("react");
 var import_lucide_react31 = require("lucide-react");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
-  const activeIds = (0, import_react115.useMemo)(() => value.map((item) => item.id), [value]);
-  const inactiveItems = (0, import_react115.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
-  const itemRecord = (0, import_react115.useMemo)(() => availableItems.reduce((acc, item) => {
+  const activeIds = (0, import_react114.useMemo)(() => value.map((item) => item.id), [value]);
+  const inactiveItems = (0, import_react114.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
+  const itemRecord = (0, import_react114.useMemo)(() => availableItems.reduce((acc, item) => {
     acc[item.id] = item;
     return acc;
   }, {}), [availableItems]);
-  const [editState, setEditState] = (0, import_react115.useState)(void 0);
-  const valueWithEditState = (0, import_react115.useMemo)(() => {
+  const [editState, setEditState] = (0, import_react114.useState)(void 0);
+  const valueWithEditState = (0, import_react114.useMemo)(() => {
     let foundEditValue = false;
     for (const item of value) {
       if (item.id === editState?.id) {
@@ -22695,18 +22707,18 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
 };
 
 // src/components/user-interaction/data/SortingList.tsx
-var import_react116 = require("react");
+var import_react115 = require("react");
 var import_lucide_react32 = require("lucide-react");
 var import_clsx45 = __toESM(require("clsx"));
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var SortingList = ({ sorting, onSortingChange, availableItems }) => {
   const translation = useHightideTranslation();
-  const activeIds = (0, import_react116.useMemo)(() => sorting.map((item) => item.id), [sorting]);
-  const inactiveItems = (0, import_react116.useMemo)(
+  const activeIds = (0, import_react115.useMemo)(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = (0, import_react115.useMemo)(
     () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
     [availableItems, activeIds]
   );
-  const itemRecord = (0, import_react116.useMemo)(
+  const itemRecord = (0, import_react115.useMemo)(
     () => availableItems.reduce(
       (acc, item) => {
         acc[item.id] = item;
@@ -22884,10 +22896,10 @@ var TimeDisplay = ({
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-var import_react117 = require("react");
+var import_react116 = require("react");
 var import_lucide_react33 = require("lucide-react");
 var import_jsx_runtime111 = require("react/jsx-runtime");
-var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDateTimeInput2({
+var FlexibleDateTimeInput = (0, import_react116.forwardRef)(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
   initialValue,
@@ -22909,7 +22921,7 @@ var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDat
   const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
   const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
   const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
-  const [mode, setMode] = (0, import_react117.useState)(() => {
+  const [mode, setMode] = (0, import_react116.useState)(() => {
     if (value && !hasFixedTime(value)) {
       return "dateTime";
     }
@@ -22954,11 +22966,11 @@ var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDat
 });
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
+var import_react117 = require("react");
 var import_react118 = require("react");
-var import_react119 = require("react");
 var import_clsx46 = __toESM(require("clsx"));
 var import_jsx_runtime112 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react119.forwardRef)(function InsideLabelInput2({
+var InsideLabelInput = (0, import_react118.forwardRef)(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -22971,8 +22983,8 @@ var InsideLabelInput = (0, import_react119.forwardRef)(function InsideLabelInput
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = (0, import_react119.useState)(false);
-  const generatedId = (0, import_react118.useId)();
+  const [isFocused, setIsFocused] = (0, import_react118.useState)(false);
+  const generatedId = (0, import_react117.useId)();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: (0, import_clsx46.default)("relative"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -23061,11 +23073,11 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react120 = require("react");
+var import_react119 = require("react");
 var import_lucide_react35 = require("lucide-react");
 var import_clsx48 = __toESM(require("clsx"));
 var import_jsx_runtime114 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react120.forwardRef)(function ToggleableInput2({
+var ToggleableInput = (0, import_react119.forwardRef)(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -23078,10 +23090,10 @@ var ToggleableInput = (0, import_react120.forwardRef)(function ToggleableInput2(
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = (0, import_react120.useState)(initialState !== "display");
-  const innerRef = (0, import_react120.useRef)(null);
-  (0, import_react120.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react120.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react119.useState)(initialState !== "display");
+  const innerRef = (0, import_react119.useRef)(null);
+  (0, import_react119.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react119.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -23516,9 +23528,9 @@ var TextProperty = ({
 
 // src/components/utils/Polymorphic.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react121 = require("react");
+var import_react120 = require("react");
 var import_jsx_runtime122 = require("react/jsx-runtime");
-var PolymorphicSlot = (0, import_react121.forwardRef)(function PolymorphicSlot2({
+var PolymorphicSlot = (0, import_react120.forwardRef)(function PolymorphicSlot2({
   children,
   asChild,
   defaultComponent = "div",
@@ -23529,16 +23541,16 @@ var PolymorphicSlot = (0, import_react121.forwardRef)(function PolymorphicSlot2(
 });
 
 // src/components/utils/Transition.tsx
-var import_react122 = require("react");
+var import_react121 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react122.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react122.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react121.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react121.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react122.useEffect)(() => {
+  (0, import_react121.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -23574,7 +23586,7 @@ var HightideProvider = ({
 };
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react123 = require("react");
+var import_react122 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -23612,7 +23624,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react123.useEffect)(() => {
+  (0, import_react122.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -23621,10 +23633,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react124 = __toESM(require("react"));
+var import_react123 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react124.default.useState(false);
-  (0, import_react124.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react123.default.useState(false);
+  (0, import_react123.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -23644,11 +23656,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-var import_react125 = require("react");
+var import_react124 = require("react");
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? import_react125.useLayoutEffect : import_react125.useEffect;
+var useIsomorphicEffect = isClient ? import_react124.useLayoutEffect : import_react124.useEffect;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react125.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react124.useState)(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -23659,10 +23671,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-var import_react126 = require("react");
+var import_react125 = require("react");
 function useHandleRefs(handleRef) {
-  const refs = (0, import_react126.useRef)([]);
-  (0, import_react126.useEffect)(() => {
+  const refs = (0, import_react125.useRef)([]);
+  (0, import_react125.useEffect)(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -23675,10 +23687,10 @@ function useHandleRefs(handleRef) {
 }
 
 // src/hooks/useLogUnstableDependencies.ts
-var import_react127 = __toESM(require("react"));
+var import_react126 = __toESM(require("react"));
 function useLogUnstableDependencies(name, value) {
-  const prev = import_react127.default.useRef(null);
-  import_react127.default.useEffect(() => {
+  const prev = import_react126.default.useRef(null);
+  import_react126.default.useEffect(() => {
     if (!prev.current) {
       prev.current = value;
       return;
@@ -23700,10 +23712,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-var import_react128 = require("react");
+var import_react127 = require("react");
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = (0, import_react128.useState)(overwriteValue);
-  (0, import_react128.useEffect)(() => {
+  const [state, setState] = (0, import_react127.useState)(overwriteValue);
+  (0, import_react127.useEffect)(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -23715,9 +23727,204 @@ var useOverwritableState = (overwriteValue, onChange) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react129 = require("react");
+var import_react128 = require("react");
 var useRerender = () => {
-  return (0, import_react129.useReducer)(() => ({}), {})[1];
+  return (0, import_react128.useReducer)(() => ({}), {})[1];
+};
+
+// src/hooks/useSwipeGesture.ts
+var import_react129 = require("react");
+var useSwipeGesture = ({
+  elementRef,
+  inputMode = "touch",
+  onSwipe,
+  startRegion,
+  threshold = 50,
+  crossAxisThreshold = 100,
+  maxSwipeTime = 100
+}) => {
+  const onSwipeRef = (0, import_react129.useRef)(onSwipe);
+  const startRegionRef = (0, import_react129.useRef)(startRegion);
+  const thresholdRef = (0, import_react129.useRef)(threshold);
+  const crossAxisThresholdRef = (0, import_react129.useRef)(crossAxisThreshold);
+  const maxSwipeTimeRef = (0, import_react129.useRef)(maxSwipeTime);
+  const gestureStartRef = (0, import_react129.useRef)(null);
+  const gestureEndRef = (0, import_react129.useRef)(null);
+  const isScrollingRef = (0, import_react129.useRef)(false);
+  const isMouseDownRef = (0, import_react129.useRef)(false);
+  (0, import_react129.useEffect)(() => {
+    onSwipeRef.current = onSwipe;
+    startRegionRef.current = startRegion;
+    thresholdRef.current = threshold;
+    crossAxisThresholdRef.current = crossAxisThreshold;
+    maxSwipeTimeRef.current = maxSwipeTime;
+  }, [onSwipe, startRegion, threshold, crossAxisThreshold, maxSwipeTime]);
+  const isWithinStartRegion = (x, y) => {
+    const region = startRegionRef.current;
+    if (!region) return true;
+    if (region.minX !== void 0 && x < region.minX) return false;
+    if (region.maxX !== void 0 && x > region.maxX) return false;
+    if (region.minY !== void 0 && y < region.minY) return false;
+    if (region.maxY !== void 0 && y > region.maxY) return false;
+    return true;
+  };
+  const findScrollableParent = (element) => {
+    if (!element) return null;
+    const table = element.closest("table") || element.closest('[role="table"]');
+    if (table) {
+      let parent = table.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return table;
+    }
+    let current = element;
+    while (current) {
+      const style = window.getComputedStyle(current);
+      if (style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll") {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  };
+  (0, import_react129.useEffect)(() => {
+    const element = elementRef?.current ?? null;
+    const target = element ?? window;
+    const listenTouch = inputMode === "touch" || inputMode === "both";
+    const listenMouse = inputMode === "mouse" || inputMode === "both";
+    const onGestureStart = (x, y, eventTarget) => {
+      console.log("onGestureStart", x, y);
+      if (!isWithinStartRegion(x, y)) return;
+      const scrollableParent = findScrollableParent(eventTarget);
+      gestureEndRef.current = null;
+      gestureStartRef.current = {
+        x,
+        y,
+        scrollY: scrollableParent?.scrollTop ?? window.scrollY,
+        time: performance.now()
+      };
+      isScrollingRef.current = !!scrollableParent;
+    };
+    const onGestureMove = (x, y, eventTarget) => {
+      console.log("onGestureMove", x, y);
+      const scrollableParent = findScrollableParent(eventTarget);
+      const currentScrollY = scrollableParent?.scrollTop ?? window.scrollY;
+      gestureEndRef.current = {
+        x,
+        y,
+        scrollY: currentScrollY,
+        time: performance.now()
+      };
+      if (gestureStartRef.current && Math.abs(currentScrollY - gestureStartRef.current.scrollY) > 5) {
+        isScrollingRef.current = true;
+      }
+    };
+    const resolveSwipeDirection = (start, end) => {
+      const deltaX = end.x - start.x;
+      const deltaY = end.y - start.y;
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      const minDistance = thresholdRef.current;
+      const maxCrossAxis = crossAxisThresholdRef.current;
+      if (absX < minDistance && absY < minDistance) {
+        return null;
+      }
+      if (absX >= absY && absX >= minDistance && absY <= maxCrossAxis) {
+        return deltaX > 0 ? "leftToRight" : "rightToLeft";
+      }
+      if (absY > absX && absY >= minDistance && absX <= maxCrossAxis) {
+        return deltaY > 0 ? "topToBottom" : "bottomToTop";
+      }
+      return null;
+    };
+    const onGestureEnd = () => {
+      const start = gestureStartRef.current;
+      const end = gestureEndRef.current;
+      if (!start || !end) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      if (isScrollingRef.current || Math.abs(start.scrollY - end.scrollY) > 5) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      const maxSwipeTime2 = maxSwipeTimeRef.current;
+      if (maxSwipeTime2 !== void 0 && end.time - start.time > maxSwipeTime2) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      const direction = resolveSwipeDirection(start, end);
+      if (direction && onSwipeRef.current) {
+        onSwipeRef.current({ direction });
+      }
+      gestureStartRef.current = null;
+      gestureEndRef.current = null;
+      isScrollingRef.current = false;
+    };
+    const onTouchStart = (e) => {
+      if (!e.touches[0]) return;
+      onGestureStart(e.touches[0].clientX, e.touches[0].clientY, e.target);
+    };
+    const onTouchMove = (e) => {
+      if (!e.touches[0]) return;
+      onGestureMove(e.touches[0].clientX, e.touches[0].clientY, e.target);
+    };
+    const onTouchEnd = () => {
+      onGestureEnd();
+    };
+    const onMouseMove = (e) => {
+      if (!isMouseDownRef.current) return;
+      onGestureMove(e.clientX, e.clientY, e.target);
+    };
+    const onMouseUp = () => {
+      if (!isMouseDownRef.current) return;
+      isMouseDownRef.current = false;
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      onGestureEnd();
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 0) return;
+      if (!isWithinStartRegion(e.clientX, e.clientY)) return;
+      isMouseDownRef.current = true;
+      onGestureStart(e.clientX, e.clientY, e.target);
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    };
+    const passiveOptions = { passive: true };
+    if (listenTouch) {
+      target.addEventListener("touchstart", onTouchStart, passiveOptions);
+      target.addEventListener("touchmove", onTouchMove, passiveOptions);
+      target.addEventListener("touchend", onTouchEnd, passiveOptions);
+    }
+    if (listenMouse) {
+      target.addEventListener("mousedown", onMouseDown);
+    }
+    return () => {
+      if (listenTouch) {
+        target.removeEventListener("touchstart", onTouchStart);
+        target.removeEventListener("touchmove", onTouchMove);
+        target.removeEventListener("touchend", onTouchEnd);
+      }
+      if (listenMouse) {
+        target.removeEventListener("mousedown", onMouseDown);
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+      }
+    };
+  }, [elementRef, inputMode]);
+  return elementRef;
 };
 
 // src/hooks/useUpdatingDateString.ts
@@ -24382,6 +24589,7 @@ var PromiseUtils = {
   useSelectOptionDisplayLocation,
   useSingleSelection,
   useStorage,
+  useSwipeGesture,
   useTabContext,
   useTableColumnDefinitionContext,
   useTableContainerContext,