@helpwave/hightide 0.8.6 → 0.8.8

package/dist/index.mjs

@@ -9563,21 +9563,23 @@ var Tooltip = ({
   containerClassName,
   alignment,
   isAnimated,
-  ...props
+  onIsShownChange,
+  displayProps
 }) => {
   return /* @__PURE__ */ jsxs6(
     TooltipRoot,
     {
       isInitiallyShown,
+      onIsShownChange,
       appearDelay,
       disabled,
       children: [
-        /* @__PURE__ */ jsx16(TooltipTrigger, { children: ({ props: props2, callbackRef, disabled: disabled2 }) => /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx16(TooltipTrigger, { children: ({ props, callbackRef, disabled: disabled2 }) => /* @__PURE__ */ jsx16(
           "div",
           {
             ref: callbackRef,
             className: containerClassName,
-            ...disabled2 ? void 0 : props2,
+            ...disabled2 ? void 0 : props,
             children
           }
         ) }),
@@ -9586,7 +9588,7 @@ var Tooltip = ({
           {
             alignment,
             isAnimated,
-            ...props,
+            ...displayProps,
             children: tooltip
           }
         )
@@ -10146,7 +10148,7 @@ var useControlledState = ({
     onValueChangeStable(resolved);
   }, [onValueChangeStable, isControlled]);
   const value = isControlled ? controlledValue : internalValue;
-  return [value, setState];
+  return [value, setState, isControlled];
 };
 
 // src/components/layout/Expandable.tsx
@@ -10280,9 +10282,10 @@ var Expandable = forwardRef7(function Expandable2({
   trigger,
   triggerProps,
   contentProps,
-  contentExpandedClassName
+  contentExpandedClassName,
+  ...props
 }, ref) {
-  return /* @__PURE__ */ jsxs9(ExpandableRoot, { ref, children: [
+  return /* @__PURE__ */ jsxs9(ExpandableRoot, { ref, ...props, children: [
     /* @__PURE__ */ jsx20(ExpandableHeader, { ...triggerProps, children: trigger }),
     /* @__PURE__ */ jsx20(ExpandableContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsx20(
       ExpandableContent,
@@ -10886,8 +10889,8 @@ var MarkdownInterpreter = ({ text, className }) => {
 };
 
 // src/components/layout/TabSwitcher.tsx
-import { useCallback as useCallback13, useId as useId6, useState as useState15 } from "react";
-import { createContext as createContext8, useContext as useContext8, useEffect as useEffect16, useRef as useRef14 } from "react";
+import { useCallback as useCallback17, useId as useId7, useState as useState22 } from "react";
+import { createContext as createContext8, useContext as useContext8, useEffect as useEffect27, useRef as useRef17 } from "react";
 import clsx7 from "clsx";
 
 // src/utils/propsUtil.ts
@@ -11024,310 +11027,136 @@ var PropsUtil = {
 
 // src/components/layout/TabSwitcher.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx25 } from "react/jsx-runtime";
-function sortByDomOrder(infos) {
-  return infos.slice().sort((a, b) => {
-    const elA = a.ref.current;
-    const elB = b.ref.current;
-    if (!elA && !elB) return 0;
-    if (!elA) return 1;
-    if (!elB) return -1;
-    return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-  });
+
+// src/hooks/focus/useFocusGuards.ts
+import { useEffect as useEffect16 } from "react";
+var selectorName = "data-hw-focus-guard";
+function FocusGuard() {
+  const element = document.createElement("div");
+  element.setAttribute(selectorName, "");
+  element.tabIndex = 0;
+  element.style.border = "none";
+  element.style.outline = "none";
+  element.style.boxShadow = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
 }
-function getNextEnabledIdInOrder(sortedInfos, currentActiveId) {
-  const enabled = sortedInfos.filter((t) => !t.disabled);
-  if (enabled.length === 0) return null;
-  const currentIndex = sortedInfos.findIndex((t) => t.id === currentActiveId);
-  const startIndex = currentIndex >= 0 ? (currentIndex + 1) % sortedInfos.length : 0;
-  for (let i = 0; i < sortedInfos.length; i++) {
-    const idx = (startIndex + i) % sortedInfos.length;
-    if (!sortedInfos[idx].disabled) return sortedInfos[idx].id;
+var FocusGuardsService = class _FocusGuardsService {
+  constructor() {
+    this.count = 0;
   }
-  return null;
-}
-var TabContext = createContext8(null);
-function useTabContext() {
-  const context = useContext8(TabContext);
-  if (!context) throw new Error("useTabContext must be used inside a <TabView>");
-  return context;
-}
-function TabSwitcher({ children }) {
-  const [state, setState] = useState15({
-    activeId: null,
-    infos: []
-  });
-  const [portalState, setPortalState] = useState15(null);
-  const subscribe = useCallback13((info) => {
-    const id = info.id;
-    setState((prevState) => {
-      const existingIndex = prevState.infos.findIndex((t) => t.id === id);
-      const infos = existingIndex >= 0 ? prevState.infos.map((t, i) => i === existingIndex ? { ...t, ...info } : t) : [...prevState.infos, info];
-      const ordered = sortByDomOrder(infos);
-      const activeIsDisabled = prevState.activeId !== null && infos.some((t) => t.id === prevState.activeId && t.disabled);
-      const activeId = activeIsDisabled ? getNextEnabledIdInOrder(ordered, prevState.activeId) : prevState.activeId ?? (info.disabled ? getNextEnabledIdInOrder(ordered, null) : id);
-      return { activeId, infos: ordered };
-    });
+  static getInstance() {
+    if (!_FocusGuardsService.instance) {
+      _FocusGuardsService.instance = new _FocusGuardsService();
+    }
+    return _FocusGuardsService.instance;
+  }
+  add() {
+    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
+    this.count++;
+  }
+  remove() {
+    if (this.count === 1) {
+      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
+    }
+    this.count--;
+  }
+};
+var useFocusGuards = () => {
+  useEffect16(() => {
+    FocusGuardsService.getInstance().add();
     return () => {
-      setState((prevState) => {
-        const infos = prevState.infos.filter((t) => t.id !== id);
-        const activeTab = prevState.activeId !== null ? infos.find((t) => t.id === prevState.activeId) : null;
-        const activeIsUnregisteredOrDisabled = prevState.activeId === id || activeTab?.disabled === true;
-        const nextId = prevState.activeId === id ? getNextEnabledIdInOrder(prevState.infos, id) : getNextEnabledIdInOrder(infos, prevState.activeId);
-        const activeId = activeIsUnregisteredOrDisabled ? nextId : prevState.activeId;
-        return { activeId, infos };
-      });
+      FocusGuardsService.getInstance().remove();
     };
   }, []);
-  const registerPortal = useCallback13((state2) => {
-    setPortalState(state2);
-  }, []);
-  const setActiveId = useCallback13((activeId) => {
-    setState((prevState) => ({ ...prevState, activeId }));
+};
+
+// src/hooks/focus/useFocusManagement.ts
+import { useCallback as useCallback13 } from "react";
+function useFocusManagement() {
+  const getFocusableElements = useCallback13(() => {
+    return Array.from(
+      document.querySelectorAll(
+        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(
+      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
+    );
   }, []);
-  return /* @__PURE__ */ jsx25(
-    TabContext.Provider,
-    {
-      value: {
-        tabs: {
-          activeId: state.activeId,
-          setActiveId,
-          subscribe,
-          info: state.infos
-        },
-        portal: {
-          id: portalState?.id ?? null,
-          element: portalState?.ref.current ?? null,
-          setPortal: registerPortal
-        }
-      },
-      children
+  const getNextFocusElement = useCallback13(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
     }
-  );
-}
-function TabList({ ...props }) {
-  const { tabs } = useTabContext();
-  const { info, activeId, setActiveId: setActive } = tabs;
-  const refs = useRef14({});
-  const onKeyDown = (e) => {
-    const idx = info.findIndex((tab) => tab.id === activeId);
-    if (idx === -1) return;
-    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
-    if (step === 0) return;
-    let nextIdx = idx;
-    for (let i = 0; i < info.length; i++) {
-      nextIdx = (nextIdx + step + info.length) % info.length;
-      if (!info[nextIdx].disabled) break;
+    let nextElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      nextElement = elements[(currentIndex + 1) % elements.length];
     }
-    if (info[nextIdx].disabled) return;
-    const nextId = info[nextIdx].id;
-    setActive(nextId);
-    refs.current[nextId]?.focus();
-  };
-  return /* @__PURE__ */ jsx25(
-    "ul",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "tab-list",
-      onKeyDown,
-      role: "tablist",
-      "aria-orientation": "horizontal",
-      style: { "--tab-count": info.length, ...props.style },
-      children: info.map((tabInfo) => {
-        const isDisabled = !!tabInfo.disabled;
-        const isActive = activeId === tabInfo.id;
-        return /* @__PURE__ */ jsx25(
-          "li",
-          {
-            ref: (el) => {
-              refs.current[tabInfo.id] = el;
-            },
-            id: tabInfo.labelId,
-            ...isDisabled ? {} : PropsUtil.aria.click(() => setActive(tabInfo.id)),
-            "data-name": "tab-list-item",
-            "data-active": PropsUtil.dataAttributes.bool(isActive),
-            "data-disabled": PropsUtil.dataAttributes.bool(isDisabled),
-            role: "tab",
-            "aria-selected": isActive,
-            "aria-disabled": isDisabled,
-            "aria-controls": activeId,
-            tabIndex: isActive && !isDisabled ? 0 : -1,
-            children: tabInfo.label
-          },
-          tabInfo.id
-        );
-      })
+    return nextElement;
+  }, [getFocusableElements]);
+  const focusNext = useCallback13(() => {
+    const nextElement = getNextFocusElement();
+    nextElement?.focus();
+  }, [getNextFocusElement]);
+  const getPreviousFocusElement = useCallback13(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
     }
-  );
-}
-function TabView({ ...props }) {
-  const generated = useId6();
-  const id = props.id ?? "tab-view-" + generated;
-  const { portal } = useTabContext();
-  const { setPortal } = portal;
-  const ref = useRef14(null);
-  useEffect16(() => {
-    setPortal({ id, ref });
-    return () => setPortal(null);
-  }, [id, setPortal]);
-  return /* @__PURE__ */ jsx25(
-    "div",
-    {
-      ...props,
-      ref,
-      id,
-      className: clsx7("tab-view", props.className)
+    let previousElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      if (currentIndex === 0) {
+        previousElement = elements[elements.length - 1];
+      } else {
+        previousElement = elements[currentIndex - 1];
+      }
     }
-  );
+    return previousElement;
+  }, [getFocusableElements]);
+  const focusPrevious = useCallback13(() => {
+    const previousElement = getPreviousFocusElement();
+    if (previousElement) previousElement.focus();
+  }, [getPreviousFocusElement]);
+  return {
+    getFocusableElements,
+    getNextFocusElement,
+    getPreviousFocusElement,
+    focusNext,
+    focusPrevious
+  };
 }
-function TabPanel({ label, forceMount = false, disabled = false, ...props }) {
-  const { tabs, portal } = useTabContext();
-  const { subscribe, activeId } = tabs;
-  const generatedId = useId6();
-  const id = props.id ?? "tab-panel-" + generatedId;
-  const labelId = "tab-list-button-" + generatedId;
-  const ref = useRef14(null);
-  useEffect16(() => {
-    return subscribe({ id, label, labelId, disabled, ref });
-  }, [id, label, labelId, disabled, subscribe]);
-  const isActive = activeId === id;
-  const content = /* @__PURE__ */ jsx25(
-    "div",
-    {
-      ...props,
-      ref,
-      id,
-      hidden: !isActive,
-      "data-name": props["data-name"] ?? "tab-panel",
-      "data-disabled": PropsUtil.dataAttributes.bool(disabled),
-      role: "tabpanel",
-      "aria-labelledby": labelId,
-      children: /* @__PURE__ */ jsx25(Visibility, { isVisible: isActive || forceMount, children: props.children })
+
+// src/hooks/focus/useFocusOnceVisible.ts
+import React3, { useEffect as useEffect17 } from "react";
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = React3.useState(false);
+  useEffect17(() => {
+    if (disable || hasUsedFocus) {
+      return;
     }
-  );
-  if (portal.element) {
-    return createPortal2(content, portal.element);
-  }
-  return content;
-}
-
-// src/components/layout/TextImage.tsx
-import clsx8 from "clsx";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var TextImage = ({
-  title,
-  description,
-  imageUrl,
-  onShowMoreClicked,
-  color = "primary",
-  badge,
-  contentClassName = "",
-  className = ""
-}) => {
-  const translation = useHightideTranslation();
-  const chipColorMapping = {
-    primary: "text-text-image-primary-background bg-text-image-primary-text",
-    secondary: "text-text-image-secondary-background bg-text-image-secondary-text",
-    dark: "text-text-image-dark-background bg-text-image-dark-text"
-  };
-  const colorMapping = {
-    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
-    secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
-    dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
-  };
-  return /* @__PURE__ */ jsx26(
-    "div",
-    {
-      className: clsx8("rounded-2xl w-full", className),
-      style: {
-        backgroundImage: `url(${imageUrl})`,
-        backgroundSize: "cover"
-      },
-      children: /* @__PURE__ */ jsxs12(
-        "div",
-        {
-          className: clsx8(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
-          children: [
-            badge && /* @__PURE__ */ jsx26("div", { className: clsx8(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx26("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex-col-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsx26("span", { className: "typography-title-lg", children: title }),
-              /* @__PURE__ */ jsx26("span", { className: "text-ellipsis overflow-hidden", children: description })
-            ] }),
-            onShowMoreClicked && /* @__PURE__ */ jsx26("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx26(
-              Button,
-              {
-                color: "neutral",
-                coloringStyle: "text",
-                onClick: onShowMoreClicked,
-                children: translation("showMore")
-              }
-            ) })
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/components/layout/VerticalDivider.tsx
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
-var VerticalDivider = ({
-  width = 1,
-  height = 100,
-  strokeWidth = 4,
-  dashGap = 4,
-  dashLength = 4
-}) => {
-  return /* @__PURE__ */ jsx27("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs13(
-    "svg",
-    {
-      width,
-      height,
-      viewBox: `0 0 ${width} ${height}`,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx27(
-          "line",
-          {
-            opacity: "0.5",
-            x1: width / 2,
-            y1: height,
-            x2: width / 2,
-            y2: "0",
-            stroke: "url(#paint_linear)",
-            strokeWidth,
-            strokeDasharray: `${dashLength} ${dashLength + dashGap}`,
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx27("defs", { children: /* @__PURE__ */ jsxs13(
-          "linearGradient",
-          {
-            id: "paint_linear",
-            x1: width / 2,
-            y1: "0",
-            x2: width / 2,
-            y2: height,
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ jsx27("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx27("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx27("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
-            ]
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-
-// src/components/layout/dialog/Dialog.tsx
-import { forwardRef as forwardRef10, useCallback as useCallback16, useContext as useContext10, useId as useId8, useImperativeHandle as useImperativeHandle6, useMemo as useMemo13, useRef as useRef18 } from "react";
-import { X } from "lucide-react";
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !hasUsedFocus) {
+        ref.current?.focus();
+        setHasUsedFocus(hasUsedFocus);
+      }
+    }, {
+      threshold: 0.1
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [disable, hasUsedFocus, ref]);
+};
 
 // src/hooks/focus/useFocusTrap.ts
-import { useCallback as useCallback14, useEffect as useEffect17, useId as useId7, useRef as useRef15, useState as useState16 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect18, useId as useId6, useRef as useRef14, useState as useState15 } from "react";
 var createFocusGuard = () => {
   const div = document.createElement("div");
   Object.assign(div.style, {
@@ -11443,9 +11272,9 @@ var useFocusTrap = ({
   active,
   initialFocus
 }) => {
-  const lastFocusRef = useRef15(null);
-  const [paused, setPaused] = useState16(false);
-  const id = useId7();
+  const lastFocusRef = useRef14(null);
+  const [paused, setPaused] = useState15(false);
+  const id = useId6();
   const focusElement = useCallback14(() => {
     const containerElement = container.current;
     if (initialFocus?.current) {
@@ -11460,7 +11289,7 @@ var useFocusTrap = ({
       }
     }
   }, [container, initialFocus]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (active) {
       let pause = function() {
         setPaused(true);
@@ -11485,7 +11314,7 @@ var useFocusTrap = ({
       };
     }
   }, [active, container, focusElement, id, initialFocus]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (active && !paused) {
       let onKeyDown = function(event) {
         const key = event.key;
@@ -11512,40 +11341,152 @@ var useFocusTrap = ({
   }, [active, paused, container, initialFocus, focusElement]);
 };
 
-// src/components/utils/FocusTrap.tsx
-import { useRef as useRef16 } from "react";
-import { useImperativeHandle as useImperativeHandle5 } from "react";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var FocusTrap = ({ children, ...props }) => {
-  useFocusTrap({
-    ...props
+// src/hooks/focus/useIsMounted.ts
+import { useEffect as useEffect19, useLayoutEffect as useLayoutEffect6, useState as useState16 } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect6 : useEffect19;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState16(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useDelay.ts
+import { useEffect as useEffect20, useState as useState17 } from "react";
+var defaultOptions2 = {
+  delay: 3e3,
+  disabled: false
+};
+function useDelay(options) {
+  const [timer, setTimer] = useState17(void 0);
+  const { delay, disabled } = {
+    ...defaultOptions2,
+    ...options
+  };
+  const clearTimer = () => {
+    clearTimeout(timer);
+    setTimer(void 0);
+  };
+  const restartTimer = (onDelayFinish) => {
+    if (disabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setTimer(setTimeout(() => {
+      onDelayFinish();
+      setTimer(void 0);
+    }, delay));
+  };
+  useEffect20(() => {
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [timer]);
+  useEffect20(() => {
+    if (disabled) {
+      clearTimeout(timer);
+      setTimer(void 0);
+    }
+  }, [disabled, timer]);
+  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
+}
+
+// src/hooks/useHandleRefs.ts
+import { useEffect as useEffect21, useRef as useRef15 } from "react";
+function useHandleRefs(handleRef) {
+  const refs = useRef15([]);
+  useEffect21(() => {
+    refs.current = Object.keys(handleRef?.current ?? {}).map(
+      () => ({ current: null })
+    );
+    const values = Object.values(handleRef?.current ?? {});
+    values.forEach((el, i) => {
+      refs.current[i].current = el;
+    });
   });
-  return children;
+  return refs.current;
+}
+
+// src/hooks/useLogUnstableDependencies.ts
+import React4 from "react";
+function useLogUnstableDependencies(name, value) {
+  const prev = React4.useRef(null);
+  React4.useEffect(() => {
+    if (!prev.current) {
+      prev.current = value;
+      return;
+    }
+    const changes = {};
+    for (const key of Object.keys(value)) {
+      if (prev.current[key] !== value[key]) {
+        changes[key] = {
+          prev: prev.current[key],
+          next: value[key]
+        };
+      }
+    }
+    if (Object.keys(changes).length > 0) {
+      console.info(`[${name}] changed`, changes);
+    }
+    prev.current = value;
+  });
+}
+
+// src/hooks/useOutsideClick.ts
+import { useEffect as useEffect22 } from "react";
+var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
+  useEffect22(() => {
+    if (!active) return;
+    const listener = (event) => {
+      if (event.target === null) return;
+      if (refs.some((ref) => ref.current && ref.current.contains(event.target))) {
+        return;
+      }
+      onOutsideClick(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    document.addEventListener("pointerdown", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+      document.removeEventListener("pointerdown", listener);
+    };
+  }, [refs, onOutsideClick, active]);
+};
+
+// src/hooks/useOverwritableState.ts
+import { useEffect as useEffect23, useState as useState18 } from "react";
+var useOverwritableState = (overwriteValue, onChange) => {
+  const [state, setState] = useState18(overwriteValue);
+  useEffect23(() => {
+    setState(overwriteValue);
+  }, [overwriteValue]);
+  const onChangeWrapper = (action) => {
+    const resolved = resolveSetState(action, state);
+    setState(resolved);
+    onChange?.(resolved);
+  };
+  return [state, onChangeWrapper];
 };
-var FocusTrapWrapper = forwardRef9(function FocusTrap2({
-  active,
-  initialFocus,
-  ...props
-}, forwardedRef) {
-  const innerRef = useRef16(null);
-  useImperativeHandle5(forwardedRef, () => innerRef.current);
-  useFocusTrap({ container: innerRef, active, initialFocus });
-  return /* @__PURE__ */ jsx28("div", { ref: innerRef, ...props });
-});
 
 // src/hooks/usePresenceRef.ts
-import { useCallback as useCallback15, useEffect as useEffect18, useRef as useRef17, useState as useState17 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect24, useRef as useRef16, useState as useState19 } from "react";
 var usePresenceRef = ({
   isOpen = true
 }) => {
-  const [isPresent, setIsPresent] = useState17(false);
-  const ref = useRef17(null);
+  const [isPresent, setIsPresent] = useState19(false);
+  const ref = useRef16(null);
   const refAssignment = useCallback15((node) => {
     ref.current = node;
     setIsPresent((prev) => prev || !!node);
   }, []);
-  useEffect18(() => {
+  useEffect24(() => {
     if (!isOpen) {
       setIsPresent(false);
     }
@@ -11557,24 +11498,752 @@ var usePresenceRef = ({
   };
 };
 
-// src/components/layout/dialog/DialogContext.tsx
-import { createContext as createContext9, useContext as useContext9 } from "react";
-var DialogContext = createContext9(null);
-function useDialogContext() {
-  const context = useContext9(DialogContext);
-  if (!context) {
-    throw new Error("useDialogContext must be used within a <DialogContext.Provider>");
-  }
-  return context;
-}
+// src/hooks/useRerender.ts
+import { useReducer as useReducer2 } from "react";
+var useRerender = () => {
+  return useReducer2(() => ({}), {})[1];
+};
 
-// src/components/layout/dialog/Dialog.tsx
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
-var Dialog = forwardRef10(function Dialog2({
-  children,
-  isOpen: isOpenOverwrite,
-  titleElement,
-  description,
+// src/hooks/useSearch.ts
+import { useCallback as useCallback16, useEffect as useEffect25, useMemo as useMemo13, useState as useState20 } from "react";
+
+// src/utils/simpleSearch.ts
+var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
+  });
+};
+var MultiSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+  });
+};
+var SimpleSearchWithMapping = (search, objects, mapping) => {
+  return MultiSearchWithMapping(search, objects, (value) => [mapping(value)]);
+};
+var SimpleSearch = (search, objects) => {
+  return SimpleSearchWithMapping(search, objects, (value) => value);
+};
+
+// src/hooks/useSearch.ts
+var useSearch = ({
+  list,
+  initialSearch,
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
+}) => {
+  const [search, setSearch] = useState20(initialSearch ?? "");
+  const [result, setResult] = useState20(list);
+  const searchTags = useMemo13(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = useCallback16((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
+  useEffect25(() => {
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = useMemo13(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = useMemo13(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = useMemo13(() => {
+    if (!disabled) {
+      return sortedAndFilteredResult;
+    }
+    return list;
+  }, [disabled, list, sortedAndFilteredResult]);
+  return {
+    result: usedResult,
+    hasResult: usedResult.length > 0,
+    allItems: list,
+    updateSearch,
+    search,
+    setSearch
+  };
+};
+
+// src/hooks/useUpdatingDateString.ts
+import { useEffect as useEffect26, useState as useState21 } from "react";
+
+// src/utils/date.ts
+var timesInSeconds = {
+  second: 1,
+  minute: 60,
+  hour: 3600,
+  day: 86400,
+  week: 604800,
+  monthImprecise: 2629800,
+  // 30.4375 days
+  yearImprecise: 31557600
+  // 365.25 days
+};
+var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var changeDuration = (date, duration, isAdding) => {
+  const {
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = duration;
+  if (years < 0) {
+    console.error(`Range error years must be greater than 0: received ${years}`);
+    return new Date(date);
+  }
+  if (months < 0 || months > 11) {
+    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
+    return new Date(date);
+  }
+  if (days < 0) {
+    console.error(`Range error days must be greater than 0: received ${days}`);
+    return new Date(date);
+  }
+  if (hours < 0 || hours > 23) {
+    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
+    return new Date(date);
+  }
+  if (minutes < 0 || minutes > 59) {
+    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
+    return new Date(date);
+  }
+  if (seconds < 0 || seconds > 59) {
+    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
+    return new Date(date);
+  }
+  if (milliseconds < 0) {
+    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
+    return new Date(date);
+  }
+  const multiplier = isAdding ? 1 : -1;
+  const newDate = new Date(date);
+  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
+  newDate.setMonth(newDate.getMonth() + multiplier * months);
+  newDate.setDate(newDate.getDate() + multiplier * days);
+  newDate.setHours(newDate.getHours() + multiplier * hours);
+  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
+  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
+  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
+  return newDate;
+};
+var addDuration = (date, duration) => {
+  return changeDuration(date, duration, true);
+};
+var subtractDuration = (date, duration) => {
+  return changeDuration(date, duration, false);
+};
+var between = (value, startDate, endDate) => {
+  if (startDate && endDate) {
+    console.assert(startDate <= endDate);
+    return startDate <= value && value <= endDate;
+  } else if (startDate) {
+    return startDate <= value;
+  } else if (endDate) {
+    return endDate >= value;
+  } else {
+    return true;
+  }
+};
+var equalDate = (date1, date2) => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const dayList = [];
+  let currentDate = new Date(year, month, 1);
+  const weekStartIndex = weekDayList.indexOf(weekStart);
+  while (currentDate.getDay() !== weekStartIndex) {
+    currentDate = subtractDuration(currentDate, { days: 1 });
+  }
+  while (dayList.length < 7 * weeks) {
+    const date2 = new Date(currentDate);
+    date2.setHours(date2.getHours(), date2.getMinutes());
+    dayList.push(date2);
+    currentDate = addDuration(currentDate, { days: 1 });
+  }
+  return equalSizeGroups(dayList, 7);
+};
+var formatAbsolute = (date, locale, format) => {
+  let options;
+  switch (format) {
+    case "date":
+      options = {
+        year: "2-digit",
+        month: "2-digit",
+        day: "2-digit"
+      };
+      break;
+    case "time":
+      options = {
+        hour: "2-digit",
+        minute: "2-digit"
+      };
+      break;
+    case "dateTime":
+      options = {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit"
+      };
+      break;
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+var formatRelative = (date, locale) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
+  if (Math.abs(diffInSeconds) < timesInSeconds.minute) return rtf.format(Math.round(diffInSeconds), "second");
+  if (Math.abs(diffInSeconds) < timesInSeconds.hour) return rtf.format(Math.round(diffInSeconds / timesInSeconds.minute), "minute");
+  if (Math.abs(diffInSeconds) < timesInSeconds.day) return rtf.format(Math.round(diffInSeconds / timesInSeconds.hour), "hour");
+  if (Math.abs(diffInSeconds) < timesInSeconds.week) return rtf.format(Math.round(diffInSeconds / timesInSeconds.day), "day");
+  if (Math.abs(diffInSeconds) < timesInSeconds.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.week), "week");
+  if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
+  return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
+};
+var toInputString = (date, format) => {
+  switch (format) {
+    case "date":
+      return date.toISOString().split("T")[0];
+    case "time":
+      return date.toISOString().split("T")[1].split("Z")[0];
+    case "dateTime":
+      return date.toISOString();
+  }
+};
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  formatAbsolute,
+  formatRelative,
+  addDuration,
+  subtractDuration,
+  between,
+  weeksForCalenderMonth,
+  timesInSeconds,
+  toInputString
+};
+
+// src/hooks/useUpdatingDateString.ts
+var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
+  const { locale: contextLocale } = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState21({
+    compareDate: date,
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    relative: DateUtils.formatRelative(date, locale)
+  });
+  useEffect26(() => {
+    setDateAndTimeStrings({
+      compareDate: date,
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      relative: DateUtils.formatRelative(date, locale)
+    });
+  }, [date, absoluteFormat, locale]);
+  useEffect26(() => {
+    let timeoutId;
+    const startTimer = () => {
+      const now = /* @__PURE__ */ new Date();
+      const diff = Math.abs((date.getTime() - now.getTime()) / 1e3);
+      let delayInSeconds;
+      if (diff < DateUtils.timesInSeconds.minute) {
+        delayInSeconds = DateUtils.timesInSeconds.second;
+      } else if (diff < DateUtils.timesInSeconds.hour) {
+        delayInSeconds = DateUtils.timesInSeconds.minute;
+      } else {
+        delayInSeconds = DateUtils.timesInSeconds.hour;
+      }
+      timeoutId = setInterval(() => {
+        setDateAndTimeStrings({
+          compareDate: date,
+          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+          relative: DateUtils.formatRelative(date, locale)
+        });
+      }, delayInSeconds * 1e3 / 2);
+    };
+    startTimer();
+    return () => clearInterval(timeoutId);
+  }, [absoluteFormat, date, locale]);
+  return {
+    absolute: dateAndTimeStrings.absolute,
+    relative: dateAndTimeStrings.relative
+  };
+};
+
+// src/utils/emailValidation.ts
+var validateEmail = (email) => {
+  return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
+};
+
+// src/hooks/useValidators.ts
+import { useMemo as useMemo14 } from "react";
+var notEmpty = (value) => {
+  if (!value) {
+    return "notEmpty";
+  }
+};
+var boundsValidator = (length, bounds) => {
+  const [min, max] = bounds;
+  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
+    return "range";
+  }
+  if (min !== void 0 && (length === void 0 || length < min)) {
+    return "lower";
+  }
+  if (max !== void 0 && length !== void 0 && length > max) {
+    return "upper";
+  }
+  return "none";
+};
+var lengthValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeString",
+    lower: "tooShort",
+    upper: "tooLong",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var selectionValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeSelectionItems",
+    lower: "tooFewSelectionItems",
+    upper: "tooManySelectionItems",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var emailValidator = (value) => {
+  if (!value || !validateEmail(value)) {
+    return "invalidEmail";
+  }
+};
+var UseValidators = {
+  notEmpty,
+  length: lengthValidator,
+  email: emailValidator,
+  selection: selectionValidator
+};
+var useTranslatedValidators = () => {
+  const translation = useHightideTranslation();
+  return useMemo14(() => ({
+    notEmpty: (value) => {
+      const result = notEmpty(value);
+      if (result) {
+        return translation(result);
+      }
+    },
+    length: (value, length) => {
+      const [min, max] = length;
+      const result = lengthValidator(value, length);
+      if (result) {
+        return translation(result, { min, max });
+      }
+    },
+    email: (value) => {
+      const result = emailValidator(value ?? "");
+      if (result) {
+        return translation(result);
+      }
+    },
+    selection: (value, length) => {
+      const [min, max] = length;
+      const result = selectionValidator(value, length);
+      if (result) {
+        return translation(
+          result,
+          { min, max }
+        );
+      }
+    }
+  }), [translation]);
+};
+
+// src/components/layout/TabSwitcher.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function sortByDomOrder(infos) {
+  return infos.slice().sort((a, b) => {
+    const elA = a.ref.current;
+    const elB = b.ref.current;
+    if (!elA && !elB) return 0;
+    if (!elA) return 1;
+    if (!elB) return -1;
+    return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+  });
+}
+var TabContext = createContext8(null);
+function useTabContext() {
+  const context = useContext8(TabContext);
+  if (!context) throw new Error("useTabContext must be used inside a <TabView>");
+  return context;
+}
+function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange, initialActiveId }) {
+  const [activeId, setActiveId] = useControlledState({
+    value: controlledActiveId,
+    defaultValue: initialActiveId ?? null,
+    onValueChange: onActiveIdChange
+  });
+  const [tabInfos, setTabInfos] = useState22([]);
+  const [portalState, setPortalState] = useState22(null);
+  const subscribe = useCallback17((info) => {
+    const id = info.id;
+    setTabInfos((prevState) => {
+      const existingIndex = prevState.findIndex((t) => t.id === id);
+      const infos = existingIndex >= 0 ? prevState.map((t, i) => i === existingIndex ? { ...t, ...info } : t) : [...prevState, info];
+      return sortByDomOrder(infos);
+    });
+    return () => {
+      setTabInfos((prevState) => {
+        return prevState.filter((t) => t.id !== id);
+      });
+    };
+  }, []);
+  useEffect27(() => {
+    const active = tabInfos.find((value) => value.id === activeId);
+    if (!active || !active.disabled) return;
+    const firstEnabled = tabInfos.find((value) => !value.disabled);
+    if (firstEnabled) {
+      setActiveId(firstEnabled.id);
+    } else {
+      setActiveId(null);
+    }
+  }, [activeId, setActiveId, tabInfos]);
+  const registerPortal = useCallback17((state) => {
+    setPortalState(state);
+  }, []);
+  const changeActiveId = useCallback17((activeId2) => {
+    const info = tabInfos.find((value) => value.id === activeId2);
+    if (info && info.disabled) return;
+    setActiveId(activeId2);
+  }, [setActiveId, tabInfos]);
+  const resolvedActiveId = () => {
+    const active = tabInfos.find((value) => value.id === activeId);
+    if (!!active && !active.disabled) return activeId;
+    const firstEnabled = tabInfos.find((value) => !value.disabled);
+    if (firstEnabled) return firstEnabled.id;
+    return tabInfos[0]?.id ?? null;
+  };
+  return /* @__PURE__ */ jsx25(
+    TabContext.Provider,
+    {
+      value: {
+        tabs: {
+          activeId: resolvedActiveId(),
+          setActiveId: changeActiveId,
+          subscribe,
+          infos: tabInfos
+        },
+        portal: {
+          id: portalState?.id ?? null,
+          element: portalState?.ref.current ?? null,
+          setPortal: registerPortal
+        }
+      },
+      children
+    }
+  );
+}
+function TabList({ ...props }) {
+  const { tabs } = useTabContext();
+  const { infos, activeId, setActiveId: setActive } = tabs;
+  const refs = useRef17({});
+  const onKeyDown = (e) => {
+    const idx = infos.findIndex((tab) => tab.id === activeId);
+    if (idx === -1) return;
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+    let nextIdx = idx;
+    for (let i = 0; i < infos.length; i++) {
+      nextIdx = (nextIdx + step + infos.length) % infos.length;
+      if (!infos[nextIdx].disabled) break;
+    }
+    if (infos[nextIdx].disabled) return;
+    const nextId = infos[nextIdx].id;
+    setActive(nextId);
+    refs.current[nextId]?.focus();
+  };
+  return /* @__PURE__ */ jsx25(
+    "ul",
+    {
+      ...props,
+      "data-name": props["data-name"] ?? "tab-list",
+      onKeyDown,
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      style: { "--tab-count": infos.length, ...props.style },
+      children: infos.map((tabInfo) => {
+        const isDisabled = !!tabInfo.disabled;
+        const isActive = activeId === tabInfo.id;
+        return /* @__PURE__ */ jsx25(
+          "li",
+          {
+            ref: (el) => {
+              refs.current[tabInfo.id] = el;
+            },
+            id: tabInfo.labelId,
+            ...isDisabled ? {} : PropsUtil.aria.click(() => setActive(tabInfo.id)),
+            "data-name": "tab-list-item",
+            "data-active": PropsUtil.dataAttributes.bool(isActive),
+            "data-disabled": PropsUtil.dataAttributes.bool(isDisabled),
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-disabled": isDisabled,
+            "aria-controls": tabInfo.id,
+            tabIndex: isActive && !isDisabled ? 0 : -1,
+            children: tabInfo.label
+          },
+          tabInfo.id
+        );
+      })
+    }
+  );
+}
+function TabView({ ...props }) {
+  const generated = useId7();
+  const id = props.id ?? "tab-view-" + generated;
+  const { portal } = useTabContext();
+  const { setPortal } = portal;
+  const ref = useRef17(null);
+  useEffect27(() => {
+    setPortal({ id, ref });
+    return () => setPortal(null);
+  }, [id, setPortal]);
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      ...props,
+      ref,
+      id,
+      className: clsx7("tab-view", props.className)
+    }
+  );
+}
+function TabPanel({ label, forceMount = false, disabled = false, initiallyActive = false, ...props }) {
+  const { tabs, portal } = useTabContext();
+  const { subscribe, activeId, setActiveId } = tabs;
+  const generatedId = useId7();
+  const id = props.id ?? "tab-panel-" + generatedId;
+  const labelId = "tab-list-button-" + generatedId;
+  const ref = useRef17(null);
+  useEffect27(() => {
+    return subscribe({ id, label, labelId, disabled, ref });
+  }, [id, label, labelId, disabled, subscribe]);
+  const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = useState22(false);
+  useEffect27(() => {
+    if (!hasAnnouncedIntialliyActive) {
+      if (initiallyActive) {
+        setActiveId(id);
+      }
+      setHasAnnouncedIntialliyActive(true);
+    }
+  }, [hasAnnouncedIntialliyActive, id, initiallyActive, setActiveId]);
+  const isActive = activeId === id;
+  const content = /* @__PURE__ */ jsx25(
+    "div",
+    {
+      ...props,
+      ref,
+      id,
+      hidden: !isActive,
+      "data-name": props["data-name"] ?? "tab-panel",
+      "data-disabled": PropsUtil.dataAttributes.bool(disabled),
+      role: "tabpanel",
+      "aria-labelledby": labelId,
+      children: /* @__PURE__ */ jsx25(Visibility, { isVisible: isActive || forceMount, children: props.children })
+    }
+  );
+  if (portal.element) {
+    return createPortal2(content, portal.element);
+  }
+  return content;
+}
+
+// src/components/layout/TextImage.tsx
+import clsx8 from "clsx";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var TextImage = ({
+  title,
+  description,
+  imageUrl,
+  onShowMoreClicked,
+  color = "primary",
+  badge,
+  contentClassName = "",
+  className = ""
+}) => {
+  const translation = useHightideTranslation();
+  const chipColorMapping = {
+    primary: "text-text-image-primary-background bg-text-image-primary-text",
+    secondary: "text-text-image-secondary-background bg-text-image-secondary-text",
+    dark: "text-text-image-dark-background bg-text-image-dark-text"
+  };
+  const colorMapping = {
+    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
+    secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
+    dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
+  };
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      className: clsx8("rounded-2xl w-full", className),
+      style: {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover"
+      },
+      children: /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          className: clsx8(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          children: [
+            badge && /* @__PURE__ */ jsx26("div", { className: clsx8(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx26("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ jsxs12("div", { className: "flex-col-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx26("span", { className: "typography-title-lg", children: title }),
+              /* @__PURE__ */ jsx26("span", { className: "text-ellipsis overflow-hidden", children: description })
+            ] }),
+            onShowMoreClicked && /* @__PURE__ */ jsx26("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx26(
+              Button,
+              {
+                color: "neutral",
+                coloringStyle: "text",
+                onClick: onShowMoreClicked,
+                children: translation("showMore")
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/layout/VerticalDivider.tsx
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+var VerticalDivider = ({
+  width = 1,
+  height = 100,
+  strokeWidth = 4,
+  dashGap = 4,
+  dashLength = 4
+}) => {
+  return /* @__PURE__ */ jsx27("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs13(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx27(
+          "line",
+          {
+            opacity: "0.5",
+            x1: width / 2,
+            y1: height,
+            x2: width / 2,
+            y2: "0",
+            stroke: "url(#paint_linear)",
+            strokeWidth,
+            strokeDasharray: `${dashLength} ${dashLength + dashGap}`,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx27("defs", { children: /* @__PURE__ */ jsxs13(
+          "linearGradient",
+          {
+            id: "paint_linear",
+            x1: width / 2,
+            y1: "0",
+            x2: width / 2,
+            y2: height,
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx27("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx27("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx27("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+// src/components/layout/dialog/Dialog.tsx
+import { forwardRef as forwardRef10, useCallback as useCallback18, useContext as useContext10, useId as useId8, useImperativeHandle as useImperativeHandle6, useMemo as useMemo15, useRef as useRef19 } from "react";
+import { X } from "lucide-react";
+
+// src/components/utils/FocusTrap.tsx
+import { useRef as useRef18 } from "react";
+import { useImperativeHandle as useImperativeHandle5 } from "react";
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var FocusTrap = ({ children, ...props }) => {
+  useFocusTrap({
+    ...props
+  });
+  return children;
+};
+var FocusTrapWrapper = forwardRef9(function FocusTrap2({
+  active,
+  initialFocus,
+  ...props
+}, forwardedRef) {
+  const innerRef = useRef18(null);
+  useImperativeHandle5(forwardedRef, () => innerRef.current);
+  useFocusTrap({ container: innerRef, active, initialFocus });
+  return /* @__PURE__ */ jsx28("div", { ref: innerRef, ...props });
+});
+
+// src/components/layout/dialog/DialogContext.tsx
+import { createContext as createContext9, useContext as useContext9 } from "react";
+var DialogContext = createContext9(null);
+function useDialogContext() {
+  const context = useContext9(DialogContext);
+  if (!context) {
+    throw new Error("useDialogContext must be used within a <DialogContext.Provider>");
+  }
+  return context;
+}
+
+// src/components/layout/dialog/Dialog.tsx
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+var Dialog = forwardRef10(function Dialog2({
+  children,
+  isOpen: isOpenOverwrite,
+  titleElement,
+  description,
   isModal: isModalOverwrite = true,
   onClose,
   backgroundClassName,
@@ -11584,14 +12253,14 @@ var Dialog = forwardRef10(function Dialog2({
 }, forwardedRef) {
   const translation = useHightideTranslation();
   const generatedId = useId8();
-  const ids = useMemo13(() => ({
+  const ids = useMemo15(() => ({
     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 = useRef18(null);
+  const containerRef = useRef19(null);
   const context = useContext10(DialogContext);
   const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
   const isModal = isModalOverwrite ?? context?.isModal ?? true;
@@ -11600,7 +12269,7 @@ var Dialog = forwardRef10(function Dialog2({
   });
   useImperativeHandle6(forwardedRef, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
-  const onCloseWrapper = useCallback16(() => {
+  const onCloseWrapper = useCallback18(() => {
     if (!isModal) return;
     onCloseStable();
     context?.setIsOpen(false);
@@ -11684,10 +12353,10 @@ var Dialog = forwardRef10(function Dialog2({
 });
 
 // src/components/layout/dialog/DialogOpener.tsx
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo16 } from "react";
 function DialogOpenerWrapper({ children }) {
   const context = useDialogContext();
-  const bag = useMemo14(() => ({
+  const bag = useMemo16(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -11788,117 +12457,18 @@ var DiscardChangesDialog = ({
     {
       ...props,
       titleElement: titleOverwrite ?? translation("unsavedChanges"),
-      description: descriptionOverwrite ?? translation("unsavedChangesSaveQuestion"),
-      onConfirm: onSave,
-      onCancel,
-      onDecline: onDontSave,
-      buttonOverwrites: [{ text: translation("cancel") }, { text: translation("discardChanges") }, { text: translation("save") }],
-      children
-    }
-  );
-};
-
-// src/components/user-interaction/input/Input.tsx
-import { forwardRef as forwardRef11, useImperativeHandle as useImperativeHandle7, useRef as useRef19 } from "react";
-
-// src/hooks/useDelay.ts
-import { useEffect as useEffect19, useState as useState18 } from "react";
-var defaultOptions2 = {
-  delay: 3e3,
-  disabled: false
-};
-function useDelay(options) {
-  const [timer, setTimer] = useState18(void 0);
-  const { delay, disabled } = {
-    ...defaultOptions2,
-    ...options
-  };
-  const clearTimer = () => {
-    clearTimeout(timer);
-    setTimer(void 0);
-  };
-  const restartTimer = (onDelayFinish) => {
-    if (disabled) {
-      return;
-    }
-    clearTimeout(timer);
-    setTimer(setTimeout(() => {
-      onDelayFinish();
-      setTimer(void 0);
-    }, delay));
-  };
-  useEffect19(() => {
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [timer]);
-  useEffect19(() => {
-    if (disabled) {
-      clearTimeout(timer);
-      setTimer(void 0);
-    }
-  }, [disabled, timer]);
-  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
-}
-
-// src/hooks/focus/useFocusManagement.ts
-import { useCallback as useCallback17 } from "react";
-function useFocusManagement() {
-  const getFocusableElements = useCallback17(() => {
-    return Array.from(
-      document.querySelectorAll(
-        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
-      )
-    ).filter(
-      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
-    );
-  }, []);
-  const getNextFocusElement = useCallback17(() => {
-    const elements = getFocusableElements();
-    if (elements.length === 0) {
-      return void 0;
-    }
-    let nextElement = elements[0];
-    if (document.activeElement instanceof HTMLElement) {
-      const currentIndex = elements.indexOf(document.activeElement);
-      nextElement = elements[(currentIndex + 1) % elements.length];
-    }
-    return nextElement;
-  }, [getFocusableElements]);
-  const focusNext = useCallback17(() => {
-    const nextElement = getNextFocusElement();
-    nextElement?.focus();
-  }, [getNextFocusElement]);
-  const getPreviousFocusElement = useCallback17(() => {
-    const elements = getFocusableElements();
-    if (elements.length === 0) {
-      return void 0;
-    }
-    let previousElement = elements[0];
-    if (document.activeElement instanceof HTMLElement) {
-      const currentIndex = elements.indexOf(document.activeElement);
-      if (currentIndex === 0) {
-        previousElement = elements[elements.length - 1];
-      } else {
-        previousElement = elements[currentIndex - 1];
-      }
+      description: descriptionOverwrite ?? translation("unsavedChangesSaveQuestion"),
+      onConfirm: onSave,
+      onCancel,
+      onDecline: onDontSave,
+      buttonOverwrites: [{ text: translation("cancel") }, { text: translation("discardChanges") }, { text: translation("save") }],
+      children
     }
-    return previousElement;
-  }, [getFocusableElements]);
-  const focusPrevious = useCallback17(() => {
-    const previousElement = getPreviousFocusElement();
-    if (previousElement) previousElement.focus();
-  }, [getPreviousFocusElement]);
-  return {
-    getFocusableElements,
-    getNextFocusElement,
-    getPreviousFocusElement,
-    focusNext,
-    focusPrevious
-  };
-}
+  );
+};
 
 // src/components/user-interaction/input/Input.tsx
+import { forwardRef as forwardRef11, useImperativeHandle as useImperativeHandle7, useRef as useRef20 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var defaultEditCompleteOptions = {
   allowEnterComplete: false,
@@ -11930,7 +12500,7 @@ var Input = forwardRef11(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = useRef19(null);
+  const innerRef = useRef20(null);
   useImperativeHandle7(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ jsx33(
@@ -11998,7 +12568,7 @@ import {
 } from "react";
 
 // src/components/user-interaction/select/SelectContext.tsx
-import { createContext as createContext10, useCallback as useCallback18, useContext as useContext11, useEffect as useEffect20, useId as useId9, useMemo as useMemo15, useRef as useRef20, useState as useState19 } from "react";
+import { createContext as createContext10, useCallback as useCallback19, useContext as useContext11, useEffect as useEffect28, useId as useId9, useMemo as useMemo17, useRef as useRef21, useState as useState23 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var defaultToggleOpenOptions = {
   highlightStartPositionBehavior: "first"
@@ -12039,21 +12609,21 @@ var PrimitveSelectRoot = ({
     onValueChange: onValuesChange,
     defaultValue: initialValues ?? []
   });
-  const triggerRef = useRef20(null);
+  const triggerRef = useRef21(null);
   const generatedId = useId9();
-  const [ids, setIds] = useState19({
+  const [ids, setIds] = useState23({
     trigger: id ?? (isMultiSelect ? "multi-select-" + generatedId : "select-" + generatedId),
     content: isMultiSelect ? "multi-select-content-" + generatedId : "select-content-" + generatedId
   });
-  const [internalState, setInternalState] = useState19({
+  const [internalState, setInternalState] = useState23({
     isOpen: initialIsOpen,
     options: []
   });
-  const selectedValues = useMemo15(
+  const selectedValues = useMemo17(
     () => isMultiSelect ? values ?? [] : [value].filter(Boolean),
     [isMultiSelect, value, values]
   );
-  const selectedOptions = useMemo15(
+  const selectedOptions = useMemo17(
     () => selectedValues.map((value2) => internalState.options.find((option) => value2 === option.value)).filter(Boolean),
     [selectedValues, internalState.options]
   );
@@ -12070,7 +12640,7 @@ var PrimitveSelectRoot = ({
     isMultiSelect,
     iconAppearance
   };
-  const registerItem = useCallback18((item) => {
+  const registerItem = useCallback19((item) => {
     setInternalState((prev) => {
       const updatedOptions = [...prev.options, item];
       updatedOptions.sort((a, b) => {
@@ -12085,7 +12655,7 @@ var PrimitveSelectRoot = ({
       };
     });
   }, []);
-  const unregisterItem = useCallback18((value2) => {
+  const unregisterItem = useCallback19((value2) => {
     setInternalState((prev) => {
       const updatedOptions = prev.options.filter((i) => i.value !== value2);
       return {
@@ -12134,10 +12704,10 @@ var PrimitveSelectRoot = ({
       highlightedValue: value2
     }));
   };
-  const registerTrigger = useCallback18((ref) => {
+  const registerTrigger = useCallback19((ref) => {
     triggerRef.current = ref.current;
   }, []);
-  const unregisterTrigger = useCallback18(() => {
+  const unregisterTrigger = useCallback19(() => {
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen, toggleOpenOptions) => {
@@ -12187,7 +12757,7 @@ var PrimitveSelectRoot = ({
       highlightedValue
     }));
   };
-  useEffect20(() => {
+  useEffect28(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = internalState.options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -12251,35 +12821,12 @@ var MultiSelectRoot = ({ value, onValueChange, initialValue, onEditComplete, ...
 };
 
 // src/components/user-interaction/select/SelectComponents.tsx
-import { forwardRef as forwardRef13, useEffect as useEffect22, useImperativeHandle as useImperativeHandle9, useRef as useRef21 } from "react";
+import { forwardRef as forwardRef13, useEffect as useEffect29, useImperativeHandle as useImperativeHandle9, useRef as useRef22 } from "react";
 import clsx10 from "clsx";
 import { CheckIcon } from "lucide-react";
 
 // src/components/layout/popup/PopUp.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback19, useContext as useContext13, useImperativeHandle as useImperativeHandle8, useMemo as useMemo16 } from "react";
-
-// src/hooks/useOutsideClick.ts
-import { useEffect as useEffect21 } from "react";
-var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
-  useEffect21(() => {
-    if (!active) return;
-    const listener = (event) => {
-      if (event.target === null) return;
-      if (refs.some((ref) => ref.current && ref.current.contains(event.target))) {
-        return;
-      }
-      onOutsideClick(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    document.addEventListener("pointerdown", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [refs, onOutsideClick, active]);
-};
+import { forwardRef as forwardRef12, useCallback as useCallback20, useContext as useContext13, useImperativeHandle as useImperativeHandle8, useMemo as useMemo18 } from "react";
 
 // src/components/layout/popup/PopUpContext.tsx
 import { createContext as createContext11, useContext as useContext12 } from "react";
@@ -12314,13 +12861,13 @@ var PopUp = forwardRef12(function PopUp2({
   useImperativeHandle8(forwardRef23, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
-  const onCloseWrapper = useCallback19(() => {
+  const onCloseWrapper = useCallback20(() => {
     onCloseStable();
     context?.setIsOpen(false);
   }, [onCloseStable, context]);
-  const { zIndex, isInFront } = useOverlayRegistry({ isActive: isOpen, tags: useMemo16(() => ["popup"], []) });
+  const { zIndex, isInFront } = useOverlayRegistry({ isActive: isOpen, tags: useMemo18(() => ["popup"], []) });
   useOutsideClick({
-    onOutsideClick: useCallback19((event) => {
+    onOutsideClick: useCallback20((event) => {
       event.preventDefault();
       onCloseWrapper();
       onOutsideClickStable(event);
@@ -12362,10 +12909,10 @@ var SelectOption = forwardRef13(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = useRef21(null);
+    const itemRef = useRef22(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect22(() => {
+    useEffect29(() => {
       register({
         value,
         label,
@@ -12445,7 +12992,7 @@ var SelectButton = forwardRef13(function SelectButton2({
   const translation = useHightideTranslation();
   const { state, trigger, setIds, ids } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  useEffect22(() => {
+  useEffect29(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -12453,9 +13000,9 @@ var SelectButton = forwardRef13(function SelectButton2({
       }));
     }
   }, [id, setIds]);
-  const innerRef = useRef21(null);
+  const innerRef = useRef22(null);
   useImperativeHandle9(ref, () => innerRef.current);
-  useEffect22(() => {
+  useEffect29(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -12513,10 +13060,10 @@ var SelectContent = forwardRef13(function SelectContent2({
   options,
   ...props
 }, ref) {
-  const innerRef = useRef21(null);
+  const innerRef = useRef22(null);
   useImperativeHandle9(ref, () => innerRef.current);
   const { trigger, state, config, item, ids, setIds } = useSelectContext();
-  useEffect22(() => {
+  useEffect29(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -12661,7 +13208,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx12 from "clsx";
 
 // src/global-contexts/ThemeContext.tsx
-import { createContext as createContext12, useCallback as useCallback20, useContext as useContext14, useEffect as useEffect23, useMemo as useMemo17, useState as useState20 } from "react";
+import { createContext as createContext12, useCallback as useCallback21, useContext as useContext14, useEffect as useEffect30, useMemo as useMemo19, useState as useState24 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
@@ -12675,8 +13222,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     deleteValue: deleteStoredTheme
   } = useStorage({ key: "theme", defaultValue: "system" });
   const { config } = useHightideConfig();
-  const [themePreference, setThemePreference] = useState20("system");
-  const resolvedTheme = useMemo17(() => {
+  const [themePreference, setThemePreference] = useState24("system");
+  const resolvedTheme = useMemo19(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -12688,7 +13235,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  useEffect23(() => {
+  useEffect30(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -12696,18 +13243,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme, deleteStoredTheme, setStoredTheme]);
-  useEffect23(() => {
+  useEffect30(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = useCallback20(() => {
+  const getPreference = useCallback21(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect23(() => {
+  useEffect30(() => {
     getPreference();
   }, [getPreference]);
-  useEffect23(() => {
+  useEffect30(() => {
     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)");
@@ -12810,7 +13357,7 @@ var ThemeDialog = ({
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/layout/drawer/DrawerContent.tsx
-import { forwardRef as forwardRef15, useId as useId10, useImperativeHandle as useImperativeHandle10, useMemo as useMemo18, useRef as useRef22 } from "react";
+import { forwardRef as forwardRef15, useId as useId10, useImperativeHandle as useImperativeHandle10, useMemo as useMemo20, useRef as useRef23 } from "react";
 
 // src/components/layout/drawer/DrawerContext.tsx
 import { createContext as createContext13, useContext as useContext15 } from "react";
@@ -12835,12 +13382,12 @@ var DrawerContent = forwardRef15(function DrawerContent2({
 }, forwardedRef) {
   const { isOpen } = useDrawerContext();
   const generatedId = useId10();
-  const ids = useMemo18(() => ({
+  const ids = useMemo20(() => ({
     container: `dialog-container-${generatedId}`,
     background: `dialog-background-${generatedId}`,
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
-  const ref = useRef22(null);
+  const ref = useRef23(null);
   useImperativeHandle10(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
@@ -12849,7 +13396,7 @@ var DrawerContent = forwardRef15(function DrawerContent2({
   });
   const { zIndex, tagPositions, tagItemCounts } = useOverlayRegistry({
     isActive: isVisible,
-    tags: useMemo18(() => ["drawer"], [])
+    tags: useMemo20(() => ["drawer"], [])
   });
   const depth = tagPositions && tagItemCounts ? (tagItemCounts["drawer"] ?? 0) - (tagPositions["drawer"] ?? 0) : 0;
   const { setOpen } = useDrawerContext();
@@ -13002,7 +13549,7 @@ var ErrorComponent = ({
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-import { useState as useState21 } from "react";
+import { useState as useState25 } from "react";
 
 // src/components/layout/loading/LoadingContainer.tsx
 import { clsx as clsx14 } from "clsx";
@@ -13023,8 +13570,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState21(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState21(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState25(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState25(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -13088,8 +13635,8 @@ var BreadCrumbs = ({ crumbs }) => {
 // src/components/layout/navigation/Navigation.tsx
 var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon } from "lucide-react";
-import { useEffect as useEffect24 } from "react";
-import { useCallback as useCallback21, useId as useId11, useRef as useRef23, useState as useState22 } from "react";
+import { useEffect as useEffect31 } from "react";
+import { useCallback as useCallback22, useId as useId11, useRef as useRef24, useState as useState26 } from "react";
 import clsx17 from "clsx";
 import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 function isSubItem(item) {
@@ -13101,9 +13648,9 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = useState22(false);
-  const containerRef = useRef23(null);
-  const triggerRef = useRef23(null);
+  const [isOpen, setOpen] = useState26(false);
+  const containerRef = useRef24(null);
+  const triggerRef = useRef24(null);
   const id = useId11();
   const style = useAnchoredPosition({
     active: isOpen,
@@ -13112,7 +13659,7 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = useCallback21((event) => {
+  const onBlur = useCallback22((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
@@ -13178,10 +13725,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
 };
 var Navigation = ({ ...props }) => {
   const translation = useHightideTranslation();
-  const [isMobileOpen, setIsMobileOpen] = useState22(false);
+  const [isMobileOpen, setIsMobileOpen] = useState26(false);
   const id = useId11();
-  const menuRef = useRef23(null);
-  useEffect24(() => {
+  const menuRef = useRef24(null);
+  useEffect31(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
@@ -13249,7 +13796,7 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 import clsx18 from "clsx";
-import { useEffect as useEffect25, useState as useState23 } from "react";
+import { useEffect as useEffect32, useState as useState27 } from "react";
 import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
@@ -13258,11 +13805,11 @@ var Pagination = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = useState23((pageIndex + 1).toString());
+  const [value, setValue] = useState27((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect25(() => {
+  useEffect32(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -13456,18 +14003,18 @@ var StepperBar = ({
 };
 
 // src/components/layout/popup/PopUpOpener.tsx
-import { useEffect as useEffect26, useMemo as useMemo19, useRef as useRef24 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo21, useRef as useRef25 } from "react";
 function PopUpOpener({ children }) {
   const context = usePopUpContext();
   const { setTriggerRef } = context;
-  const ref = useRef24(null);
-  useEffect26(() => {
+  const ref = useRef25(null);
+  useEffect33(() => {
     setTriggerRef(ref);
     return () => {
       setTriggerRef(null);
     };
   }, [setTriggerRef]);
-  const bag = useMemo19(() => ({
+  const bag = useMemo21(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -13485,7 +14032,7 @@ function PopUpOpener({ children }) {
 }
 
 // src/components/layout/popup/PopUpRoot.tsx
-import { useId as useId12, useMemo as useMemo20, useState as useState24 } from "react";
+import { useId as useId12, useMemo as useMemo22, useState as useState28 } from "react";
 import { jsx as jsx54 } from "react/jsx-runtime";
 function PopUpRoot({
   children,
@@ -13502,10 +14049,10 @@ function PopUpRoot({
     onValueChange: onIsOpenChange,
     defaultValue: initialIsOpen
   });
-  const [triggerRef, setTriggerRef] = useState24(null);
-  const popUpId = useMemo20(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
-  const triggerId = useMemo20(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
-  const contextValue = useMemo20(() => ({
+  const [triggerRef, setTriggerRef] = useState28(null);
+  const popUpId = useMemo22(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
+  const triggerId = useMemo22(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
+  const contextValue = useMemo22(() => ({
     isOpen,
     setIsOpen,
     popUpId,
@@ -13692,7 +14239,7 @@ var FillerCell = ({ ...props }) => {
 };
 
 // src/components/layout/table/TableProvider.tsx
-import { useCallback as useCallback22, useEffect as useEffect27, useLayoutEffect as useLayoutEffect6, useMemo as useMemo21, useRef as useRef25, useState as useState25 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect34, useLayoutEffect as useLayoutEffect7, useMemo as useMemo23, useRef as useRef26, useState as useState29 } from "react";
 
 // src/components/layout/table/TableContext.tsx
 import { createContext as createContext14, useContext as useContext16 } from "react";
@@ -14091,9 +14638,9 @@ var TableProvider = ({
 }) => {
   const onRowClickStable = useEventCallbackStabilizer(onRowClick);
   const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
-  const [registeredColumns, setRegisteredColumns] = useState25([]);
-  const containerRef = useRef25(null);
-  const [, setTableState] = useState25({
+  const [registeredColumns, setRegisteredColumns] = useState29([]);
+  const containerRef = useRef26(null);
+  const [, setTableState] = useState29({
     columnSizing: {},
     columnOrder: [],
     columnFilters: [],
@@ -14118,16 +14665,16 @@ var TableProvider = ({
       pageSize: 10
     }
   });
-  const [targetWidth, setTargetWidth] = useState25(void 0);
-  useLayoutEffect6(() => {
+  const [targetWidth, setTargetWidth] = useState29(void 0);
+  useLayoutEffect7(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]);
-  useWindowResizeObserver(useCallback22(() => {
+  useWindowResizeObserver(useCallback23(() => {
     const width = containerRef.current?.getBoundingClientRect().width;
     setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
   }, [containerRef]));
-  const registerColumn = useCallback22((column) => {
+  const registerColumn = useCallback23((column) => {
     setRegisteredColumns((prev) => {
       return [...prev, column];
     });
@@ -14137,7 +14684,7 @@ var TableProvider = ({
       });
     };
   }, []);
-  const columns = useMemo21(() => {
+  const columns = useMemo23(() => {
     const contextColumns = Array.from(registeredColumns.values());
     if (columnsProp) {
       return [...contextColumns, ...columnsProp];
@@ -14154,7 +14701,7 @@ var TableProvider = ({
     defaultColumn: {
       minSize: 60,
       maxSize: 800,
-      cell: useCallback22(({ cell }) => {
+      cell: useCallback23(({ cell }) => {
         return /* @__PURE__ */ jsx57(TableCell, { children: String(cell.getValue()) });
       }, []),
       enableResizing: true,
@@ -14195,7 +14742,7 @@ var TableProvider = ({
   });
   const pagination = table.getState().pagination;
   const pageCount = table.getPageCount();
-  useEffect27(() => {
+  useEffect34(() => {
     if (pageCount === -1) {
       return;
     }
@@ -14203,20 +14750,20 @@ var TableProvider = ({
       table.setPageIndex(pageCount - 1);
     }
   }, [table, pagination.pageIndex, pageCount]);
-  useEffect27(() => {
+  useEffect34(() => {
     table.setColumnOrder((prev) => [...prev]);
   }, [table, columns]);
   const columnVisibility = table.getState().columnVisibility;
   const columnOrder = table.getState().columnOrder;
   const columnPinning = table.getState().columnPinning;
-  useEffect27(() => {
+  useEffect34(() => {
     table.setColumnSizing((prev) => ({ ...prev }));
   }, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
-  const tableColumnDefinitionContextValue = useMemo21(() => ({
+  const tableColumnDefinitionContextValue = useMemo23(() => ({
     table,
     registerColumn
   }), [table, registerColumn]);
-  const tableContainerContextValue = useMemo21(() => ({
+  const tableContainerContextValue = useMemo23(() => ({
     table,
     containerRef
   }), [table, containerRef]);
@@ -14225,7 +14772,7 @@ var TableProvider = ({
     return rest;
   })();
   const rowModel = table.getRowModel();
-  const tableStateWithoutSizingContextValue = useMemo21(() => ({
+  const tableStateWithoutSizingContextValue = useMemo23(() => ({
     table,
     isUsingFillerRows,
     fillerRowCell,
@@ -14268,7 +14815,7 @@ var TableProvider = ({
   ]);
   const columnSizing = table.getState().columnSizing;
   const columnSizingInfo = table.getState().columnSizingInfo;
-  const tableStateContextValue = useMemo21(() => ({
+  const tableStateContextValue = useMemo23(() => ({
     ...tableStateWithoutSizingContextValue,
     sizeVars: ColumnSizeUtil.toSizeVars(columnSizing),
     columnSizingInfo,
@@ -14279,10 +14826,10 @@ var TableProvider = ({
 
 // src/components/layout/table/TableBody.tsx
 import { flexRender } from "@tanstack/react-table";
-import React5 from "react";
+import React7 from "react";
 import clsx20 from "clsx";
 import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
-var TableBody = React5.memo(function TableBodyVisual() {
+var TableBody = React7.memo(function TableBodyVisual() {
   const { table, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick } = useTableStateWithoutSizingContext();
   const rows = table.getRowModel().rows;
   const columnOrder = table.getState().columnOrder;
@@ -14380,15 +14927,15 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect32, useId as useId15, useMemo as useMemo26, useRef as useRef30, useState as useState30 } from "react";
+import { useEffect as useEffect39, useId as useId15, useMemo as useMemo28, useRef as useRef31, useState as useState34 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef17, useCallback as useCallback25, useEffect as useEffect31, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo24, useRef as useRef29, useState as useState28 } from "react";
+import { forwardRef as forwardRef17, useCallback as useCallback26, useEffect as useEffect38, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo26, useRef as useRef30, useState as useState32 } from "react";
 import { CalendarIcon } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
-import { useEffect as useEffect28, useRef as useRef26 } from "react";
+import { useEffect as useEffect35, useRef as useRef27 } from "react";
 import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 var TimePicker = ({
   value: controlledValue,
@@ -14404,8 +14951,8 @@ var TimePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const minuteRef = useRef26(null);
-  const hourRef = useRef26(null);
+  const minuteRef = useRef27(null);
+  const hourRef = useRef27(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
   let minutes = range(60);
@@ -14425,13 +14972,13 @@ var TimePicker = ({
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
   const hour = value.getHours();
-  useEffect28(() => {
+  useEffect35(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  useEffect28(() => {
+  useEffect35(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -14500,179 +15047,12 @@ var TimePicker = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-import { useState as useState27 } from "react";
+import { useState as useState31 } from "react";
 import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown4 } from "lucide-react";
-
-// src/utils/date.ts
-var timesInSeconds = {
-  second: 1,
-  minute: 60,
-  hour: 3600,
-  day: 86400,
-  week: 604800,
-  monthImprecise: 2629800,
-  // 30.4375 days
-  yearImprecise: 31557600
-  // 365.25 days
-};
-var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
-var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-var changeDuration = (date, duration, isAdding) => {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    hours = 0,
-    minutes = 0,
-    seconds = 0,
-    milliseconds = 0
-  } = duration;
-  if (years < 0) {
-    console.error(`Range error years must be greater than 0: received ${years}`);
-    return new Date(date);
-  }
-  if (months < 0 || months > 11) {
-    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
-    return new Date(date);
-  }
-  if (days < 0) {
-    console.error(`Range error days must be greater than 0: received ${days}`);
-    return new Date(date);
-  }
-  if (hours < 0 || hours > 23) {
-    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
-    return new Date(date);
-  }
-  if (minutes < 0 || minutes > 59) {
-    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
-    return new Date(date);
-  }
-  if (seconds < 0 || seconds > 59) {
-    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
-    return new Date(date);
-  }
-  if (milliseconds < 0) {
-    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
-    return new Date(date);
-  }
-  const multiplier = isAdding ? 1 : -1;
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
-  newDate.setMonth(newDate.getMonth() + multiplier * months);
-  newDate.setDate(newDate.getDate() + multiplier * days);
-  newDate.setHours(newDate.getHours() + multiplier * hours);
-  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
-  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
-  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
-  return newDate;
-};
-var addDuration = (date, duration) => {
-  return changeDuration(date, duration, true);
-};
-var subtractDuration = (date, duration) => {
-  return changeDuration(date, duration, false);
-};
-var between = (value, startDate, endDate) => {
-  if (startDate && endDate) {
-    console.assert(startDate <= endDate);
-    return startDate <= value && value <= endDate;
-  } else if (startDate) {
-    return startDate <= value;
-  } else if (endDate) {
-    return endDate >= value;
-  } else {
-    return true;
-  }
-};
-var equalDate = (date1, date2) => {
-  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
-};
-var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
-  const month = date.getMonth();
-  const year = date.getFullYear();
-  const dayList = [];
-  let currentDate = new Date(year, month, 1);
-  const weekStartIndex = weekDayList.indexOf(weekStart);
-  while (currentDate.getDay() !== weekStartIndex) {
-    currentDate = subtractDuration(currentDate, { days: 1 });
-  }
-  while (dayList.length < 7 * weeks) {
-    const date2 = new Date(currentDate);
-    date2.setHours(date2.getHours(), date2.getMinutes());
-    dayList.push(date2);
-    currentDate = addDuration(currentDate, { days: 1 });
-  }
-  return equalSizeGroups(dayList, 7);
-};
-var formatAbsolute = (date, locale, format) => {
-  let options;
-  switch (format) {
-    case "date":
-      options = {
-        year: "2-digit",
-        month: "2-digit",
-        day: "2-digit"
-      };
-      break;
-    case "time":
-      options = {
-        hour: "2-digit",
-        minute: "2-digit"
-      };
-      break;
-    case "dateTime":
-      options = {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit"
-      };
-      break;
-  }
-  return new Intl.DateTimeFormat(locale, options).format(date);
-};
-var formatRelative = (date, locale) => {
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-  const now = /* @__PURE__ */ new Date();
-  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
-  if (Math.abs(diffInSeconds) < timesInSeconds.minute) return rtf.format(Math.round(diffInSeconds), "second");
-  if (Math.abs(diffInSeconds) < timesInSeconds.hour) return rtf.format(Math.round(diffInSeconds / timesInSeconds.minute), "minute");
-  if (Math.abs(diffInSeconds) < timesInSeconds.day) return rtf.format(Math.round(diffInSeconds / timesInSeconds.hour), "hour");
-  if (Math.abs(diffInSeconds) < timesInSeconds.week) return rtf.format(Math.round(diffInSeconds / timesInSeconds.day), "day");
-  if (Math.abs(diffInSeconds) < timesInSeconds.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.week), "week");
-  if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
-  return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
-};
-var toInputString = (date, format) => {
-  switch (format) {
-    case "date":
-      return date.toISOString().split("T")[0];
-    case "time":
-      return date.toISOString().split("T")[1].split("Z")[0];
-    case "dateTime":
-      return date.toISOString();
-  }
-};
-var DateUtils = {
-  monthsList,
-  weekDayList,
-  equalDate,
-  formatAbsolute,
-  formatRelative,
-  addDuration,
-  subtractDuration,
-  between,
-  weeksForCalenderMonth,
-  timesInSeconds,
-  toInputString
-};
-
-// src/components/user-interaction/date/DatePicker.tsx
 import clsx23 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
-import { useCallback as useCallback23, useEffect as useEffect29, useMemo as useMemo22, useRef as useRef27 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect36, useMemo as useMemo24, useRef as useRef28 } from "react";
 import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
@@ -14701,33 +15081,33 @@ var DayPicker = ({
   });
   const month = displayedMonth.getMonth();
   const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
-  const selectedButtonRef = useRef27(null);
-  const isValueInDisplayedWeeks = useMemo22(
+  const selectedButtonRef = useRef28(null);
+  const isValueInDisplayedWeeks = useMemo24(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
-  const firstDayOfMonth = useCallback23(
+  const firstDayOfMonth = useCallback24(
     (date) => new Date(date.getFullYear(), date.getMonth(), 1),
     []
   );
   const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
-  useEffect29(() => {
+  useEffect36(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
-  const end = useMemo22(() => {
+  const end = useMemo24(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = useMemo22(() => {
+  const start = useMemo24(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  const clampToRange = useCallback23((date) => {
+  const clampToRange = useCallback24((date) => {
     if (start && date < start) return start;
     if (end && date > end) return end;
     return date;
   }, [start, end]);
-  const navigateTo = useCallback23((candidate) => {
+  const navigateTo = useCallback24((candidate) => {
     const clamped = clampToRange(candidate);
     if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
@@ -14736,7 +15116,7 @@ var DayPicker = ({
       setDisplayedMonth(firstDayOfMonth(clamped));
     }
   }, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
-  const onKeyDown = useCallback23(
+  const onKeyDown = useCallback24(
     (event) => {
       PropsUtil.aria.navigate({
         left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
@@ -14792,7 +15172,7 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback24, useEffect as useEffect30, useMemo as useMemo23, useRef as useRef28, useState as useState26 } from "react";
+import { memo, useCallback as useCallback25, useEffect as useEffect37, useMemo as useMemo25, useRef as useRef29, useState as useState30 } from "react";
 import clsx22 from "clsx";
 import { jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
@@ -14803,15 +15183,15 @@ var YearRow = memo(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = useRef28(null);
+  const ref = useRef29(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = useState26(false);
-  useEffect30(() => {
+  const [isExpanded, setIsExpanded] = useState30(false);
+  useEffect37(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = useMemo23(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  const monthGrid = useMemo25(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
   return /* @__PURE__ */ jsxs32(
     ExpandableRoot,
     {
@@ -14866,23 +15246,23 @@ var YearMonthPicker = ({
     defaultValue: initialValue
   });
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const monthNames = useMemo23(() => {
+  const monthNames = useMemo25(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = useMemo23(
+  const years = useMemo25(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = useMemo23(() => {
+  const minTimestamp = useMemo25(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = useMemo23(() => {
+  const maxTimestamp = useMemo25(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const handleSelect = useCallback24((newDate) => {
+  const handleSelect = useCallback25((newDate) => {
     setValue(newDate);
     onEditCompleteStable(newDate);
   }, [onEditCompleteStable, setValue]);
@@ -14935,8 +15315,8 @@ var DatePicker = ({
     onValueChange,
     defaultValue: initialValue
   });
-  const [displayedMonth, setDisplayedMonth] = useState27(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = useState27(initialDisplay);
+  const [displayedMonth, setDisplayedMonth] = useState31(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = useState31(initialDisplay);
   return /* @__PURE__ */ jsxs33("div", { className: clsx23("flex-col-3", className), children: [
     /* @__PURE__ */ jsxs33("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs33(
@@ -15192,31 +15572,31 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = useState28(false);
+  const [isOpen, setIsOpen] = useState32(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = useState28(state ?? /* @__PURE__ */ new Date());
-  const [dateString, setDateString] = useState28(state ? DateUtils.toInputString(state, mode) : "");
-  useEffect31(() => {
+  const [dialogValue, setDialogValue] = useState32(state ?? /* @__PURE__ */ new Date());
+  const [dateString, setDateString] = useState32(state ? DateUtils.toInputString(state, mode) : "");
+  useEffect38(() => {
     setDialogValue(state ?? /* @__PURE__ */ new Date());
     setDateString(state ? DateUtils.toInputString(state, mode) : "");
   }, [mode, state]);
-  const changeOpenWrapper = useCallback25((isOpen2) => {
+  const changeOpenWrapper = useCallback26((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
   const generatedId = useId13();
-  const ids = useMemo24(() => ({
+  const ids = useMemo26(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
-  const innerRef = useRef29(null);
+  const innerRef = useRef30(null);
   useImperativeHandle11(forwardedRef, () => innerRef.current);
-  useEffect31(() => {
+  useEffect38(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
@@ -15304,7 +15684,7 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
-import { useId as useId14, useMemo as useMemo25, useState as useState29 } from "react";
+import { useId as useId14, useMemo as useMemo27, useState as useState33 } from "react";
 
 // src/components/user-interaction/select/MultiSelect.tsx
 import { forwardRef as forwardRef18 } from "react";
@@ -15340,7 +15720,7 @@ import {
 
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check2, Minus as Minus2 } from "lucide-react";
-import { useCallback as useCallback26 } from "react";
+import { useCallback as useCallback27 } from "react";
 import { jsx as jsx68, jsxs as jsxs38 } from "react/jsx-runtime";
 var Checkbox = ({
   value: controlledValue,
@@ -15358,7 +15738,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback26((value2) => {
+  const onChangeWrapper = useCallback27((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -15581,7 +15961,7 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "textContains";
   const parameter = filterValue?.parameter ?? {};
   const id = useId14();
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.text,
     ...TableFilterOperator.generic
   ], []);
@@ -15641,7 +16021,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
   const operator = filterValue?.operator ?? "numberBetween";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.number,
     ...TableFilterOperator.generic
   ], []);
@@ -15732,9 +16112,9 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState29(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState29(null);
-  const availableOperators = useMemo25(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState33(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState33(null);
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.date,
     ...TableFilterOperator.generic
   ], []);
@@ -15857,9 +16237,9 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateTimeBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState29(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState29(null);
-  const availableOperators = useMemo25(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState33(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState33(null);
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.dateTime,
     ...TableFilterOperator.generic
   ], []);
@@ -15976,7 +16356,7 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "booleanIsTrue";
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
@@ -16000,11 +16380,11 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.multiTags,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = useMemo25(() => {
+  const availableTags = useMemo27(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16051,11 +16431,11 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsSingleContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.singleTag,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = useMemo25(() => {
+  const availableTags = useMemo27(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16114,7 +16494,7 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "notUndefined";
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.generic
   ], []);
   return /* @__PURE__ */ jsx69("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx69(
@@ -16163,18 +16543,18 @@ var TableFilterButton = ({
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState30(columnFilterValue);
+  const [filterValue, setFilterValue] = useState34(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = useRef30(null);
-  const containerRef = useRef30(null);
-  const [isOpen, setIsOpen] = useState30(false);
+  const anchorRef = useRef31(null);
+  const containerRef = useRef31(null);
+  const [isOpen, setIsOpen] = useState34(false);
   const id = useId15();
-  const ids = useMemo26(() => ({
+  const ids = useMemo28(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  useEffect32(() => {
+  useEffect39(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -16249,11 +16629,11 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback27, useEffect as useEffect33 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect40 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = useCallback27((e) => {
+  const handleResizeMove = useCallback28((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);
@@ -16269,7 +16649,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = useCallback27(() => {
+  const handleResizeEnd = useCallback28(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -16287,7 +16667,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  useEffect33(() => {
+  useEffect40(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -16456,7 +16836,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-import { useCallback as useCallback28, useMemo as useMemo27 } from "react";
+import { useCallback as useCallback29, useMemo as useMemo29 } from "react";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
@@ -16469,7 +16849,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = useMemo27(() => [
+  const columnDef = useMemo29(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -16512,7 +16892,7 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRowCell: useCallback28((columnId, table) => {
+      fillerRowCell: useCallback29((columnId, table) => {
         if (columnId === selectionRowId) {
           return /* @__PURE__ */ jsx74(Checkbox, { value: false, disabled: true });
         }
@@ -16530,7 +16910,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: useCallback28((row, table) => {
+      onRowClick: useCallback29((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -16572,7 +16952,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect34, useMemo as useMemo28, useState as useState31 } from "react";
+import { memo as memo2, useEffect as useEffect41, useMemo as useMemo30, useState as useState35 } from "react";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -16584,11 +16964,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] = useState31({
+  const [column] = useState35({
     ...props,
     filterFn
   });
-  useEffect34(() => {
+  useEffect41(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -16603,27 +16983,27 @@ var TableColumnFactory = () => memo2(
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = useMemo28(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = useMemo30(() => TableColumnFactory(), []);
   return /* @__PURE__ */ jsx76(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo29, useRef as useRef31, useId as useId16 } from "react";
+import { useMemo as useMemo31, useRef as useRef32, useId as useId16 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs45 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = useRef31(null);
+  const containerRef = useRef32(null);
   const generatedId = useId16();
-  const ids = useMemo29(() => ({
+  const ids = useMemo31(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
-  const columns = useMemo29(() => {
+  const columns = useMemo31(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -16881,7 +17261,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 };
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-import { useState as useState32 } from "react";
+import { useState as useState36 } from "react";
 import { clsx as clsx28 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -16904,7 +17284,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState32(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState36(false);
   return /* @__PURE__ */ jsxs46(
     TooltipRoot,
     {
@@ -16953,7 +17333,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback29, useRef as useRef32, useState as useState33 } from "react";
+import { useCallback as useCallback30, useRef as useRef33, useState as useState37 } from "react";
 import clsx29 from "clsx";
 import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs47 } from "react/jsx-runtime";
 var MenuItem = ({
@@ -16979,8 +17359,8 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = useRef32(null);
-  const [isOpen, setIsOpen] = useState33(false);
+  const triggerRef = useRef33(null);
+  const [isOpen, setIsOpen] = useState37(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -16988,7 +17368,7 @@ var Menu = ({
     disabled
   };
   return /* @__PURE__ */ jsxs47(Fragment11, { children: [
-    trigger(bag, useCallback29((el) => triggerRef.current = el, [])),
+    trigger(bag, useCallback30((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ jsx79(
       PopUp,
       {
@@ -17010,7 +17390,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback30, useEffect as useEffect35, useState as useState34 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect42, useState as useState38 } from "react";
 import clsx30 from "clsx";
 import { jsx as jsx80, jsxs as jsxs48 } from "react/jsx-runtime";
 var up = 1;
@@ -17031,7 +17411,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState34({
+  }, setAnimation] = useState38({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -17047,7 +17427,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = useCallback30((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = useCallback31((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -17057,7 +17437,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = useCallback30((timestamp, startTime) => {
+  const animate = useCallback31((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -17130,7 +17510,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect35(() => {
+  useEffect42(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -17208,7 +17588,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-import { useCallback as useCallback31 } from "react";
+import { useCallback as useCallback32 } from "react";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var Switch = ({
   value: controlledValue,
@@ -17223,7 +17603,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback31((value2) => {
+  const onChangeWrapper = useCallback32((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -17263,7 +17643,7 @@ var Switch = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-import { forwardRef as forwardRef19, useCallback as useCallback32, useId as useId17 } from "react";
+import { forwardRef as forwardRef19, useCallback as useCallback33, useId as useId17 } from "react";
 import clsx31 from "clsx";
 import { jsx as jsx82, jsxs as jsxs49 } from "react/jsx-runtime";
 var Textarea = forwardRef19(function Textarea2({
@@ -17282,7 +17662,7 @@ var Textarea = forwardRef19(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = useCallback32((text) => {
+  const onEditCompleteWrapper = useCallback33((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
@@ -17394,7 +17774,7 @@ var TimeDisplay = ({
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId18 } from "react";
-import { forwardRef as forwardRef20, useState as useState35 } from "react";
+import { forwardRef as forwardRef20, useState as useState39 } from "react";
 import clsx32 from "clsx";
 import { jsx as jsx84, jsxs as jsxs50 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef20(function InsideLabelInput2({
@@ -17410,7 +17790,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = useState35(false);
+  const [isFocused, setIsFocused] = useState39(false);
   const generatedId = useId18();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs50("div", { className: clsx32("relative"), children: [
@@ -17500,7 +17880,7 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect36, useImperativeHandle as useImperativeHandle12, useRef as useRef33, useState as useState36 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect43, useImperativeHandle as useImperativeHandle12, useRef as useRef34, useState as useState40 } from "react";
 import { Pencil } from "lucide-react";
 import clsx34 from "clsx";
 import { jsx as jsx86, jsxs as jsxs52 } from "react/jsx-runtime";
@@ -17517,10 +17897,10 @@ var ToggleableInput = forwardRef21(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = useState36(initialState !== "display");
-  const innerRef = useRef33(null);
+  const [isEditing, setIsEditing] = useState40(initialState !== "display");
+  const innerRef = useRef34(null);
   useImperativeHandle12(forwardedRef, () => innerRef.current);
-  useEffect36(() => {
+  useEffect43(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -17730,7 +18110,7 @@ var DateProperty = ({
 import { List } from "lucide-react";
 
 // src/components/user-interaction/select/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect37, useImperativeHandle as useImperativeHandle13, useRef as useRef34 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect44, useImperativeHandle as useImperativeHandle13, useRef as useRef35 } from "react";
 import { XIcon as XIcon2, Plus } from "lucide-react";
 import { jsx as jsx90, jsxs as jsxs55 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayButton2({
@@ -17740,7 +18120,7 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
   const translation = useHightideTranslation();
   const { state, trigger, item, ids, setIds } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  useEffect37(() => {
+  useEffect44(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -17748,9 +18128,9 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
       }));
     }
   }, [id, setIds]);
-  const innerRef = useRef34(null);
+  const innerRef = useRef35(null);
   useImperativeHandle13(ref, () => innerRef.current);
-  useEffect37(() => {
+  useEffect44(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -17987,463 +18367,97 @@ var SingleSelectProperty = ({
                     className: "flex-row-2 w-full items-center justify-between",
                     hideExpansionIcon: true,
                     "data-name": "property-input"
-                  }
-                ),
-                /* @__PURE__ */ jsx93(SelectContent, { children })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-
-// src/components/user-interaction/properties/TextProperty.tsx
-import { Text } from "lucide-react";
-import { jsx as jsx94 } from "react/jsx-runtime";
-var TextProperty = ({
-  value,
-  readOnly,
-  onValueChange,
-  onEditComplete,
-  ...baseProps
-}) => {
-  const translation = useHightideTranslation();
-  const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx94(
-    PropertyBase,
-    {
-      ...baseProps,
-      hasValue,
-      icon: /* @__PURE__ */ jsx94(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx94(
-        Textarea,
-        {
-          "data-name": "property-input",
-          className: "w-full",
-          "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          rows: 5,
-          value: value ?? "",
-          readOnly,
-          placeholder: translation("text"),
-          onValueChange: (value2) => onValueChange?.(value2),
-          onEditComplete: (value2) => onEditComplete?.(value2)
-        }
-      )
-    }
-  );
-};
-
-// src/components/utils/Transition.tsx
-import { useEffect as useEffect38, useState as useState37 } from "react";
-function Transition({
-  children,
-  show,
-  includeAnimation = true
-}) {
-  const [isOpen, setIsOpen] = useState37(show);
-  const [isTransitioning, setIsTransitioning] = useState37(!isOpen);
-  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect38(() => {
-    setIsOpen(show);
-    setIsTransitioning(true);
-  }, [show]);
-  const onAnimationEnd = () => setIsTransitioning(false);
-  const bag = {
-    isOpen,
-    isTransitioning,
-    isUsingReducedMotion,
-    data: {
-      "data-open": isOpen && !isTransitioning ? "" : void 0,
-      "data-opening": isOpen && isTransitioning ? "" : void 0,
-      "data-closing": !isOpen && isTransitioning ? "" : void 0,
-      "data-closed": !isOpen && !isTransitioning ? "" : void 0
-    },
-    handlers: {
-      onTransitionEnd: () => setIsTransitioning(false),
-      onTransitionCancel: () => setIsTransitioning(false),
-      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
-    }
-  };
-  return BagFunctionUtil.resolve(children, bag);
-}
-
-// src/global-contexts/HightideProvider.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
-var HightideProvider = ({
-  children,
-  theme,
-  locale,
-  config
-}) => {
-  return /* @__PURE__ */ jsx95(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx95(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx95(HightideConfigProvider, { ...config, children }) }) });
-};
-
-// src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect39 } from "react";
-var selectorName = "data-hw-focus-guard";
-function FocusGuard() {
-  const element = document.createElement("div");
-  element.setAttribute(selectorName, "");
-  element.tabIndex = 0;
-  element.style.border = "none";
-  element.style.outline = "none";
-  element.style.boxShadow = "none";
-  element.style.opacity = "0";
-  element.style.position = "fixed";
-  element.style.pointerEvents = "none";
-  return element;
-}
-var FocusGuardsService = class _FocusGuardsService {
-  constructor() {
-    this.count = 0;
-  }
-  static getInstance() {
-    if (!_FocusGuardsService.instance) {
-      _FocusGuardsService.instance = new _FocusGuardsService();
-    }
-    return _FocusGuardsService.instance;
-  }
-  add() {
-    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
-    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
-    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
-    this.count++;
-  }
-  remove() {
-    if (this.count === 1) {
-      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
-    }
-    this.count--;
-  }
-};
-var useFocusGuards = () => {
-  useEffect39(() => {
-    FocusGuardsService.getInstance().add();
-    return () => {
-      FocusGuardsService.getInstance().remove();
-    };
-  }, []);
-};
-
-// src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect40 } from "react";
-var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect40(() => {
-    if (disable || hasUsedFocus) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !hasUsedFocus) {
-        ref.current?.focus();
-        setHasUsedFocus(hasUsedFocus);
-      }
-    }, {
-      threshold: 0.1
-    });
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => observer.disconnect();
-  }, [disable, hasUsedFocus, ref]);
-};
-
-// src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect41, useLayoutEffect as useLayoutEffect7, useState as useState38 } from "react";
-var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect41;
-var useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState38(false);
-  useIsomorphicEffect(() => {
-    setIsMounted(true);
-    return () => {
-      setIsMounted(false);
-    };
-  }, []);
-  return isMounted;
-};
-
-// src/hooks/useHandleRefs.ts
-import { useEffect as useEffect42, useRef as useRef35 } from "react";
-function useHandleRefs(handleRef) {
-  const refs = useRef35([]);
-  useEffect42(() => {
-    refs.current = Object.keys(handleRef?.current ?? {}).map(
-      () => ({ current: null })
-    );
-    const values = Object.values(handleRef?.current ?? {});
-    values.forEach((el, i) => {
-      refs.current[i].current = el;
-    });
-  });
-  return refs.current;
-}
-
-// src/hooks/useLogUnstableDependencies.ts
-import React7 from "react";
-function useLogUnstableDependencies(name, value) {
-  const prev = React7.useRef(null);
-  React7.useEffect(() => {
-    if (!prev.current) {
-      prev.current = value;
-      return;
-    }
-    const changes = {};
-    for (const key of Object.keys(value)) {
-      if (prev.current[key] !== value[key]) {
-        changes[key] = {
-          prev: prev.current[key],
-          next: value[key]
-        };
-      }
-    }
-    if (Object.keys(changes).length > 0) {
-      console.info(`[${name}] changed`, changes);
-    }
-    prev.current = value;
-  });
-}
-
-// src/hooks/useOverwritableState.ts
-import { useEffect as useEffect43, useState as useState39 } from "react";
-var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = useState39(overwriteValue);
-  useEffect43(() => {
-    setState(overwriteValue);
-  }, [overwriteValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(resolved);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/hooks/useRerender.ts
-import { useReducer as useReducer2 } from "react";
-var useRerender = () => {
-  return useReducer2(() => ({}), {})[1];
-};
-
-// src/hooks/useSearch.ts
-import { useCallback as useCallback33, useEffect as useEffect44, useMemo as useMemo30, useState as useState40 } from "react";
-
-// src/utils/simpleSearch.ts
-var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
-  return objects.filter((object) => {
-    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
-    if (!mappedSearchKeywords) {
-      return true;
-    }
-    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
-  });
-};
-var MultiSearchWithMapping = (search, objects, mapping) => {
-  return objects.filter((object) => {
-    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
-    if (!mappedSearchKeywords) {
-      return true;
+                  }
+                ),
+                /* @__PURE__ */ jsx93(SelectContent, { children })
+              ]
+            }
+          )
+        }
+      )
     }
-    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
-  });
-};
-var SimpleSearchWithMapping = (search, objects, mapping) => {
-  return MultiSearchWithMapping(search, objects, (value) => [mapping(value)]);
-};
-var SimpleSearch = (search, objects) => {
-  return SimpleSearchWithMapping(search, objects, (value) => value);
+  );
 };
 
-// src/hooks/useSearch.ts
-var useSearch = ({
-  list,
-  initialSearch,
-  searchMapping,
-  additionalSearchTags,
-  isSearchInstant = true,
-  sortingFunction,
-  filter,
-  disabled = false
+// src/components/user-interaction/properties/TextProperty.tsx
+import { Text } from "lucide-react";
+import { jsx as jsx94 } from "react/jsx-runtime";
+var TextProperty = ({
+  value,
+  readOnly,
+  onValueChange,
+  onEditComplete,
+  ...baseProps
 }) => {
-  const [search, setSearch] = useState40(initialSearch ?? "");
-  const [result, setResult] = useState40(list);
-  const searchTags = useMemo30(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = useCallback33((newSearch) => {
-    const usedSearch = newSearch ?? search;
-    if (newSearch) {
-      setSearch(search);
-    }
-    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
-  }, [searchTags, list, search, searchMapping]);
-  useEffect44(() => {
-    if (isSearchInstant) {
-      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
-    }
-  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo30(() => {
-    if (!filter) {
-      return result;
-    }
-    return result.filter(filter);
-  }, [result, filter]);
-  const sortedAndFilteredResult = useMemo30(() => {
-    if (!sortingFunction) {
-      return filteredResult;
-    }
-    return filteredResult.sort(sortingFunction);
-  }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo30(() => {
-    if (!disabled) {
-      return sortedAndFilteredResult;
+  const translation = useHightideTranslation();
+  const hasValue = value !== void 0;
+  return /* @__PURE__ */ jsx94(
+    PropertyBase,
+    {
+      ...baseProps,
+      hasValue,
+      icon: /* @__PURE__ */ jsx94(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx94(
+        Textarea,
+        {
+          "data-name": "property-input",
+          className: "w-full",
+          "data-invalid": PropsUtil.dataAttributes.bool(invalid),
+          rows: 5,
+          value: value ?? "",
+          readOnly,
+          placeholder: translation("text"),
+          onValueChange: (value2) => onValueChange?.(value2),
+          onEditComplete: (value2) => onEditComplete?.(value2)
+        }
+      )
     }
-    return list;
-  }, [disabled, list, sortedAndFilteredResult]);
-  return {
-    result: usedResult,
-    hasResult: usedResult.length > 0,
-    allItems: list,
-    updateSearch,
-    search,
-    setSearch
-  };
+  );
 };
 
-// src/hooks/useUpdatingDateString.ts
+// src/components/utils/Transition.tsx
 import { useEffect as useEffect45, useState as useState41 } from "react";
-var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
-  const { locale: contextLocale } = useLocale();
-  const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = useState41({
-    compareDate: date,
-    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-    relative: DateUtils.formatRelative(date, locale)
-  });
-  useEffect45(() => {
-    setDateAndTimeStrings({
-      compareDate: date,
-      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-      relative: DateUtils.formatRelative(date, locale)
-    });
-  }, [date, absoluteFormat, locale]);
+function Transition({
+  children,
+  show,
+  includeAnimation = true
+}) {
+  const [isOpen, setIsOpen] = useState41(show);
+  const [isTransitioning, setIsTransitioning] = useState41(!isOpen);
+  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
   useEffect45(() => {
-    let timeoutId;
-    const startTimer = () => {
-      const now = /* @__PURE__ */ new Date();
-      const diff = Math.abs((date.getTime() - now.getTime()) / 1e3);
-      let delayInSeconds;
-      if (diff < DateUtils.timesInSeconds.minute) {
-        delayInSeconds = DateUtils.timesInSeconds.second;
-      } else if (diff < DateUtils.timesInSeconds.hour) {
-        delayInSeconds = DateUtils.timesInSeconds.minute;
-      } else {
-        delayInSeconds = DateUtils.timesInSeconds.hour;
-      }
-      timeoutId = setInterval(() => {
-        setDateAndTimeStrings({
-          compareDate: date,
-          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-          relative: DateUtils.formatRelative(date, locale)
-        });
-      }, delayInSeconds * 1e3 / 2);
-    };
-    startTimer();
-    return () => clearInterval(timeoutId);
-  }, [absoluteFormat, date, locale]);
-  return {
-    absolute: dateAndTimeStrings.absolute,
-    relative: dateAndTimeStrings.relative
-  };
-};
-
-// src/utils/emailValidation.ts
-var validateEmail = (email) => {
-  return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
-};
-
-// src/hooks/useValidators.ts
-import { useMemo as useMemo31 } from "react";
-var notEmpty = (value) => {
-  if (!value) {
-    return "notEmpty";
-  }
-};
-var boundsValidator = (length, bounds) => {
-  const [min, max] = bounds;
-  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
-    return "range";
-  }
-  if (min !== void 0 && (length === void 0 || length < min)) {
-    return "lower";
-  }
-  if (max !== void 0 && length !== void 0 && length > max) {
-    return "upper";
-  }
-  return "none";
-};
-var lengthValidator = (value, bounds) => {
-  const mapping = {
-    range: "outOfRangeString",
-    lower: "tooShort",
-    upper: "tooLong",
-    none: void 0
-  };
-  return mapping[boundsValidator(value?.length, bounds)];
-};
-var selectionValidator = (value, bounds) => {
-  const mapping = {
-    range: "outOfRangeSelectionItems",
-    lower: "tooFewSelectionItems",
-    upper: "tooManySelectionItems",
-    none: void 0
-  };
-  return mapping[boundsValidator(value?.length, bounds)];
-};
-var emailValidator = (value) => {
-  if (!value || !validateEmail(value)) {
-    return "invalidEmail";
-  }
-};
-var UseValidators = {
-  notEmpty,
-  length: lengthValidator,
-  email: emailValidator,
-  selection: selectionValidator
-};
-var useTranslatedValidators = () => {
-  const translation = useHightideTranslation();
-  return useMemo31(() => ({
-    notEmpty: (value) => {
-      const result = notEmpty(value);
-      if (result) {
-        return translation(result);
-      }
-    },
-    length: (value, length) => {
-      const [min, max] = length;
-      const result = lengthValidator(value, length);
-      if (result) {
-        return translation(result, { min, max });
-      }
-    },
-    email: (value) => {
-      const result = emailValidator(value ?? "");
-      if (result) {
-        return translation(result);
-      }
+    setIsOpen(show);
+    setIsTransitioning(true);
+  }, [show]);
+  const onAnimationEnd = () => setIsTransitioning(false);
+  const bag = {
+    isOpen,
+    isTransitioning,
+    isUsingReducedMotion,
+    data: {
+      "data-open": isOpen && !isTransitioning ? "" : void 0,
+      "data-opening": isOpen && isTransitioning ? "" : void 0,
+      "data-closing": !isOpen && isTransitioning ? "" : void 0,
+      "data-closed": !isOpen && !isTransitioning ? "" : void 0
     },
-    selection: (value, length) => {
-      const [min, max] = length;
-      const result = selectionValidator(value, length);
-      if (result) {
-        return translation(
-          result,
-          { min, max }
-        );
-      }
+    handlers: {
+      onTransitionEnd: () => setIsTransitioning(false),
+      onTransitionCancel: () => setIsTransitioning(false),
+      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
     }
-  }), [translation]);
+  };
+  return BagFunctionUtil.resolve(children, bag);
+}
+
+// src/global-contexts/HightideProvider.tsx
+import { jsx as jsx95 } from "react/jsx-runtime";
+var HightideProvider = ({
+  children,
+  theme,
+  locale,
+  config
+}) => {
+  return /* @__PURE__ */ jsx95(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx95(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx95(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/utils/builder.ts