@helpwave/hightide 0.1.35 → 0.1.37

package/dist/index.js

@@ -38,12 +38,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
-    var useState35 = React21.useState;
-    var useEffect38 = React21.useEffect;
+    var useState36 = React21.useState;
+    var useEffect39 = React21.useEffect;
     var useLayoutEffect3 = React21.useLayoutEffect;
     var useDebugValue = React21.useDebugValue;
     function useSyncExternalStore$2(subscribe2, getSnapshot) {
-      var value = getSnapshot(), _useState = useState35({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState36({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -52,7 +52,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe2, value, getSnapshot]
       );
-      useEffect38(
+      useEffect39(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe2(function() {
@@ -101,7 +101,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState35({
+        cachedValue = useState36({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -113,7 +113,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe2, value, getSnapshot]
         );
-        useEffect38(
+        useEffect39(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe2(function() {
@@ -139,7 +139,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React21 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState35 = React21.useState, useEffect38 = React21.useEffect, useLayoutEffect3 = React21.useLayoutEffect, useDebugValue = React21.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React21 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState36 = React21.useState, useEffect39 = React21.useEffect, useLayoutEffect3 = React21.useLayoutEffect, useDebugValue = React21.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports2.useSyncExternalStore = void 0 !== React21.useSyncExternalStore ? React21.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
@@ -7104,8 +7104,15 @@ var useLocalStorage = (key, backupValue) => {
       return backupValue;
     }
     const storageService = new LocalStorageService();
-    const value = storageService.get(key);
-    return value || backupValue;
+    try {
+      const value = storageService.get(key);
+      return value || backupValue;
+    } catch (_) {
+      console.warn("useLocalStorage: Error while reading the stored value. Make sure your typing is correct.");
+      storageService.delete(key);
+      console.info(`useLocalStorage: deleted erroneous value for key: ${key}`);
+      return backupValue;
+    }
   }, [backupValue, key]);
   const [storedValue, setStoredValue] = (0, import_react2.useState)(get);
   const setValue = (0, import_react2.useCallback)((action) => {
@@ -7161,6 +7168,7 @@ var LanguageProvider = ({ children, language }) => {
     return LanguageUtil.DEFAULT_LANGUAGE;
   }, [language, languagePreference, storedLanguage]);
   (0, import_react3.useEffect)(() => {
+    if (!language) return;
     if (language === "system") {
       deleteStoredLanguage();
     } else {
@@ -8109,6 +8117,8 @@ var import_clsx10 = __toESM(require("clsx"));
 
 // src/components/dialog/Dialog.tsx
 var import_react13 = require("react");
+var import_react14 = require("react");
+var import_react15 = require("react");
 var import_clsx9 = __toESM(require("clsx"));
 var import_lucide_react3 = require("lucide-react");
 
@@ -8473,10 +8483,21 @@ var Dialog = ({
   onClose,
   className,
   backgroundClassName,
-  position = "center"
+  position = "center",
+  isAnimated = true
 }) => {
   const translation = useTranslation([formTranslation]);
-  const ref = (0, import_react13.useRef)(null);
+  const [visible, setVisible] = (0, import_react14.useState)(isOpen);
+  const ref = (0, import_react15.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (isOpen) {
+      setVisible(true);
+    } else {
+      if (!isAnimated) {
+        setVisible(false);
+      }
+    }
+  }, [isAnimated, isOpen]);
   const onCloseWrapper = () => {
     if (!isModal) return;
     onClose?.();
@@ -8484,7 +8505,7 @@ var Dialog = ({
   useLogOnce("Dialog: onClose should be defined for modal dialogs", isModal && !onClose);
   useFocusTrap({
     container: ref,
-    active: isOpen,
+    active: visible,
     focusFirst: true
   });
   const positionMap = {
@@ -8498,6 +8519,7 @@ var Dialog = ({
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
+          hidden: !visible,
           className: (0, import_clsx9.default)(
             "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
             {
@@ -8506,21 +8528,30 @@ var Dialog = ({
             },
             backgroundClassName
           ),
-          hidden: !isOpen,
-          "aria-hidden": true,
-          onClick: onCloseWrapper
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
+          onClick: onCloseWrapper,
+          "aria-hidden": true
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           ref,
-          hidden: !isOpen,
+          hidden: !visible,
           onKeyDown: (event) => {
             if (event.key === "Escape") {
               onCloseWrapper();
             }
           },
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
           className: (0, import_clsx9.default)(
             "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)] z-100",
             {
@@ -8645,17 +8676,17 @@ var DiscardChangesDialog = ({
 };
 
 // src/components/user-action/input/Input.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_clsx11 = __toESM(require("clsx"));
 
 // src/hooks/useDelay.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = (0, import_react14.useState)(void 0);
+  const [timer, setTimer] = (0, import_react16.useState)(void 0);
   const { delay, disabled } = {
     ...defaultOptions2,
     ...options
@@ -8674,12 +8705,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -8689,9 +8720,9 @@ function useDelay(options) {
 }
 
 // src/hooks/focus/useFocusManagement.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 function useFocusManagement() {
-  const getFocusableElements = (0, import_react15.useCallback)(() => {
+  const getFocusableElements = (0, import_react17.useCallback)(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -8700,7 +8731,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = (0, import_react15.useCallback)(() => {
+  const getNextFocusElement = (0, import_react17.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -8712,11 +8743,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = (0, import_react15.useCallback)(() => {
+  const focusNext = (0, import_react17.useCallback)(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = (0, import_react15.useCallback)(() => {
+  const getPreviousFocusElement = (0, import_react17.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -8732,7 +8763,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = (0, import_react15.useCallback)(() => {
+  const focusPrevious = (0, import_react17.useCallback)(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -8753,7 +8784,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = (0, import_react16.forwardRef)(function Input2({
+var Input = (0, import_react18.forwardRef)(function Input2({
   value,
   onChange,
   onChangeText,
@@ -8775,8 +8806,8 @@ var Input = (0, import_react16.forwardRef)(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "input",
@@ -8861,7 +8892,7 @@ var InputDialog = ({
 };
 
 // src/components/user-action/select/Select.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_clsx13 = __toESM(require("clsx"));
 
 // src/utils/match.ts
@@ -8955,7 +8986,7 @@ var ChipList = ({
 };
 
 // src/hooks/useFloatingElement.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/utils/math.ts
 var clamp = (value, range2 = [0, 1]) => {
@@ -9018,9 +9049,9 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = (0, import_react17.useState)();
+  const [style, setStyle] = (0, import_react19.useState)();
   const isMounted = useIsMounted();
-  const calculate = (0, import_react17.useCallback)(() => {
+  const calculate = (0, import_react19.useCallback)(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
     const windowRect = windowRef?.current.getBoundingClientRect() ?? {
       top: 0,
@@ -9050,14 +9081,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -9079,9 +9110,9 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var defaultToggleOpenOptions = {
   highlightStartPosition: "first"
 };
-var SelectContext = (0, import_react18.createContext)(null);
+var SelectContext = (0, import_react20.createContext)(null);
 function useSelectContext() {
-  const ctx = (0, import_react18.useContext)(SelectContext);
+  const ctx = (0, import_react20.useContext)(SelectContext);
   if (!ctx) {
     throw new Error("SelectContext must be used within a ListBoxPrimitive");
   }
@@ -9100,11 +9131,11 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = (0, import_react18.useState)([]);
-  const triggerRef = (0, import_react18.useRef)(null);
-  const generatedId = (0, import_react18.useId)();
+  const [options, setOptions] = (0, import_react20.useState)([]);
+  const triggerRef = (0, import_react20.useRef)(null);
+  const generatedId = (0, import_react20.useId)();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = (0, import_react18.useState)({
+  const [internalState, setInternalState] = (0, import_react20.useState)({
     isOpen
   });
   const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
@@ -9121,7 +9152,7 @@ var SelectRoot = ({
     isMultiSelect,
     iconAppearance
   };
-  const registerItem = (0, import_react18.useCallback)((item) => {
+  const registerItem = (0, import_react20.useCallback)((item) => {
     setOptions((prev) => {
       const updated = [...prev, item];
       updated.sort((a, b) => {
@@ -9133,7 +9164,7 @@ var SelectRoot = ({
       return updated;
     });
   }, []);
-  const unregisterItem = (0, import_react18.useCallback)((value2) => {
+  const unregisterItem = (0, import_react20.useCallback)((value2) => {
     setOptions((prev) => prev.filter((i) => i.value !== value2));
   }, []);
   const toggleSelection = (value2, isSelected) => {
@@ -9176,10 +9207,10 @@ var SelectRoot = ({
       highlightedValue: value2
     }));
   };
-  const registerTrigger = (0, import_react18.useCallback)((ref) => {
+  const registerTrigger = (0, import_react20.useCallback)((ref) => {
     triggerRef.current = ref.current;
   }, []);
-  const unregisterTrigger = (0, import_react18.useCallback)(() => {
+  const unregisterTrigger = (0, import_react20.useCallback)(() => {
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen2, toggleOpenOptions) => {
@@ -9220,7 +9251,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -9248,14 +9279,14 @@ var SelectRoot = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
-var SelectOption = (0, import_react18.forwardRef)(
+var SelectOption = (0, import_react20.forwardRef)(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = (0, import_react18.useRef)(null);
+    const itemRef = (0, import_react20.useRef)(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    (0, import_react18.useEffect)(() => {
+    (0, import_react20.useEffect)(() => {
       register({
         value,
         label,
@@ -9333,13 +9364,13 @@ var defaultSelectButtonTranslation = {
     clickToSelect: "Zum ausw\xE4hlen dr\xFCcken"
   }
 };
-var SelectButton = (0, import_react18.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+var SelectButton = (0, import_react20.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
   const translation = useTranslation([defaultSelectButtonTranslation]);
   const { state, trigger } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react18.useEffect)(() => {
+  const innerRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react20.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9412,12 +9443,12 @@ var SelectButton = (0, import_react18.forwardRef)(function SelectButton2({ place
     }
   );
 });
-var SelectChipDisplay = (0, import_react18.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
+var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
   const { state, trigger, item } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react18.useEffect)(() => {
+  const innerRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react20.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9480,14 +9511,14 @@ var SelectChipDisplay = (0, import_react18.forwardRef)(function SelectChipDispla
     }
   );
 });
-var SelectContent = (0, import_react18.forwardRef)(
+var SelectContent = (0, import_react20.forwardRef)(
   function SelectContent2({
     alignment,
     orientation = "vertical",
     ...props
   }, ref) {
-    const innerRef = (0, import_react18.useRef)(null);
-    (0, import_react18.useImperativeHandle)(ref, () => innerRef.current);
+    const innerRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
     const { trigger, state, config, item } = useSelectContext();
     const position = useFloatingElement({
       active: state.isOpen,
@@ -9574,7 +9605,7 @@ var SelectContent = (0, import_react18.forwardRef)(
     );
   }
 );
-var Select = (0, import_react18.forwardRef)(function Select2({
+var Select = (0, import_react20.forwardRef)(function Select2({
   children,
   contentPanelProps,
   buttonProps,
@@ -9596,7 +9627,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = (0, import_react18.forwardRef)(function SelectUncontrolled2({
+var SelectUncontrolled = (0, import_react20.forwardRef)(function SelectUncontrolled2({
   value: initialValue,
   onValueChanged,
   ...props
@@ -9612,7 +9643,7 @@ var SelectUncontrolled = (0, import_react18.forwardRef)(function SelectUncontrol
     }
   );
 });
-var MultiSelect = (0, import_react18.forwardRef)(function MultiSelect2({
+var MultiSelect = (0, import_react20.forwardRef)(function MultiSelect2({
   children,
   contentPanelProps,
   buttonProps,
@@ -9623,7 +9654,7 @@ var MultiSelect = (0, import_react18.forwardRef)(function MultiSelect2({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectUncontrolled = (0, import_react18.forwardRef)(function MultiSelectUncontrolled2({
+var MultiSelectUncontrolled = (0, import_react20.forwardRef)(function MultiSelectUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props
@@ -9639,7 +9670,7 @@ var MultiSelectUncontrolled = (0, import_react18.forwardRef)(function MultiSelec
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react18.forwardRef)(function MultiSelectChipDisplay2({
+var MultiSelectChipDisplay = (0, import_react20.forwardRef)(function MultiSelectChipDisplay2({
   children,
   contentPanelProps,
   chipDisplayProps,
@@ -9650,7 +9681,7 @@ var MultiSelectChipDisplay = (0, import_react18.forwardRef)(function MultiSelect
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectChipDisplayUncontrolled = (0, import_react18.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
+var MultiSelectChipDisplayUncontrolled = (0, import_react20.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props
@@ -9723,7 +9754,7 @@ var import_lucide_react5 = require("lucide-react");
 var import_clsx14 = __toESM(require("clsx"));
 
 // src/theming/useTheme.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -9750,15 +9781,15 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react19.createContext)(null);
+var ThemeContext = (0, import_react21.createContext)(null);
 var ThemeProvider = ({ children, theme }) => {
   const {
     value: storedTheme,
     setValue: setStoredTheme,
     deleteValue: deleteStoredTheme
   } = useLocalStorage("theme", "system");
-  const [themePreference, setThemePreference] = (0, import_react19.useState)("system");
-  const resolvedTheme = (0, import_react19.useMemo)(() => {
+  const [themePreference, setThemePreference] = (0, import_react21.useState)("system");
+  const resolvedTheme = (0, import_react21.useMemo)(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -9770,25 +9801,26 @@ var ThemeProvider = ({ children, theme }) => {
     }
     return "light";
   }, [storedTheme, theme, themePreference]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
+    if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
     } else {
       setStoredTheme(theme);
     }
   }, [theme]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = (0, import_react19.useCallback)(() => {
+  const getPreference = (0, import_react21.useCallback)(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     getPreference();
   }, [getPreference]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
     const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
@@ -9819,7 +9851,7 @@ var ThemeProvider = ({ children, theme }) => {
   );
 };
 var useTheme = () => {
-  const context = (0, import_react19.useContext)(ThemeContext);
+  const context = (0, import_react21.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -9891,7 +9923,7 @@ var ThemeDialog = ({
 };
 
 // src/components/form/FormElementWrapper.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_clsx16 = require("clsx");
 
 // src/components/user-action/Label.tsx
@@ -9929,7 +9961,7 @@ var FormElementWrapper = ({
   containerClassName
 }) => {
   const [touched, setTouched] = useOverwritableState(initialIsShowingError, onIsShowingError);
-  const generatedId = (0, import_react20.useId)();
+  const generatedId = (0, import_react22.useId)();
   const usedId = id ?? generatedId;
   const errorId = `${usedId}-description`;
   const labelId = `${usedId}-label`;
@@ -10000,7 +10032,7 @@ var FormElementWrapper = ({
 
 // src/components/icons-and-geometry/Avatar.tsx
 var import_clsx17 = __toESM(require("clsx"));
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_lucide_react6 = require("lucide-react");
 
 // node_modules/@radix-ui/react-avatar/dist/index.mjs
@@ -10399,7 +10431,7 @@ var Avatar2 = ({ image, name, size = "md", fullyRounded, className = "" }) => {
     maxHeight: pixels
   };
   const textClassName = textClassNameMapping[size];
-  const displayName = (0, import_react21.useMemo)(() => {
+  const displayName = (0, import_react23.useMemo)(() => {
     const maxLetters = size === "sm" ? 1 : 2;
     return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
   }, [name, size]);
@@ -10499,7 +10531,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_clsx19 = __toESM(require("clsx"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Ring = ({
@@ -10528,9 +10560,9 @@ var AnimatedRing = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react22.useState)(0);
+  const [currentWidth, setCurrentWidth] = (0, import_react24.useState)(0);
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react22.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react24.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newWidth = Math.min(width * progress, width);
     setCurrentWidth(newWidth);
@@ -10544,7 +10576,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -10579,10 +10611,10 @@ var RingWave = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = (0, import_react22.useState)(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = (0, import_react24.useState)(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react22.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react24.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newInnerSize = Math.min(
       startInnerSize + distance * progress,
@@ -10599,7 +10631,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -10634,7 +10666,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = (0, import_react22.useState)(0);
+  const [currentRing, setCurrentRing] = (0, import_react24.useState)(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
@@ -10783,13 +10815,13 @@ var TagIcon = ({
 };
 
 // src/components/layout/Carousel.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_clsx20 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var CarouselContext = (0, import_react23.createContext)(null);
+var CarouselContext = (0, import_react25.createContext)(null);
 var useCarouselContext = () => {
-  const context = (0, import_react23.useContext)(CarouselContext);
+  const context = (0, import_react25.useContext)(CarouselContext);
   if (!context) {
     console.error("useCarouselContext must be used within CarouselContext");
   }
@@ -10812,7 +10844,7 @@ function CarouselTabs({
     defaultCarouselTabTranslationType
   ]);
   const { id, slideCount, currentIndex, isLooping } = useCarouselContext();
-  const tabRefs = (0, import_react23.useRef)([]);
+  const tabRefs = (0, import_react25.useRef)([]);
   const handleKeyDown = (event, index) => {
     let newIndex = index;
     if (event.key === "ArrowRight") {
@@ -10872,7 +10904,7 @@ var defaultCarouselSlideTranslationType = {
     slideOf: `Slide {{index}} von {{length}} slides`
   }
 };
-var CarouselSlide = (0, import_react23.forwardRef)(
+var CarouselSlide = (0, import_react25.forwardRef)(
   function CarouselSlide2({
     index,
     ...props
@@ -10932,17 +10964,17 @@ var Carousel = ({
   ...props
 }) => {
   const translation = useTranslation([defaultCarouselTranslationType]);
-  const slideRefs = (0, import_react23.useRef)([]);
-  const [currentIndex, setCurrentIndex] = (0, import_react23.useState)(0);
-  const [hasFocus, setHasFocus] = (0, import_react23.useState)(false);
-  const [dragState, setDragState] = (0, import_react23.useState)();
+  const slideRefs = (0, import_react25.useRef)([]);
+  const [currentIndex, setCurrentIndex] = (0, import_react25.useState)(0);
+  const [hasFocus, setHasFocus] = (0, import_react25.useState)(false);
+  const [dragState, setDragState] = (0, import_react25.useState)();
   const isPaused = hasFocus;
-  const carouselContainerRef = (0, import_react23.useRef)(null);
-  const [disableClick, setDisableClick] = (0, import_react23.useState)(false);
-  const timeOut = (0, import_react23.useRef)(void 0);
-  const length = (0, import_react23.useMemo)(() => children.length, [children]);
+  const carouselContainerRef = (0, import_react25.useRef)(null);
+  const [disableClick, setDisableClick] = (0, import_react25.useState)(false);
+  const timeOut = (0, import_react25.useRef)(void 0);
+  const length = (0, import_react25.useMemo)(() => children.length, [children]);
   const paddingItemCount = 3;
-  const generatedId = "carousel" + (0, import_react23.useId)();
+  const generatedId = "carousel" + (0, import_react25.useId)();
   const id = props.id ?? generatedId;
   if (isAutoPlaying && !isLooping) {
     console.error("When isAutoLooping is true, isLooping should also be true");
@@ -10951,7 +10983,7 @@ var Carousel = ({
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   animationTime = Math.max(100, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const carousel = carouselContainerRef.current;
     if (carousel) {
       let onFocus = function() {
@@ -10974,7 +11006,7 @@ var Carousel = ({
   const canGoLeft = () => {
     return isLooping || currentIndex !== 0;
   };
-  const canGoRight = (0, import_react23.useCallback)(() => {
+  const canGoRight = (0, import_react25.useCallback)(() => {
     return isLooping || currentIndex !== length - 1;
   }, [currentIndex, isLooping, length]);
   const left = () => {
@@ -10982,12 +11014,12 @@ var Carousel = ({
       setCurrentIndex(currentIndex - 1);
     }
   };
-  const right = (0, import_react23.useCallback)(() => {
+  const right = (0, import_react25.useCallback)(() => {
     if (canGoRight()) {
       setCurrentIndex((currentIndex + length + 1) % length);
     }
   }, [canGoRight, currentIndex, length]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!timeOut.current && !isPaused) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -11039,7 +11071,7 @@ var Carousel = ({
     }
     setDragState(void 0);
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setDisableClick(!dragState);
   }, [dragState]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -11430,11 +11462,11 @@ var FAQSection = ({
 };
 
 // src/components/layout/FloatingContainer.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_clsx23 = require("clsx");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var FloatingContainer = (0, import_react24.forwardRef)(function FloatingContainer2({
+var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContainer2({
   children,
   backgroundOverlay,
   anchor,
@@ -11446,8 +11478,8 @@ var FloatingContainer = (0, import_react24.forwardRef)(function FloatingContaine
   gap = 4,
   ...props
 }, forwardRef17) {
-  const innerRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useImperativeHandle)(forwardRef17, () => innerRef.current);
+  const innerRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useImperativeHandle)(forwardRef17, () => innerRef.current);
   const position = useFloatingElement({
     active: !props.hidden,
     containerRef: innerRef,
@@ -11487,18 +11519,18 @@ var FloatingContainer = (0, import_react24.forwardRef)(function FloatingContaine
 });
 
 // src/components/layout/ListBox.tsx
-var import_react25 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_clsx24 = require("clsx");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var ListBoxContext = (0, import_react25.createContext)(null);
+var ListBoxContext = (0, import_react27.createContext)(null);
 function useListBoxContext() {
-  const ctx = (0, import_react25.useContext)(ListBoxContext);
+  const ctx = (0, import_react27.useContext)(ListBoxContext);
   if (!ctx) {
     throw new Error("ListBoxItem must be used within a ListBoxPrimitive");
   }
   return ctx;
 }
-var ListBoxItem = (0, import_react25.forwardRef)(
+var ListBoxItem = (0, import_react27.forwardRef)(
   function ListBoxItem2({ value, disabled = false, children, className, ...rest }, ref) {
     const {
       registerItem,
@@ -11508,9 +11540,9 @@ var ListBoxItem = (0, import_react25.forwardRef)(
       onItemClick,
       isSelected
     } = useListBoxContext();
-    const itemRef = (0, import_react25.useRef)(null);
-    const id = import_react25.default.useId();
-    (0, import_react25.useEffect)(() => {
+    const itemRef = (0, import_react27.useRef)(null);
+    const id = import_react27.default.useId();
+    (0, import_react27.useEffect)(() => {
       registerItem({ id, value, disabled, ref: itemRef });
       return () => unregisterItem(id);
     }, [id, value, disabled, registerItem, unregisterItem]);
@@ -11552,7 +11584,7 @@ var ListBoxItem = (0, import_react25.forwardRef)(
     );
   }
 );
-var ListBoxPrimitive = (0, import_react25.forwardRef)(
+var ListBoxPrimitive = (0, import_react27.forwardRef)(
   function ListBoxPrimitive2({
     value,
     onSelectionChanged,
@@ -11562,9 +11594,9 @@ var ListBoxPrimitive = (0, import_react25.forwardRef)(
     orientation = "vertical",
     ...props
   }, ref) {
-    const itemsRef = (0, import_react25.useRef)([]);
-    const [highlightedIndex, setHighlightedIndex] = (0, import_react25.useState)(void 0);
-    const registerItem = (0, import_react25.useCallback)((item) => {
+    const itemsRef = (0, import_react27.useRef)([]);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react27.useState)(void 0);
+    const registerItem = (0, import_react27.useCallback)((item) => {
       itemsRef.current.push(item);
       itemsRef.current.sort((a, b) => {
         const aEl = a.ref.current;
@@ -11573,14 +11605,14 @@ var ListBoxPrimitive = (0, import_react25.forwardRef)(
         return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
       });
     }, []);
-    const unregisterItem = (0, import_react25.useCallback)((id) => {
+    const unregisterItem = (0, import_react27.useCallback)((id) => {
       itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
     }, []);
-    const isSelected = (0, import_react25.useCallback)(
+    const isSelected = (0, import_react27.useCallback)(
       (val) => (value ?? []).includes(val),
       [value]
     );
-    const onItemClickedHandler = (0, import_react25.useCallback)(
+    const onItemClickedHandler = (0, import_react27.useCallback)(
       (id) => {
         const index = itemsRef.current.findIndex((i) => i.id === id);
         if (index === -1) {
@@ -11604,13 +11636,13 @@ var ListBoxPrimitive = (0, import_react25.forwardRef)(
       },
       [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]
     );
-    const setHighlightedId = (0, import_react25.useCallback)((id) => {
+    const setHighlightedId = (0, import_react27.useCallback)((id) => {
       const index = itemsRef.current.findIndex((i) => i.id === id);
       if (index !== -1) {
         setHighlightedIndex(index);
       }
     }, []);
-    (0, import_react25.useEffect)(() => {
+    (0, import_react27.useEffect)(() => {
       if (highlightedIndex !== void 0) {
         itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
       }
@@ -11715,7 +11747,7 @@ var ListBoxMultipleUncontrolled = ({
     }
   );
 };
-var ListBox = (0, import_react25.forwardRef)(function ListBox2({
+var ListBox = (0, import_react27.forwardRef)(function ListBox2({
   value,
   onSelectionChanged,
   ...props
@@ -12849,7 +12881,7 @@ var ErrorComponent = ({
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
 var import_clsx28 = require("clsx");
@@ -12870,8 +12902,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react26.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react26.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react28.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react28.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -12973,13 +13005,13 @@ var ProgressIndicator = ({
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
 var import_clsx32 = __toESM(require("clsx"));
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: (0, import_clsx32.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react27.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react29.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         import_link.default,
         {
@@ -12995,8 +13027,8 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 
 // src/components/navigation/Navigation.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_react28 = require("react");
-var import_react29 = require("react");
+var import_react30 = require("react");
+var import_react31 = require("react");
 var import_link2 = __toESM(require_link2());
 var import_clsx33 = __toESM(require("clsx"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -13009,10 +13041,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = (0, import_react29.useState)(false);
-  const containerRef = (0, import_react29.useRef)();
-  const triggerRef = (0, import_react29.useRef)(null);
-  const id = (0, import_react29.useId)();
+  const [isOpen, setOpen] = (0, import_react31.useState)(false);
+  const containerRef = (0, import_react31.useRef)();
+  const triggerRef = (0, import_react31.useRef)(null);
+  const id = (0, import_react31.useId)();
   const style = useFloatingElement({
     active: isOpen,
     containerRef,
@@ -13020,7 +13052,7 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = (0, import_react29.useCallback)((event) => {
+  const onBlur = (0, import_react31.useCallback)((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
@@ -13074,10 +13106,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("nav", { ...restProps, className: (0, import_clsx33.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = (0, import_react29.useState)(false);
-  const id = (0, import_react29.useId)();
-  const menuRef = (0, import_react29.useRef)(null);
-  (0, import_react28.useEffect)(() => {
+  const [isMobileOpen, setIsMobileOpen] = (0, import_react31.useState)(false);
+  const id = (0, import_react31.useId)();
+  const menuRef = (0, import_react31.useRef)(null);
+  (0, import_react30.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
@@ -13132,7 +13164,7 @@ var Navigation = ({ ...props }) => {
 // src/components/navigation/Pagination.tsx
 var import_lucide_react10 = require("lucide-react");
 var import_clsx34 = __toESM(require("clsx"));
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var Pagination = ({
   overwriteTranslation,
@@ -13143,11 +13175,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const [value, setValue] = (0, import_react30.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react32.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -13826,7 +13858,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   overwriteTranslation,
@@ -13836,7 +13868,7 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const id = (0, import_react31.useId)();
+  const id = (0, import_react33.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     PropertyBase,
     {
@@ -14059,10 +14091,10 @@ var import_lucide_react19 = require("lucide-react");
 var import_clsx43 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_clsx42 = __toESM(require("clsx"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var Textarea = (0, import_react32.forwardRef)(function Textarea2({
+var Textarea = (0, import_react34.forwardRef)(function Textarea2({
   id,
   onChange,
   onChangeText,
@@ -14136,7 +14168,7 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react32.useId)();
+  const genId = (0, import_react34.useId)();
   const usedId = id ?? genId;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
@@ -14251,7 +14283,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_clsx48 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
@@ -14267,9 +14299,9 @@ var TableCell = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -14312,7 +14344,7 @@ var TableSortButton = ({
 var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_clsx47 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
@@ -14384,15 +14416,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react34 = require("react");
+var import_react36 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react34.useState)(false);
-  const [timer, setTimer] = (0, import_react34.useState)();
+  const [isHovered, setIsHovered] = (0, import_react36.useState)(false);
+  const [timer, setTimer] = (0, import_react36.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -14408,14 +14440,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -14428,9 +14460,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-var import_react35 = require("react");
+var import_react37 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -14488,10 +14520,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react36.useRef)(null);
-  const menuRef = (0, import_react36.useRef)(null);
+  const triggerRef = (0, import_react38.useRef)(null);
+  const menuRef = (0, import_react38.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react36.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react38.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -14502,7 +14534,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -14519,7 +14551,7 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -14555,7 +14587,7 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var defaultTableFilterTranslation = {
   en: {
@@ -14581,9 +14613,9 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react37.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react39.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -14697,22 +14729,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react38.useRef)(null);
-  const tableRef = (0, import_react38.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react38.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react40.useRef)(null);
+  const tableRef = (0, import_react40.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react40.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react38.useState)();
-  const [pagination, setPagination] = (0, import_react38.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react40.useState)();
+  const [pagination, setPagination] = (0, import_react40.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react38.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react38.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react40.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react40.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -14721,7 +14753,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react38.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react40.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -14729,12 +14761,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react38.useMemo)(() => {
+  const tableMinWidth = (0, import_react40.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react38.useMemo)(() => {
+  const updateColumnSizes = (0, import_react40.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -14851,18 +14883,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react38.useState)(false);
-  (0, import_react38.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react40.useState)(false);
+  (0, import_react40.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react38.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react40.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -14878,7 +14910,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react38.useMemo)(() => {
+  const columnSizeVars = (0, import_react40.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -15013,7 +15045,7 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react38.useMemo)(() => {
+  const columnsWithSelection = (0, import_react40.useMemo)(() => {
     return [
       {
         id: selectionRowId,
@@ -15082,7 +15114,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_clsx49 = require("clsx");
 
 // src/utils/writeToClipboard.ts
@@ -15102,8 +15134,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useTranslation([formTranslation]);
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react39.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react39.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react41.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react41.useState)(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -15245,7 +15277,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_clsx51 = __toESM(require("clsx"));
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var up = 1;
@@ -15266,7 +15298,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react40.useState)({
+  }, setAnimation] = (0, import_react42.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -15282,7 +15314,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react40.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react42.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -15292,7 +15324,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react40.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react42.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -15365,7 +15397,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -15533,18 +15565,18 @@ var Tooltip = ({
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-var import_react41 = require("react");
-var import_react42 = require("react");
+var import_react43 = require("react");
+var import_react44 = require("react");
 var import_clsx54 = __toESM(require("clsx"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react42.forwardRef)(function InsideLabelInput2({
+var InsideLabelInput = (0, import_react44.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = (0, import_react42.useState)(false);
-  const generatedId = (0, import_react41.useId)();
+  const [isFocused, setIsFocused] = (0, import_react44.useState)(false);
+  const generatedId = (0, import_react43.useId)();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: (0, import_clsx54.default)("relative"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -15597,20 +15629,20 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_lucide_react24 = require("lucide-react");
 var import_clsx55 = __toESM(require("clsx"));
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react43.forwardRef)(function ToggleableInput2({
+var ToggleableInput = (0, import_react45.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = (0, import_react43.useState)(initialState !== "display");
-  const innerRef = (0, import_react43.useRef)(null);
-  (0, import_react43.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react43.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react45.useState)(initialState !== "display");
+  const innerRef = (0, import_react45.useRef)(null);
+  (0, import_react45.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react45.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -15665,33 +15697,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-var import_react44 = require("react");
-var import_react45 = require("react");
 var import_react46 = require("react");
+var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var FocusTrap = (0, import_react46.forwardRef)(function FocusTrap2({
+var FocusTrap = (0, import_react48.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = (0, import_react44.useRef)(null);
-  (0, import_react45.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react46.useRef)(null);
+  (0, import_react47.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react47.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react47.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react49.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react49.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -15716,7 +15748,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react48 = require("react");
+var import_react50 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15754,7 +15786,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15763,10 +15795,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react49.default.useState(false);
-  (0, import_react49.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react51.default.useState(false);
+  (0, import_react51.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15786,13 +15818,13 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react50 = require("react");
+var import_react52 = require("react");
 var useRerender = () => {
-  return (0, import_react50.useReducer)(() => ({}), {})[1];
+  return (0, import_react52.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react51 = require("react");
+var import_react53 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15831,34 +15863,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react51.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react51.useState)(list);
-  const searchTags = (0, import_react51.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react51.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react53.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react53.useState)(list);
+  const searchTags = (0, import_react53.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react53.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react51.useMemo)(() => {
+  const filteredResult = (0, import_react53.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react51.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react53.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react51.useMemo)(() => {
+  const usedResult = (0, import_react53.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }