@helpwave/hightide 0.1.35 → 0.1.36

package/dist/index.mjs

@@ -39,12 +39,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;
@@ -53,7 +53,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe2, value, getSnapshot]
       );
-      useEffect38(
+      useEffect39(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe2(function() {
@@ -102,7 +102,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];
@@ -114,7 +114,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe2, value, getSnapshot]
         );
-        useEffect38(
+        useEffect39(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe2(function() {
@@ -140,7 +140,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;
       exports.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());
     }();
@@ -6914,8 +6914,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] = useState2(get);
   const setValue = useCallback((action) => {
@@ -6971,6 +6978,7 @@ var LanguageProvider = ({ children, language }) => {
     return LanguageUtil.DEFAULT_LANGUAGE;
   }, [language, languagePreference, storedLanguage]);
   useEffect2(() => {
+    if (!language) return;
     if (language === "system") {
       deleteStoredLanguage();
     } else {
@@ -7918,6 +7926,8 @@ var TimePickerUncontrolled = ({
 import clsx10 from "clsx";
 
 // src/components/dialog/Dialog.tsx
+import { useEffect as useEffect10 } from "react";
+import { useState as useState9 } from "react";
 import { useRef as useRef4 } from "react";
 import clsx9 from "clsx";
 import { X } from "lucide-react";
@@ -8283,10 +8293,21 @@ var Dialog = ({
   onClose,
   className,
   backgroundClassName,
-  position = "center"
+  position = "center",
+  isAnimated = true
 }) => {
   const translation = useTranslation([formTranslation]);
+  const [visible, setVisible] = useState9(isOpen);
   const ref = useRef4(null);
+  useEffect10(() => {
+    if (isOpen) {
+      setVisible(true);
+    } else {
+      if (!isAnimated) {
+        setVisible(false);
+      }
+    }
+  }, [isAnimated, isOpen]);
   const onCloseWrapper = () => {
     if (!isModal) return;
     onClose?.();
@@ -8294,7 +8315,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 = {
@@ -8308,6 +8329,7 @@ var Dialog = ({
       /* @__PURE__ */ jsx11(
         "div",
         {
+          hidden: !visible,
           className: clsx9(
             "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
             {
@@ -8316,21 +8338,30 @@ var Dialog = ({
             },
             backgroundClassName
           ),
-          hidden: !isOpen,
-          "aria-hidden": true,
-          onClick: onCloseWrapper
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
+          onClick: onCloseWrapper,
+          "aria-hidden": true
         }
       ),
       /* @__PURE__ */ jsxs8(
         "div",
         {
           ref,
-          hidden: !isOpen,
+          hidden: !visible,
           onKeyDown: (event) => {
             if (event.key === "Escape") {
               onCloseWrapper();
             }
           },
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
           className: clsx9(
             "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",
             {
@@ -8459,13 +8490,13 @@ import { forwardRef as forwardRef3, useImperativeHandle, useRef as useRef5 } fro
 import clsx11 from "clsx";
 
 // src/hooks/useDelay.ts
-import { useEffect as useEffect10, useState as useState9 } from "react";
+import { useEffect as useEffect11, useState as useState10 } from "react";
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = useState9(void 0);
+  const [timer, setTimer] = useState10(void 0);
   const { delay, disabled } = {
     ...defaultOptions2,
     ...options
@@ -8484,12 +8515,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  useEffect10(() => {
+  useEffect11(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -8676,11 +8707,11 @@ import {
   forwardRef as forwardRef4,
   useCallback as useCallback6,
   useContext as useContext2,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useId as useId3,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef6,
-  useState as useState11
+  useState as useState12
 } from "react";
 import clsx13 from "clsx";
 
@@ -8775,7 +8806,7 @@ var ChipList = ({
 };
 
 // src/hooks/useFloatingElement.ts
-import { useCallback as useCallback5, useEffect as useEffect11, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useState as useState11 } from "react";
 
 // src/utils/math.ts
 var clamp = (value, range2 = [0, 1]) => {
@@ -8838,7 +8869,7 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = useState10();
+  const [style, setStyle] = useState11();
   const isMounted = useIsMounted();
   const calculate = useCallback5(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -8870,14 +8901,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  useEffect11(() => {
+  useEffect12(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  useEffect11(() => {
+  useEffect12(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -8920,11 +8951,11 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = useState11([]);
+  const [options, setOptions] = useState12([]);
   const triggerRef = useRef6(null);
   const generatedId = useId3();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = useState11({
+  const [internalState, setInternalState] = useState12({
     isOpen
   });
   const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
@@ -9040,7 +9071,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -9075,7 +9106,7 @@ var SelectOption = forwardRef4(
     const itemRef = useRef6(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect12(() => {
+    useEffect13(() => {
       register({
         value,
         label,
@@ -9159,7 +9190,7 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef6(null);
   useImperativeHandle2(ref, () => innerRef.current);
-  useEffect12(() => {
+  useEffect13(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9237,7 +9268,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef6(null);
   useImperativeHandle2(ref, () => innerRef.current);
-  useEffect12(() => {
+  useEffect13(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9543,7 +9574,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx14 from "clsx";
 
 // src/theming/useTheme.tsx
-import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect13, useMemo as useMemo2, useState as useState12 } from "react";
+import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect14, useMemo as useMemo2, useState as useState13 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -9577,7 +9608,7 @@ var ThemeProvider = ({ children, theme }) => {
     setValue: setStoredTheme,
     deleteValue: deleteStoredTheme
   } = useLocalStorage("theme", "system");
-  const [themePreference, setThemePreference] = useState12("system");
+  const [themePreference, setThemePreference] = useState13("system");
   const resolvedTheme = useMemo2(() => {
     if (theme && theme !== "system") {
       return theme;
@@ -9590,14 +9621,15 @@ var ThemeProvider = ({ children, theme }) => {
     }
     return "light";
   }, [storedTheme, theme, themePreference]);
-  useEffect13(() => {
+  useEffect14(() => {
+    if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
     } else {
       setStoredTheme(theme);
     }
   }, [theme]);
-  useEffect13(() => {
+  useEffect14(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
   const getPreference = useCallback7(() => {
@@ -9605,10 +9637,10 @@ var ThemeProvider = ({ children, theme }) => {
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     getPreference();
   }, [getPreference]);
-  useEffect13(() => {
+  useEffect14(() => {
     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)");
@@ -10319,7 +10351,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback9, useEffect as useEffect16, useState as useState14 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect17, useState as useState15 } from "react";
 import clsx19 from "clsx";
 import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var Ring = ({
@@ -10348,7 +10380,7 @@ var AnimatedRing = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = useState14(0);
+  const [currentWidth, setCurrentWidth] = useState15(0);
   const milliseconds = 1e3 * fillAnimationDuration;
   const animate = useCallback9((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
@@ -10364,7 +10396,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -10399,7 +10431,7 @@ var RingWave = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = useState14(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = useState15(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
   const animate = useCallback9((timestamp, startTime) => {
@@ -10419,7 +10451,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -10454,7 +10486,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = useState14(0);
+  const [currentRing, setCurrentRing] = useState15(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ jsxs16(
     "div",
@@ -10608,11 +10640,11 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback10,
   useContext as useContext5,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useId as useId5,
   useMemo as useMemo6,
   useRef as useRef9,
-  useState as useState15
+  useState as useState16
 } from "react";
 import clsx20 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -10763,12 +10795,12 @@ var Carousel = ({
 }) => {
   const translation = useTranslation([defaultCarouselTranslationType]);
   const slideRefs = useRef9([]);
-  const [currentIndex, setCurrentIndex] = useState15(0);
-  const [hasFocus, setHasFocus] = useState15(false);
-  const [dragState, setDragState] = useState15();
+  const [currentIndex, setCurrentIndex] = useState16(0);
+  const [hasFocus, setHasFocus] = useState16(false);
+  const [dragState, setDragState] = useState16();
   const isPaused = hasFocus;
   const carouselContainerRef = useRef9(null);
-  const [disableClick, setDisableClick] = useState15(false);
+  const [disableClick, setDisableClick] = useState16(false);
   const timeOut = useRef9(void 0);
   const length = useMemo6(() => children.length, [children]);
   const paddingItemCount = 3;
@@ -10781,7 +10813,7 @@ var Carousel = ({
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   animationTime = Math.max(100, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  useEffect17(() => {
+  useEffect18(() => {
     const carousel = carouselContainerRef.current;
     if (carousel) {
       let onFocus = function() {
@@ -10817,7 +10849,7 @@ var Carousel = ({
       setCurrentIndex((currentIndex + length + 1) % length);
     }
   }, [canGoRight, currentIndex, length]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!timeOut.current && !isPaused) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -10869,7 +10901,7 @@ var Carousel = ({
     }
     setDragState(void 0);
   };
-  useEffect17(() => {
+  useEffect18(() => {
     setDisableClick(!dragState);
   }, [dragState]);
   return /* @__PURE__ */ jsx31(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ jsxs17(
@@ -11317,7 +11349,7 @@ var FloatingContainer = forwardRef9(function FloatingContainer2({
 });
 
 // src/components/layout/ListBox.tsx
-import React11, { createContext as createContext6, forwardRef as forwardRef10, useCallback as useCallback11, useContext as useContext6, useEffect as useEffect18, useRef as useRef11, useState as useState16 } from "react";
+import React11, { createContext as createContext6, forwardRef as forwardRef10, useCallback as useCallback11, useContext as useContext6, useEffect as useEffect19, useRef as useRef11, useState as useState17 } from "react";
 import { clsx as clsx24 } from "clsx";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var ListBoxContext = createContext6(null);
@@ -11340,7 +11372,7 @@ var ListBoxItem = forwardRef10(
     } = useListBoxContext();
     const itemRef = useRef11(null);
     const id = React11.useId();
-    useEffect18(() => {
+    useEffect19(() => {
       registerItem({ id, value, disabled, ref: itemRef });
       return () => unregisterItem(id);
     }, [id, value, disabled, registerItem, unregisterItem]);
@@ -11393,7 +11425,7 @@ var ListBoxPrimitive = forwardRef10(
     ...props
   }, ref) {
     const itemsRef = useRef11([]);
-    const [highlightedIndex, setHighlightedIndex] = useState16(void 0);
+    const [highlightedIndex, setHighlightedIndex] = useState17(void 0);
     const registerItem = useCallback11((item) => {
       itemsRef.current.push(item);
       itemsRef.current.sort((a, b) => {
@@ -11440,7 +11472,7 @@ var ListBoxPrimitive = forwardRef10(
         setHighlightedIndex(index);
       }
     }, []);
-    useEffect18(() => {
+    useEffect19(() => {
       if (highlightedIndex !== void 0) {
         itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
       }
@@ -12679,7 +12711,7 @@ var ErrorComponent = ({
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 
 // src/components/loading-states/LoadingContainer.tsx
 import { clsx as clsx28 } from "clsx";
@@ -12700,8 +12732,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState19(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState19(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState20(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState20(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -12826,8 +12858,8 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 // src/components/navigation/Navigation.tsx
 var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
-import { useEffect as useEffect21 } from "react";
-import { useCallback as useCallback14, useId as useId6, useRef as useRef14, useState as useState20 } from "react";
+import { useEffect as useEffect22 } from "react";
+import { useCallback as useCallback14, useId as useId6, useRef as useRef14, useState as useState21 } from "react";
 import clsx33 from "clsx";
 import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 function isSubItem(item) {
@@ -12839,7 +12871,7 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = useState20(false);
+  const [isOpen, setOpen] = useState21(false);
   const containerRef = useRef14();
   const triggerRef = useRef14(null);
   const id = useId6();
@@ -12904,10 +12936,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
   return /* @__PURE__ */ jsx49("nav", { ...restProps, className: clsx33("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx49("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx49(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx49(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = useState20(false);
+  const [isMobileOpen, setIsMobileOpen] = useState21(false);
   const id = useId6();
   const menuRef = useRef14(null);
-  useEffect21(() => {
+  useEffect22(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   return /* @__PURE__ */ jsxs28(Fragment10, { children: [
@@ -12962,7 +12994,7 @@ var Navigation = ({ ...props }) => {
 // src/components/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 import clsx34 from "clsx";
-import { useEffect as useEffect22, useState as useState21 } from "react";
+import { useEffect as useEffect23, useState as useState22 } from "react";
 import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var Pagination = ({
   overwriteTranslation,
@@ -12973,11 +13005,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const [value, setValue] = useState21((pageIndex + 1).toString());
+  const [value, setValue] = useState22((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect22(() => {
+  useEffect23(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -14081,7 +14113,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback16, useEffect as useEffect31, useMemo as useMemo9, useRef as useRef20, useState as useState28 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect32, useMemo as useMemo9, useRef as useRef20, useState as useState29 } from "react";
 import clsx48 from "clsx";
 import {
   flexRender,
@@ -14104,9 +14136,9 @@ var TableCell = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect26 } from "react";
+import { useEffect as useEffect27 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect26(() => {
+  useEffect27(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -14149,7 +14181,7 @@ var TableSortButton = ({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useEffect as useEffect29, useRef as useRef19, useState as useState26 } from "react";
+import { useEffect as useEffect30, useRef as useRef19, useState as useState27 } from "react";
 import clsx47 from "clsx";
 
 // src/utils/bagFunctions.ts
@@ -14221,15 +14253,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect27, useState as useState25 } from "react";
+import { useEffect as useEffect28, useState as useState26 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState25(false);
-  const [timer, setTimer] = useState25();
+  const [isHovered, setIsHovered] = useState26(false);
+  const [timer, setTimer] = useState26();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -14245,14 +14277,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  useEffect27(() => {
+  useEffect28(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -14265,9 +14297,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect28 } from "react";
+import { useEffect as useEffect29 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect28(() => {
+  useEffect29(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -14328,7 +14360,7 @@ var Menu = ({
   const triggerRef = useRef19(null);
   const menuRef = useRef19(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState26(true);
+  const [isHidden, setIsHidden] = useState27(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -14339,7 +14371,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  useEffect29(() => {
+  useEffect30(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -14356,7 +14388,7 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -14392,7 +14424,7 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect30, useState as useState27 } from "react";
+import { useEffect as useEffect31, useState as useState28 } from "react";
 import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
@@ -14418,9 +14450,9 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState27(columnFilterValue);
+  const [filterValue, setFilterValue] = useState28(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect30(() => {
+  useEffect31(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ jsx66(
@@ -14536,19 +14568,19 @@ var Table = ({
 }) => {
   const ref = useRef20(null);
   const tableRef = useRef20(null);
-  const [columnSizing, setColumnSizing] = useState28(columns.reduce((previousValue, currentValue) => {
+  const [columnSizing, setColumnSizing] = useState29(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState28();
-  const [pagination, setPagination] = useState28({
+  const [columnSizingInfo, setColumnSizingInfo] = useState29();
+  const [pagination, setPagination] = useState29({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState28(initialState?.columnFilters);
+  const [columnFilters, setColumnFilters] = useState29(initialState?.columnFilters);
   const computedColumnMinWidths = useMemo9(() => {
     return columns.reduce((previousValue, column) => {
       return {
@@ -14688,8 +14720,8 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState28(false);
-  useEffect31(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = useState29(false);
+  useEffect32(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
@@ -14699,7 +14731,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect31(() => {
+  useEffect32(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -14919,7 +14951,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-import { useState as useState29 } from "react";
+import { useState as useState30 } from "react";
 import { clsx as clsx49 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -14939,8 +14971,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useTranslation([formTranslation]);
-  const [isShowingIndication, setIsShowingIndication] = useState29(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState29(false);
+  const [isShowingIndication, setIsShowingIndication] = useState30(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState30(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]`,
@@ -15082,7 +15114,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback17, useEffect as useEffect32, useState as useState30 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect33, useState as useState31 } from "react";
 import clsx51 from "clsx";
 import { jsx as jsx70, jsxs as jsxs42 } from "react/jsx-runtime";
 var up = 1;
@@ -15103,7 +15135,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState30({
+  }, setAnimation] = useState31({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -15202,7 +15234,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect32(() => {
+  useEffect33(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -15371,7 +15403,7 @@ var Tooltip = ({
 
 // src/components/user-action/input/InsideLabelInput.tsx
 import { useId as useId9 } from "react";
-import { forwardRef as forwardRef14, useState as useState31 } from "react";
+import { forwardRef as forwardRef14, useState as useState32 } from "react";
 import clsx54 from "clsx";
 import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef14(function InsideLabelInput2({
@@ -15380,7 +15412,7 @@ var InsideLabelInput = forwardRef14(function InsideLabelInput2({
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = useState31(false);
+  const [isFocused, setIsFocused] = useState32(false);
   const generatedId = useId9();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs45("div", { className: clsx54("relative"), children: [
@@ -15434,7 +15466,7 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-import { forwardRef as forwardRef15, useEffect as useEffect33, useImperativeHandle as useImperativeHandle4, useRef as useRef21, useState as useState32 } from "react";
+import { forwardRef as forwardRef15, useEffect as useEffect34, useImperativeHandle as useImperativeHandle4, useRef as useRef21, useState as useState33 } from "react";
 import { Pencil } from "lucide-react";
 import clsx55 from "clsx";
 import { jsx as jsx74, jsxs as jsxs46 } from "react/jsx-runtime";
@@ -15444,10 +15476,10 @@ var ToggleableInput = forwardRef15(function ToggleableInput2({
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = useState32(initialState !== "display");
+  const [isEditing, setIsEditing] = useState33(initialState !== "display");
   const innerRef = useRef21(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect33(() => {
+  useEffect34(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -15519,16 +15551,16 @@ var FocusTrap = forwardRef16(function FocusTrap2({
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect34, useState as useState33 } from "react";
+import { useEffect as useEffect35, useState as useState34 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState33(show);
-  const [isTransitioning, setIsTransitioning] = useState33(!isOpen);
+  const [isOpen, setIsOpen] = useState34(show);
+  const [isTransitioning, setIsTransitioning] = useState34(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect34(() => {
+  useEffect35(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -15553,7 +15585,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect36 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15591,7 +15623,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect35(() => {
+  useEffect36(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15600,10 +15632,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React20, { useEffect as useEffect36 } from "react";
+import React20, { useEffect as useEffect37 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React20.useState(false);
-  useEffect36(() => {
+  useEffect37(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15629,7 +15661,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback18, useEffect as useEffect37, useMemo as useMemo10, useState as useState34 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect38, useMemo as useMemo10, useState as useState35 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15668,8 +15700,8 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = useState34(initialSearch ?? "");
-  const [result, setResult] = useState34(list);
+  const [search, setSearch] = useState35(initialSearch ?? "");
+  const [result, setResult] = useState35(list);
   const searchTags = useMemo10(() => additionalSearchTags ?? [], [additionalSearchTags]);
   const updateSearch = useCallback18((newSearch) => {
     const usedSearch = newSearch ?? search;
@@ -15678,7 +15710,7 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }