@helpwave/hightide 0.6.3 → 0.6.4

package/dist/index.mjs

@@ -8200,8 +8200,7 @@ import { createContext as createContext2, useContext as useContext2, useState as
 import { jsx as jsx15 } from "react/jsx-runtime";
 var defaultConfig = {
   tooltip: {
-    appearDelay: 200,
-    disappearDelay: 400
+    appearDelay: 400
   },
   theme: {
     initialTheme: "light"
@@ -10898,6 +10897,11 @@ var InputDialog = ({
   );
 };
 
+// src/components/user-interaction/select/Select.tsx
+import {
+  forwardRef as forwardRef9
+} from "react";
+
 // src/components/user-interaction/select/SelectContext.tsx
 import { createContext as createContext8, useCallback as useCallback14, useContext as useContext8, useEffect as useEffect17, useId as useId9, useMemo as useMemo12, useRef as useRef12, useState as useState19 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -11406,170 +11410,16 @@ var MultiSelectOption = SelectOption;
 var MultiSelectContent = SelectContent;
 var MultiSelectButton = SelectButton;
 
-// src/components/user-interaction/select/MultiSelect.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
-var MultiSelect = forwardRef9(function MultiSelect2({
-  children,
-  contentPanelProps,
-  buttonProps,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs18(MultiSelectRoot, { ...props, children: [
-    /* @__PURE__ */ jsx36(MultiSelectButton, { ref, ...buttonProps }),
-    /* @__PURE__ */ jsx36(MultiSelectContent, { ...contentPanelProps, children })
-  ] });
-});
-var MultiSelectUncontrolled = forwardRef9(function MultiSelectUncontrolled2({
-  value: initialValue,
-  onValueChange,
-  ...props
-}, ref) {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx36(
-    MultiSelect,
-    {
-      ...props,
-      ref,
-      value,
-      onValueChange: setValue
-    }
-  );
-});
-
-// src/components/user-interaction/select/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef10, useEffect as useEffect19, useImperativeHandle as useImperativeHandle4, useRef as useRef14 } from "react";
-import { XIcon, Plus } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
-var MultiSelectChipDisplayButton = forwardRef10(function MultiSelectChipDisplayButton2({
-  id,
-  ...props
-}, ref) {
-  const { state, trigger, item, ids, setIds } = useSelectContext();
-  const { register, unregister, toggleOpen } = trigger;
-  useEffect19(() => {
-    if (id) {
-      setIds((prev) => ({
-        ...prev,
-        trigger: id
-      }));
-    }
-  }, [id, setIds]);
-  const innerRef = useRef14(null);
-  useImperativeHandle4(ref, () => innerRef.current);
-  useEffect19(() => {
-    register(innerRef);
-    return () => unregister();
-  }, [register, unregister]);
-  const disabled = !!props?.disabled || !!state.disabled;
-  const invalid = state.invalid;
-  return /* @__PURE__ */ jsxs19(
-    "div",
-    {
-      ...props,
-      ref: innerRef,
-      onClick: (event) => {
-        toggleOpen();
-        props.onClick?.(event);
-      },
-      "data-name": props["data-name"] ?? "select-button-chips",
-      "data-value": state.value.length > 0 ? "" : void 0,
-      "data-disabled": disabled ? "" : void 0,
-      "data-invalid": invalid ? "" : void 0,
-      "aria-invalid": invalid,
-      "aria-disabled": disabled,
-      children: [
-        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ jsxs19(Chip, { className: "gap-x-2", children: [
-          label,
-          /* @__PURE__ */ jsx37(
-            Button,
-            {
-              onClick: () => {
-                item.toggleSelection(value, false);
-              },
-              size: "xs",
-              color: "negative",
-              coloringStyle: "text",
-              layout: "icon",
-              className: "flex-row-0 items-center",
-              children: /* @__PURE__ */ jsx37(XIcon, { className: "size-5" })
-            }
-          )
-        ] }, value)),
-        /* @__PURE__ */ jsx37(
-          Button,
-          {
-            id: ids.trigger,
-            onClick: (event) => {
-              event.stopPropagation();
-              toggleOpen();
-            },
-            onKeyDown: (event) => {
-              switch (event.key) {
-                case "ArrowDown":
-                  toggleOpen(true, { highlightStartPositionBehavior: "first" });
-                  break;
-                case "ArrowUp":
-                  toggleOpen(true, { highlightStartPositionBehavior: "last" });
-              }
-            },
-            layout: "icon",
-            size: "sm",
-            color: "neutral",
-            "aria-invalid": invalid,
-            "aria-disabled": disabled,
-            "aria-haspopup": "listbox",
-            "aria-expanded": state.isOpen,
-            "aria-controls": state.isOpen ? ids.content : void 0,
-            className: "size-9",
-            children: /* @__PURE__ */ jsx37(Plus, {})
-          }
-        )
-      ]
-    }
-  );
-});
-var MultiSelectChipDisplay = forwardRef10(function MultiSelectChipDisplay2({
-  children,
-  contentPanelProps,
-  chipDisplayProps,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs19(MultiSelectRoot, { ...props, children: [
-    /* @__PURE__ */ jsx37(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
-    /* @__PURE__ */ jsx37(MultiSelectContent, { ...contentPanelProps, children })
-  ] });
-});
-var MultiSelectChipDisplayUncontrolled = forwardRef10(function MultiSelectChipDisplayUncontrolled2({
-  value: initialValue,
-  onValueChange,
-  ...props
-}, ref) {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx37(
-    MultiSelectChipDisplay,
-    {
-      ...props,
-      ref,
-      value,
-      onValueChange: setValue
-    }
-  );
-});
-
 // src/components/user-interaction/select/Select.tsx
-import {
-  forwardRef as forwardRef11
-} from "react";
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
-var Select = forwardRef11(function Select2({
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+var Select = forwardRef9(function Select2({
   children,
   contentPanelProps,
   buttonProps,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsxs20(SelectRoot, { ...props, children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs18(SelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx36(
       SelectButton,
       {
         ref,
@@ -11581,16 +11431,16 @@ var Select = forwardRef11(function Select2({
         }
       }
     ),
-    /* @__PURE__ */ jsx38(SelectContent, { ...contentPanelProps, children })
+    /* @__PURE__ */ jsx36(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = forwardRef11(function SelectUncontrolled2({
+var SelectUncontrolled = forwardRef9(function SelectUncontrolled2({
   value: initialValue,
   onValueChange,
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx36(
     Select,
     {
       ...props,
@@ -11602,7 +11452,7 @@ var SelectUncontrolled = forwardRef11(function SelectUncontrolled2({
 });
 
 // src/components/layout/dialog/LanguageDialog.tsx
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var LanguageDialog = ({
   onClose,
   titleOverwrite,
@@ -11611,15 +11461,15 @@ var LanguageDialog = ({
 }) => {
   const { locale, setLocale } = useLocale();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx37(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("language"),
       description: descriptionOverwrite ?? translation("chooseLanguage"),
       onClose,
       ...props,
-      children: /* @__PURE__ */ jsxs21("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsxs19("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx37(
           Select,
           {
             value: locale,
@@ -11627,10 +11477,10 @@ var LanguageDialog = ({
             buttonProps: {
               selectedDisplay: (locale2) => LocalizationUtil.languagesLocalNames[locale2]
             },
-            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ jsx39(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
+            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ jsx37(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
           }
         ),
-        /* @__PURE__ */ jsx39("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx39(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx37("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx37(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -11641,8 +11491,8 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx14 from "clsx";
 
 // src/contexts/ThemeContext.tsx
-import { createContext as createContext9, useCallback as useCallback15, useContext as useContext9, useEffect as useEffect20, useMemo as useMemo13, useState as useState20 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { createContext as createContext9, useCallback as useCallback15, useContext as useContext9, useEffect as useEffect19, useMemo as useMemo13, useState as useState20 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
@@ -11668,7 +11518,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -11676,7 +11526,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme]);
-  useEffect20(() => {
+  useEffect19(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
   const getPreference = useCallback15(() => {
@@ -11684,10 +11534,10 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect20(() => {
+  useEffect19(() => {
     getPreference();
   }, [getPreference]);
-  useEffect20(() => {
+  useEffect19(() => {
     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)");
@@ -11700,7 +11550,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       noPrefQuery.removeEventListener("change", getPreference);
     };
   }, [getPreference]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx38(
     ThemeContext.Provider,
     {
       value: {
@@ -11726,14 +11576,14 @@ var useTheme = () => {
 };
 
 // src/components/layout/dialog/ThemeDialog.tsx
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx41(MoonIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx39(MoonIcon, { className: clsx14("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ jsx41(SunIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx39(SunIcon, { className: clsx14("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ jsx41(MonitorCog, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx39(MonitorCog, { className: clsx14("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -11744,34 +11594,34 @@ var ThemeDialog = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx39(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("pThemes", { count: 1 }),
       description: descriptionOverwrite ?? translation("chooseTheme"),
       onClose,
       ...props,
-      children: /* @__PURE__ */ jsxs22("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsxs20("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx39(
           Select,
           {
             value: theme,
             onValueChange: (theme2) => setTheme(theme2),
             iconAppearance: "right",
             buttonProps: {
-              selectedDisplay: (value) => /* @__PURE__ */ jsxs22("div", { className: "flex-row-2 items-center", children: [
-                /* @__PURE__ */ jsx41(ThemeIcon, { theme }),
+              selectedDisplay: (value) => /* @__PURE__ */ jsxs20("div", { className: "flex-row-2 items-center", children: [
+                /* @__PURE__ */ jsx39(ThemeIcon, { theme }),
                 translation("sThemeMode", { theme: value })
               ] }),
               className: "min-w-32"
             },
-            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx41(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs22("div", { className: "flex-row-2 items-center", children: [
-              /* @__PURE__ */ jsx41(ThemeIcon, { theme: theme2 }),
+            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx39(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs20("div", { className: "flex-row-2 items-center", children: [
+              /* @__PURE__ */ jsx39(ThemeIcon, { theme: theme2 }),
               translation("sThemeMode", { theme: theme2 })
             ] }) }, theme2))
           }
         ),
-        /* @__PURE__ */ jsx41("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx41(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx39("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx39(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -11780,14 +11630,14 @@ var ThemeDialog = ({
 // src/components/layout/loading/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
 import clsx15 from "clsx";
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs23("div", { className: clsx15("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx42(AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ jsxs21("div", { className: clsx15("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx40(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
@@ -11797,14 +11647,14 @@ import { useState as useState21 } from "react";
 
 // src/components/layout/loading/LoadingContainer.tsx
 import { clsx as clsx16 } from "clsx";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx43("div", { className: clsx16("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ jsx41("div", { className: clsx16("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
 import { clsx as clsx17 } from "clsx";
-import { Fragment as Fragment5, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -11824,33 +11674,33 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx44(Fragment5, { children: loadingComponent ?? /* @__PURE__ */ jsx44(LoadingContainer, { className: clsx17(className) }) });
+    return /* @__PURE__ */ jsx42(Fragment5, { children: loadingComponent ?? /* @__PURE__ */ jsx42(LoadingContainer, { className: clsx17(className) }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx44(Fragment5, { children: errorComponent ?? /* @__PURE__ */ jsx44(LoadingContainer, { className: clsx17("bg-negative", className) }) });
+    return /* @__PURE__ */ jsx42(Fragment5, { children: errorComponent ?? /* @__PURE__ */ jsx42(LoadingContainer, { className: clsx17("bg-negative", className) }) });
   }
-  return /* @__PURE__ */ jsx44(Fragment5, { children });
+  return /* @__PURE__ */ jsx42(Fragment5, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
 import clsx18 from "clsx";
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs24("div", { className: clsx18("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx45(HelpwaveLogo, { animate: "loading" }),
+  return /* @__PURE__ */ jsxs22("div", { className: clsx18("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx43(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/layout/navigation/BreadCrumbs.tsx
 var import_link = __toESM(require_link2());
-import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 var BreadCrumbLink = ({ ...props }) => {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx44(
     import_link.default,
     {
       ...props,
@@ -11859,29 +11709,29 @@ var BreadCrumbLink = ({ ...props }) => {
   );
 };
 var BreadCrumbDivider = () => {
-  return /* @__PURE__ */ jsx46("span", { "data-name": "breadcrumb-divider", children: "/" });
+  return /* @__PURE__ */ jsx44("span", { "data-name": "breadcrumb-divider", children: "/" });
 };
 var BreadCrumbGroup = ({ children, divider, ...props }) => {
   const items = ArrayUtil.resolveSingleOrArray(children);
-  return /* @__PURE__ */ jsx46("ul", { ...props, "data-name": props["data-name"] ?? "breadcrumb", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx44("ul", { ...props, "data-name": props["data-name"] ?? "breadcrumb", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs25("li", { "data-name": "breadcrumb-item", children: [
+    return /* @__PURE__ */ jsxs23("li", { "data-name": "breadcrumb-item", children: [
       item,
-      !isLast && divider !== null && (divider ?? /* @__PURE__ */ jsx46(BreadCrumbDivider, {}))
+      !isLast && divider !== null && (divider ?? /* @__PURE__ */ jsx44(BreadCrumbDivider, {}))
     ] }, index);
   }) });
 };
 var BreadCrumbs = ({ crumbs }) => {
-  return /* @__PURE__ */ jsx46(BreadCrumbGroup, { children: crumbs.map(({ href, label }, index) => /* @__PURE__ */ jsx46(BreadCrumbLink, { href, children: label }, index)) });
+  return /* @__PURE__ */ jsx44(BreadCrumbGroup, { children: crumbs.map(({ href, label }, index) => /* @__PURE__ */ jsx44(BreadCrumbLink, { href, children: label }, index)) });
 };
 
 // src/components/layout/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 useCallback16, useId as useId10, useRef as useRef15, useState as useState22 } from "react";
+import { Menu as MenuIcon, XIcon } from "lucide-react";
+import { useEffect as useEffect20 } from "react";
+import { useCallback as useCallback16, useId as useId10, useRef as useRef14, useState as useState22 } from "react";
 import clsx19 from "clsx";
-import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -11892,8 +11742,8 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = useState22(false);
-  const containerRef = useRef15(null);
-  const triggerRef = useRef15(null);
+  const containerRef = useRef14(null);
+  const triggerRef = useRef14(null);
   const id = useId10();
   const style = useFloatingElement({
     active: isOpen,
@@ -11909,8 +11759,8 @@ var NavigationItemWithSubItem = ({
     }
   }, []);
   const { zIndex } = useOverlayRegistry();
-  return /* @__PURE__ */ jsxs26(Fragment6, { children: [
-    /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
+    /* @__PURE__ */ jsxs24(
       "button",
       {
         id: "navigation-" + id,
@@ -11926,11 +11776,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ jsx47(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ jsx45(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx45(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -11949,7 +11799,7 @@ var NavigationItemWithSubItem = ({
           { "opacity-0": !style }
         ),
         style: { ...style, zIndex },
-        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx47("li", { children: /* @__PURE__ */ jsx47(
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx45("li", { children: /* @__PURE__ */ jsx45(
           import_link2.default,
           {
             href: link,
@@ -11963,25 +11813,25 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx47("ul", { ...restProps, className: clsx19("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx47("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx47(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx47(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx45("ul", { ...restProps, className: clsx19("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx45("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx45(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx45(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = useState22(false);
   const id = useId10();
-  const menuRef = useRef15(null);
-  useEffect21(() => {
+  const menuRef = useRef14(null);
+  useEffect20(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
-  return /* @__PURE__ */ jsxs26("nav", { children: [
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs24("nav", { children: [
+    /* @__PURE__ */ jsx45(
       NavigationItemList,
       {
         ...props,
         className: clsx19("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx45(
       Button,
       {
         layout: "icon",
@@ -11992,10 +11842,10 @@ var Navigation = ({ ...props }) => {
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ jsx47(MenuIcon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx45(MenuIcon, { className: "w-6 h-6" })
       }
     ),
-    /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsxs24(
       "div",
       {
         id: "navigation-menu-" + id,
@@ -12017,17 +11867,17 @@ var Navigation = ({ ...props }) => {
         ),
         style: { zIndex },
         children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx45(
             Button,
             {
               layout: "icon",
               coloringStyle: "text",
               color: "neutral",
               onClick: () => setIsMobileOpen(false),
-              children: /* @__PURE__ */ jsx47(XIcon2, {})
+              children: /* @__PURE__ */ jsx45(XIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx47(NavigationItemList, { ...props, className: clsx19("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx45(NavigationItemList, { ...props, className: clsx19("flex-col-8", props.className) })
         ]
       }
     )
@@ -12037,8 +11887,8 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 import clsx20 from "clsx";
-import { useEffect as useEffect22, useState as useState23 } from "react";
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useState as useState23 } from "react";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -12051,7 +11901,7 @@ var Pagination = ({
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect22(() => {
+  useEffect21(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -12061,8 +11911,8 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs27("div", { className: clsx20("flex-row-1", className), style, children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs25("div", { className: clsx20("flex-row-1", className), style, children: [
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -12070,10 +11920,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(0),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ jsx48(ChevronFirst, {})
+        children: /* @__PURE__ */ jsx46(ChevronFirst, {})
       }
     ),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -12081,11 +11931,11 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex - 1),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ jsx48(ChevronLeft2, {})
+        children: /* @__PURE__ */ jsx46(ChevronLeft2, {})
       }
     ),
-    /* @__PURE__ */ jsxs27("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsxs25("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ jsx46(
         Input,
         {
           value,
@@ -12109,8 +11959,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ jsx48("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx46("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ jsx46(
         "span",
         {
           className: "flex-row-2 w-24 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
@@ -12118,7 +11968,7 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -12126,10 +11976,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex + 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ jsx48(ChevronRight2, {})
+        children: /* @__PURE__ */ jsx46(ChevronRight2, {})
       }
     ),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -12137,7 +11987,7 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageCount - 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ jsx48(ChevronLast, {})
+        children: /* @__PURE__ */ jsx46(ChevronLast, {})
       }
     )
   ] });
@@ -12146,7 +11996,7 @@ var Pagination = ({
 // src/components/layout/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx21 from "clsx";
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -12168,12 +12018,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: clsx21("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ jsx49("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs26(
           Button,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -12182,14 +12032,14 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx49(ChevronLeft3, { size: 14 }),
+              /* @__PURE__ */ jsx47(ChevronLeft3, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx49("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ jsx49(
+          return /* @__PURE__ */ jsx47(
             "div",
             {
               onClick: () => seen && update(index),
@@ -12209,7 +12059,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ jsx49("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs28(
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs26(
           Button,
           {
             onClick: () => update(currentStep + 1),
@@ -12217,18 +12067,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ jsx49(ChevronRight3, { size: 14 })
+              /* @__PURE__ */ jsx47(ChevronRight3, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ jsx49("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs28(
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs26(
           Button,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx49(Check, { size: 14 }),
+              /* @__PURE__ */ jsx47(Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -12239,7 +12089,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx47(
     StepperBar,
     {
       ...props,
@@ -12251,14 +12101,14 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
 
 // src/components/layout/table/FillerCell.tsx
 import { Minus } from "lucide-react";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var FillerCell = ({ ...props }) => {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ...props,
       "data-name": PropsUtil.dataAttributes.name("table-filler-cell"),
-      children: /* @__PURE__ */ jsx50(Minus, { className: "max-w-4 max-h-4" })
+      children: /* @__PURE__ */ jsx48(Minus, { className: "max-w-4 max-h-4" })
     }
   );
 };
@@ -12278,7 +12128,7 @@ var TableFilters = {
 };
 
 // src/components/layout/table/Table.tsx
-import { useCallback as useCallback20, useEffect as useEffect28, useMemo as useMemo15, useRef as useRef18, useState as useState28 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect28, useMemo as useMemo15, useRef as useRef17, useState as useState28 } from "react";
 import clsx26 from "clsx";
 import {
   flexRender,
@@ -12291,18 +12141,18 @@ import {
 
 // src/components/layout/table/TableCell.tsx
 import { clsx as clsx22 } from "clsx";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx51("span", { className: clsx22("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx49("span", { className: clsx22("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect22 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect23(() => {
+  useEffect22(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -12315,37 +12165,33 @@ import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp as ChevronUp2 }
 import clsx24 from "clsx";
 
 // src/components/user-interaction/Tooltip.tsx
-import { useCallback as useCallback17, useMemo as useMemo14, useRef as useRef16, useState as useState24 } from "react";
+import { useEffect as useEffect23 } from "react";
+import { useId as useId11 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo14, useRef as useRef15, useState as useState24 } from "react";
 import { clsx as clsx23 } from "clsx";
 import { createPortal as createPortal6 } from "react-dom";
-import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
 var Tooltip = ({
   tooltip,
   children,
-  appearDelay: appearDelayOverwrite,
-  disappearDelay: disappearDelayOverwrite,
+  appearDelay: appearOverwrite,
   tooltipClassName,
   containerClassName,
   position = "bottom",
   disabled = false
 }) => {
-  const [state, setState] = useState24({
-    isShown: false,
-    timer: null
-  });
+  const id = useId11();
+  const [open, setOpen] = useState24(false);
+  const timeoutRef = useRef15(null);
   const { config } = useHightideConfig();
   const appearDelay = useMemo14(
-    () => appearDelayOverwrite ?? config.tooltip.appearDelay,
-    [config.tooltip.appearDelay, appearDelayOverwrite]
-  );
-  const disappearDelay = useMemo14(
-    () => disappearDelayOverwrite ?? config.tooltip.disappearDelay,
-    [config.tooltip.disappearDelay, disappearDelayOverwrite]
+    () => appearOverwrite ?? config.tooltip.appearDelay,
+    [appearOverwrite, config.tooltip.appearDelay]
   );
-  const anchorRef = useRef16(null);
-  const containerRef = useRef16(null);
-  const triangleRef = useRef16(null);
-  const isActive = !disabled && state.isShown;
+  const anchorRef = useRef15(null);
+  const containerRef = useRef15(null);
+  const triangleRef = useRef15(null);
+  const isActive = !disabled && open;
   const { isVisible, transitionState, callbacks } = useTransitionState(
     useMemo14(() => ({ isOpen: isActive }), [isActive])
   );
@@ -12374,66 +12220,62 @@ var Tooltip = ({
   const regsitryOptions = useMemo14(() => ({ isActive }), [isActive]);
   const { zIndex } = useOverlayRegistry(regsitryOptions);
   const { zIndex: zIndexTriangle } = useOverlayRegistry(regsitryOptions);
-  const onEnter = useCallback17(() => {
-    setState((prevState) => {
-      if (prevState.isShown) {
-        clearTimeout(prevState.timer);
-        return {
-          ...prevState,
-          timer: null
-        };
-      }
-      return {
-        ...prevState,
-        timer: setTimeout(() => {
-          setState((prevState2) => {
-            clearTimeout(prevState2.timer);
-            return { ...prevState2, isShown: true, timer: null };
-          });
-        }, appearDelay)
-      };
-    });
-  }, [appearDelay]);
-  const onLeave = useCallback17(() => {
-    setState((prevState) => {
-      if (!prevState.isShown) {
-        clearTimeout(prevState.timer);
-        return {
-          ...prevState,
-          timer: null
-        };
+  const openWithDelay = useCallback17(() => {
+    if (timeoutRef.current || open) return;
+    timeoutRef.current = window.setTimeout(() => {
+      timeoutRef.current = null;
+      setOpen(true);
+    }, appearDelay);
+  }, [appearDelay, open]);
+  const close3 = useCallback17(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setOpen(false);
+  }, []);
+  useEffect23(() => {
+    if (!open) return;
+    const closeOnBlur = () => close3();
+    const closeOnScroll = () => close3();
+    window.addEventListener("blur", closeOnBlur);
+    window.addEventListener("scroll", closeOnScroll, true);
+    return () => {
+      window.removeEventListener("blur", closeOnBlur);
+      window.removeEventListener("scroll", closeOnScroll, true);
+    };
+  }, [open, close3]);
+  useEffect23(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-      clearTimeout(prevState.timer);
-      return {
-        ...prevState,
-        timer: setTimeout(() => {
-          setState((prevState2) => {
-            clearTimeout(prevState2.timer);
-            return { ...prevState2, isShown: false, timer: null };
-          });
-        }, disappearDelay)
-      };
-    });
-  }, [disappearDelay]);
-  return /* @__PURE__ */ jsxs29(
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: anchorRef,
       className: clsx23("relative inline-block", containerClassName),
-      onPointerEnter: onEnter,
-      onPointerLeave: onLeave,
+      "aria-describedby": isVisible ? id : void 0,
+      onPointerEnter: openWithDelay,
+      onPointerLeave: close3,
+      onPointerCancel: close3,
+      onFocus: openWithDelay,
+      onBlur: close3,
       children: [
         children,
-        /* @__PURE__ */ jsxs29(Visibility, { isVisible: isActive || isVisible, children: [
+        /* @__PURE__ */ jsxs27(Visibility, { isVisible: isActive || isVisible, children: [
           createPortal6(
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 ref: containerRef,
+                id,
                 ...callbacks,
-                onPointerEnter: onEnter,
                 "data-name": PropsUtil.dataAttributes.name("tooltip"),
                 "data-state": transitionState,
+                role: "tooltip",
                 className: tooltipClassName,
                 style: { ...css, zIndex },
                 children: tooltip
@@ -12442,7 +12284,7 @@ var Tooltip = ({
             document.body
           ),
           createPortal6(
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 ref: triangleRef,
@@ -12461,7 +12303,7 @@ var Tooltip = ({
 };
 
 // src/components/layout/table/TableSortButton.tsx
-import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -12473,16 +12315,16 @@ var TableSortButton = ({
 }) => {
   const translation = useHightideTranslation();
   const { sortingsCount, index } = sortingIndexDisplay;
-  let icon = /* @__PURE__ */ jsx53(ChevronsUpDown, { className: "size-4" });
+  let icon = /* @__PURE__ */ jsx51(ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx53(ChevronUp2, { className: "size-4" }) : /* @__PURE__ */ jsx53(ChevronDown3, { className: "size-4" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx51(ChevronUp2, { className: "size-4" }) : /* @__PURE__ */ jsx51(ChevronDown3, { className: "size-4" });
   }
   const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
-  return /* @__PURE__ */ jsx53(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx51(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs28(
     Button,
     {
       layout: hasSortingIndex ? "default" : "icon",
@@ -12491,7 +12333,7 @@ var TableSortButton = ({
       className: clsx24("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx53(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx51(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx51(
           "div",
           {
             className: clsx24("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
@@ -12508,7 +12350,7 @@ var TableSortButton = ({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback18, useEffect as useEffect26, useRef as useRef17, useState as useState26 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect26, useRef as useRef16, useState as useState26 } from "react";
 import clsx25 from "clsx";
 
 // src/utils/bagFunctions.ts
@@ -12644,14 +12486,14 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-interaction/Menu.tsx
-import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx54(
+}) => /* @__PURE__ */ jsx52(
   "div",
   {
     className: clsx25("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
@@ -12684,8 +12526,8 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef17(null);
-  const menuRef = useRef17(null);
+  const triggerRef = useRef16(null);
+  const menuRef = useRef16(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const [isHidden, setIsHidden] = useState26(true);
   const bag = {
@@ -12723,9 +12565,9 @@ var Menu = ({
   const { zIndex } = useOverlayRegistry({
     isActive: isOpen
   });
-  return /* @__PURE__ */ jsxs31(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment7, { children: [
     trigger(bag, useCallback18((el) => triggerRef.current = el, [])),
-    createPortal7(/* @__PURE__ */ jsx54(
+    createPortal7(/* @__PURE__ */ jsx52(
       "div",
       {
         ref: menuRef,
@@ -12756,7 +12598,7 @@ var Menu = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { useEffect as useEffect27, useState as useState27 } from "react";
-import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
@@ -12768,21 +12610,21 @@ var TableFilterButton = ({
   useEffect27(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx53(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs32("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx55(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs30("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx53(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "xs",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ jsx55(FilterIcon, { className: "size-4" })
+            children: /* @__PURE__ */ jsx53(FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ jsx55(
+        hasFilter && /* @__PURE__ */ jsx53(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12790,9 +12632,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close: close3 }) => /* @__PURE__ */ jsxs32("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx55("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx55(
+      children: ({ close: close3 }) => /* @__PURE__ */ jsxs30("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx53("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx53(
           Input,
           {
             value: filterValue ?? "",
@@ -12802,8 +12644,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs32("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ jsx55(
+        filterType === "range" && /* @__PURE__ */ jsxs30("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[0].toString() ?? "",
@@ -12816,8 +12658,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx55("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx53("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[1].toString() ?? "",
@@ -12831,8 +12673,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs32(Fragment8, { children: [
-          /* @__PURE__ */ jsx55(
+        filterType === "dateRange" && /* @__PURE__ */ jsxs30(Fragment8, { children: [
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12845,7 +12687,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12859,12 +12701,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs32("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx55(Button, { color: "negative", size: "sm", onClick: () => {
+        /* @__PURE__ */ jsxs30("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx53(Button, { color: "negative", size: "sm", onClick: () => {
             column.setFilterValue(void 0);
             close3();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx55(Button, { size: "sm", onClick: () => {
+          /* @__PURE__ */ jsx53(Button, { size: "sm", onClick: () => {
             column.setFilterValue(filterValue);
             close3();
           }, children: translation("apply") })
@@ -12877,7 +12719,7 @@ var TableFilterButton = ({
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check2, Minus as Minus2 } from "lucide-react";
 import { useCallback as useCallback19 } from "react";
-import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 var Checkbox = ({
   value = false,
   indeterminate = false,
@@ -12895,7 +12737,7 @@ var Checkbox = ({
     onValueChange?.(!value);
     onEditComplete?.(!value);
   }, [onEditComplete, onValueChange, value]);
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...props,
@@ -12922,8 +12764,8 @@ var Checkbox = ({
       "aria-checked": indeterminate ? "mixed" : value,
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
       children: [
-        /* @__PURE__ */ jsx56(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx56(Minus2, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsx56(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx56(Check2, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
+        /* @__PURE__ */ jsx54(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx54(Minus2, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx54(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx54(Check2, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
       ]
     }
   );
@@ -12934,7 +12776,7 @@ var CheckboxUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx54(
     Checkbox,
     {
       ...props,
@@ -12945,7 +12787,7 @@ var CheckboxUncontrolled = ({
 };
 
 // src/components/layout/table/Table.tsx
-import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -12959,8 +12801,8 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = useRef18(null);
-  const tableRef = useRef18(null);
+  const ref = useRef17(null);
+  const tableRef = useRef17(null);
   const [columnSizing, setColumnSizing] = useState28(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
@@ -13065,7 +12907,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx57(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx55(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13150,8 +12992,8 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs34("div", { ref, "data-name": PropsUtil.dataAttributes.name("table-container"), className, children: [
-    /* @__PURE__ */ jsx57("div", { "data-name": PropsUtil.dataAttributes.name("table-scroll-wrapper"), className: tableContainerClassName, children: /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs32("div", { ref, "data-name": PropsUtil.dataAttributes.name("table-container"), className, children: [
+    /* @__PURE__ */ jsx55("div", { "data-name": PropsUtil.dataAttributes.name("table-scroll-wrapper"), className: tableContainerClassName, children: /* @__PURE__ */ jsxs32(
       "table",
       {
         ref: tableRef,
@@ -13162,7 +13004,7 @@ var Table = ({
         },
         className: tableClassName,
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx57("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx57(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx55("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx55(
             "col",
             {
               style: {
@@ -13173,16 +13015,16 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx57("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx57("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsx55("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx55("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsxs32(
               "th",
               {
                 colSpan: header.colSpan,
                 "data-name": PropsUtil.dataAttributes.name("table-header-cell"),
                 className: clsx26("group/table-header-cell", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ jsx57(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs34("div", { className: "flex-row-1 items-center", children: [
-                    /* @__PURE__ */ jsx57(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx57(
+                  /* @__PURE__ */ jsx55(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs32("div", { className: "flex-row-1 items-center", children: [
+                    /* @__PURE__ */ jsx55(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx55(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
@@ -13208,7 +13050,7 @@ var Table = ({
                         }
                       }
                     ) }),
-                    /* @__PURE__ */ jsx57(Visibility, { isVisible: header.column.getCanFilter() && !!header.column.columnDef.meta?.filterType, children: /* @__PURE__ */ jsx57(
+                    /* @__PURE__ */ jsx55(Visibility, { isVisible: header.column.getCanFilter() && !!header.column.columnDef.meta?.filterType, children: /* @__PURE__ */ jsx55(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13220,7 +13062,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  /* @__PURE__ */ jsx57(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx57(
+                  /* @__PURE__ */ jsx55(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx55(
                     "div",
                     {
                       onPointerDown: header.getResizeHandler(),
@@ -13241,16 +13083,16 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxs34("tbody", { children: [
+          /* @__PURE__ */ jsxs32("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx57(
+              return /* @__PURE__ */ jsx55(
                 "tr",
                 {
                   onClick: () => onRowClick?.(row, table),
                   "data-name": "table-body-row",
                   className: BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original),
                   children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ jsx57("td", { "data-name": "table-body-cell", children: flexRender(
+                    return /* @__PURE__ */ jsx55("td", { "data-name": "table-body-cell", children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13260,15 +13102,15 @@ var Table = ({
               );
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx57("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx57("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx57(FillerCell, {}) }, column.id);
+              return /* @__PURE__ */ jsx55("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx55("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx55(FillerCell, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx57("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx55("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx55(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13280,7 +13122,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55(
     Table,
     {
       ...props,
@@ -13304,7 +13146,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx57(
+          return /* @__PURE__ */ jsx55(
             Checkbox,
             {
               value: table.getIsAllRowsSelected(),
@@ -13317,7 +13159,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx57(
+          return /* @__PURE__ */ jsx55(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13335,15 +13177,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx57(Checkbox, { value: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx55(Checkbox, { value: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx57(FillerCell, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx55(FillerCell, {});
       },
       state: {
         rowSelection,
@@ -13378,7 +13220,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon2, Copy } from "lucide-react";
-import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13409,7 +13251,7 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: clsx27("relative inline-block cursor-copy", containerClassName),
@@ -13427,7 +13269,7 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs33(
           "div",
           {
             className: clsx27(
@@ -13442,15 +13284,15 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ jsxs35("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ jsx58(CheckIcon2, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ jsxs33("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ jsx56(CheckIcon2, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ jsxs35("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ jsx58(Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ jsxs33("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ jsx56(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx58(
+              /* @__PURE__ */ jsx56(
                 "div",
                 {
                   className: clsx27(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13468,7 +13310,7 @@ var CopyToClipboardWrapper = ({
 // src/components/user-interaction/ScrollPicker.tsx
 import { useCallback as useCallback21, useEffect as useEffect29, useState as useState30 } from "react";
 import clsx28 from "clsx";
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13607,7 +13449,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13618,15 +13460,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs36("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsxs34("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx57(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx57(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13634,7 +13476,7 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ jsx59(
+            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ jsx57(
               "div",
               {
                 className: clsx28(
@@ -13664,10 +13506,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-import { forwardRef as forwardRef12, useId as useId11 } from "react";
+import { forwardRef as forwardRef10, useId as useId12 } from "react";
 import clsx29 from "clsx";
-import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
-var Textarea = forwardRef12(function Textarea2({
+import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+var Textarea = forwardRef10(function Textarea2({
   invalid = false,
   onValueChange,
   onEditComplete,
@@ -13679,7 +13521,7 @@ var Textarea = forwardRef12(function Textarea2({
     onEditComplete?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx58(
     "textarea",
     {
       ...props,
@@ -13709,7 +13551,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx58(
     Textarea,
     {
       ...props,
@@ -13727,9 +13569,9 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = useId11();
+  const genId = useId12();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: clsx29(
@@ -13741,8 +13583,8 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx60("label", { ...headlineProps, htmlFor: usedId, className: clsx29("typography-lable-md text-label", headlineProps.className), children: headline }),
-        /* @__PURE__ */ jsx60(
+        headline && /* @__PURE__ */ jsx58("label", { ...headlineProps, htmlFor: usedId, className: clsx29("typography-lable-md text-label", headlineProps.className), children: headline }),
+        /* @__PURE__ */ jsx58(
           Textarea,
           {
             ...props,
@@ -13937,7 +13779,7 @@ import clsx31 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
 import { useMemo as useMemo16 } from "react";
-import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
   value,
@@ -13960,14 +13802,14 @@ var DayPicker = ({
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  return /* @__PURE__ */ jsxs38("div", { className, "data-name": "day-picker-container", children: [
-    /* @__PURE__ */ jsx61("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx61("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ jsx61("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs36("div", { className, "data-name": "day-picker-container", children: [
+    /* @__PURE__ */ jsx59("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx59("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx59("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
       const isSelected = !!value && DateUtils.equalDate(value, date);
       const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ jsx61(
+      return /* @__PURE__ */ jsx59(
         "button",
         {
           disabled: !isDayValid,
@@ -14001,7 +13843,7 @@ var DayPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx59(
     DayPicker,
     {
       value,
@@ -14012,9 +13854,9 @@ var DayPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback22, useEffect as useEffect30, useLayoutEffect as useLayoutEffect3, useMemo as useMemo17, useRef as useRef19, useState as useState31 } from "react";
+import { memo, useCallback as useCallback22, useEffect as useEffect30, useLayoutEffect as useLayoutEffect3, useMemo as useMemo17, useRef as useRef18, useState as useState31 } from "react";
 import clsx30 from "clsx";
-import { jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
   year,
   selectedMonthIndex,
@@ -14023,7 +13865,7 @@ var YearRow = memo(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = useRef19(null);
+  const ref = useRef18(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
   const [isExpanded, setIsExpanded] = useState31(false);
   useEffect30(() => {
@@ -14032,22 +13874,22 @@ var YearRow = memo(function YearRow2({
     }
   }, [isSelectedYear]);
   const monthGrid = useMemo17(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs37(
     ExpandableRoot,
     {
       ref: isSelectedYear ? ref : void 0,
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ jsx62(ExpandableHeader, { className: clsx30("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
-        /* @__PURE__ */ jsx62(ExpandableContent, { className: "gap-y-1 px-2 expadable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx62("div", { className: "flex-row-1", children: group.map((month) => {
+        /* @__PURE__ */ jsx60(ExpandableHeader, { className: clsx30("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ jsx60(ExpandableContent, { className: "gap-y-1 px-2 expadable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx60("div", { className: "flex-row-1", children: group.map((month) => {
           const monthIndex = DateUtils.monthsList.indexOf(month);
           const currentTimestamp = new Date(year, monthIndex).getTime();
           const isAfterStart = minTimestamp === void 0 || currentTimestamp >= minTimestamp;
           const isBeforeEnd = maxTimestamp === void 0 || currentTimestamp <= maxTimestamp;
           const isValid = isAfterStart && isBeforeEnd;
           const isSelectedMonth = monthIndex === selectedMonthIndex;
-          return /* @__PURE__ */ jsx62(
+          return /* @__PURE__ */ jsx60(
             Button,
             {
               disabled: !isValid,
@@ -14095,7 +13937,7 @@ var YearMonthPicker = ({
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const callbackRefs = useRef19({ onValueChange, onEditComplete });
+  const callbackRefs = useRef18({ onValueChange, onEditComplete });
   useLayoutEffect3(() => {
     callbackRefs.current = { onValueChange, onEditComplete };
   });
@@ -14104,7 +13946,7 @@ var YearMonthPicker = ({
     onValueChange2?.(newDate);
     onEditComplete2?.(newDate);
   }, []);
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx60(
     InfiniteScroll,
     {
       itemCount: years.length,
@@ -14114,7 +13956,7 @@ var YearMonthPicker = ({
         const year = years[index];
         const isSelectedYear = value.getFullYear() === year;
         const selectedMonthIndex = isSelectedYear ? value.getMonth() : void 0;
-        return /* @__PURE__ */ jsx62(
+        return /* @__PURE__ */ jsx60(
           YearRow,
           {
             year,
@@ -14136,7 +13978,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx60(
     YearMonthPicker,
     {
       value,
@@ -14147,7 +13989,7 @@ var YearMonthPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var DatePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14163,9 +14005,9 @@ var DatePicker = ({
   const { locale } = useLocale();
   const [displayedMonth, setDisplayedMonth] = useState32(new Date(value.getFullYear(), value.getMonth(), 1));
   const [displayMode, setDisplayMode] = useState32(initialDisplay);
-  return /* @__PURE__ */ jsxs40("div", { className: clsx31("flex-col-3", className), children: [
-    /* @__PURE__ */ jsxs40("div", { className: "flex-row-2 items-center justify-between", children: [
-      /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs38("div", { className: clsx31("flex-col-3", className), children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 items-center justify-between", children: [
+      /* @__PURE__ */ jsxs38(
         Button,
         {
           size: "sm",
@@ -14176,12 +14018,12 @@ var DatePicker = ({
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ jsx63(ChevronDown4, { size: 16 })
+            /* @__PURE__ */ jsx61(ChevronDown4, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ jsxs40("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ jsx63(
+      displayMode === "day" && /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ jsx61(
           Button,
           {
             size: "sm",
@@ -14192,10 +14034,10 @@ var DatePicker = ({
               onValueChange(newDate);
               setDisplayedMonth(newDate);
             },
-            children: /* @__PURE__ */ jsx63(Calendar, { className: "size-5" })
+            children: /* @__PURE__ */ jsx61(Calendar, { className: "size-5" })
           }
         ),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx61(
           Button,
           {
             size: "sm",
@@ -14203,10 +14045,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx63(ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ jsx61(ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx61(
           Button,
           {
             size: "sm",
@@ -14214,12 +14056,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx63(ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ jsx61(ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx63(
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx61(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -14236,7 +14078,7 @@ var DatePicker = ({
         },
         className: "h-60 max-h-60"
       }
-    ) : /* @__PURE__ */ jsx63(
+    ) : /* @__PURE__ */ jsx61(
       DayPicker,
       {
         ...dayPickerProps,
@@ -14258,7 +14100,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useOverwritableState(value, onValueChange);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx61(
     DatePicker,
     {
       ...props,
@@ -14272,8 +14114,8 @@ var DatePickerUncontrolled = ({
 import clsx32 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
-import { useEffect as useEffect31, useRef as useRef20 } from "react";
-import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useEffect as useEffect31, useRef as useRef19 } from "react";
+import { jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
 var TimePicker = ({
   value = /* @__PURE__ */ new Date(),
   onValueChange,
@@ -14282,8 +14124,8 @@ var TimePicker = ({
   minuteIncrement = "5min",
   className
 }) => {
-  const minuteRef = useRef20(null);
-  const hourRef = useRef20(null);
+  const minuteRef = useRef19(null);
+  const hourRef = useRef19(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
   let minutes = range(60);
@@ -14321,10 +14163,10 @@ var TimePicker = ({
     onValueChange?.(newDate);
     onEditComplete?.(newDate);
   };
-  return /* @__PURE__ */ jsxs41("div", { "data-name": "time-picker-container", className, children: [
-    /* @__PURE__ */ jsx64("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
+  return /* @__PURE__ */ jsxs39("div", { "data-name": "time-picker-container", className, children: [
+    /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
       const isSelected = hour2 === value.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ jsx64(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14336,9 +14178,9 @@ var TimePicker = ({
         hour2
       );
     }) }),
-    /* @__PURE__ */ jsx64("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
       const isSelected = minute === closestMinute;
-      return /* @__PURE__ */ jsx64(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14350,8 +14192,8 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs41("div", { "data-name": "time-picker-value-column", children: [
-      /* @__PURE__ */ jsx64(
+    !is24HourFormat && /* @__PURE__ */ jsxs39("div", { "data-name": "time-picker-value-column", children: [
+      /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14360,7 +14202,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14378,7 +14220,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx62(
     TimePicker,
     {
       ...props,
@@ -14389,7 +14231,7 @@ var TimePickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14408,7 +14250,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx65(
+    dateDisplay = /* @__PURE__ */ jsx63(
       DatePicker,
       {
         ...datePickerProps,
@@ -14424,7 +14266,7 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx65(
+    timeDisplay = /* @__PURE__ */ jsx63(
       TimePicker,
       {
         ...timePickerProps,
@@ -14437,14 +14279,14 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs42("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
     dateDisplay,
     timeDisplay
   ] });
 };
 var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx63(
     DateTimePicker,
     {
       ...props,
@@ -14455,7 +14297,7 @@ var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props
 };
 
 // src/components/user-interaction/date/TimeDisplay.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -14492,15 +14334,15 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx66("span", { children: fullString });
+  return /* @__PURE__ */ jsx64("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { useEffect as useEffect32, useMemo as useMemo18, useRef as useRef21, useState as useState33 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo18, useRef as useRef20, useState as useState33 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { CalendarIcon } from "lucide-react";
 import clsx33 from "clsx";
-import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
 var DateTimeInput = ({
   value,
   onValueChange,
@@ -14514,8 +14356,8 @@ var DateTimeInput = ({
   const translation = useHightideTranslation();
   const { locale } = useLocale();
   const [isOpen, setIsOpen] = useState33(false);
-  const anchorRef = useRef21(null);
-  const containerRef = useRef21(null);
+  const anchorRef = useRef20(null);
+  const containerRef = useRef20(null);
   const position = useFloatingElement({
     active: isOpen,
     anchorRef,
@@ -14535,9 +14377,9 @@ var DateTimeInput = ({
       setIsOpen(false);
     }
   }, [isReadOnly]);
-  return /* @__PURE__ */ jsxs43(Fragment9, { children: [
-    /* @__PURE__ */ jsxs43("div", { ...containerProps, ref: anchorRef, className: clsx33("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs41(Fragment9, { children: [
+    /* @__PURE__ */ jsxs41("div", { ...containerProps, ref: anchorRef, className: clsx33("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ jsx65(
         Input,
         {
           ...props,
@@ -14555,7 +14397,7 @@ var DateTimeInput = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx65(
         Button,
         {
           coloringStyle: "text",
@@ -14565,12 +14407,12 @@ var DateTimeInput = ({
           className: "absolute right-1 top-1/2 -translate-y-1/2",
           disabled: isReadOnly,
           onClick: () => setIsOpen((prevState) => !prevState),
-          children: /* @__PURE__ */ jsx67(CalendarIcon, { className: "size-5" })
+          children: /* @__PURE__ */ jsx65(CalendarIcon, { className: "size-5" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx67(Visibility, { isVisible: isOpen, children: createPortal8(
-      /* @__PURE__ */ jsxs43(
+    /* @__PURE__ */ jsx65(Visibility, { isVisible: isOpen, children: createPortal8(
+      /* @__PURE__ */ jsxs41(
         "div",
         {
           ref: containerRef,
@@ -14581,7 +14423,7 @@ var DateTimeInput = ({
             opacity: position ? void 0 : 0
           },
           children: [
-            /* @__PURE__ */ jsx67(
+            /* @__PURE__ */ jsx65(
               DateTimePicker,
               {
                 ...pickerProps,
@@ -14591,8 +14433,8 @@ var DateTimeInput = ({
                 onEditComplete
               }
             ),
-            /* @__PURE__ */ jsxs43("div", { className: "flex-row-2 justify-end", children: [
-              /* @__PURE__ */ jsx67(Visibility, { isVisible: !!onRemove && !!value, children: /* @__PURE__ */ jsx67(
+            /* @__PURE__ */ jsxs41("div", { className: "flex-row-2 justify-end", children: [
+              /* @__PURE__ */ jsx65(Visibility, { isVisible: !!onRemove && !!value, children: /* @__PURE__ */ jsx65(
                 Button,
                 {
                   size: "md",
@@ -14605,7 +14447,7 @@ var DateTimeInput = ({
                   children: translation("clear")
                 }
               ) }),
-              /* @__PURE__ */ jsx67(Visibility, { isVisible: !value, children: /* @__PURE__ */ jsx67(
+              /* @__PURE__ */ jsx65(Visibility, { isVisible: !value, children: /* @__PURE__ */ jsx65(
                 Button,
                 {
                   size: "md",
@@ -14615,7 +14457,7 @@ var DateTimeInput = ({
                   children: translation("cancel")
                 }
               ) }),
-              /* @__PURE__ */ jsx67(
+              /* @__PURE__ */ jsx65(
                 Button,
                 {
                   size: "md",
@@ -14640,7 +14482,7 @@ var DateTimeInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue);
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx65(
     DateTimeInput,
     {
       ...props,
@@ -14658,21 +14500,21 @@ var DateTimeInputUncontrolled = ({
 };
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-import { useId as useId12 } from "react";
-import { forwardRef as forwardRef13, useState as useState34 } from "react";
+import { useId as useId13 } from "react";
+import { forwardRef as forwardRef11, useState as useState34 } from "react";
 import clsx34 from "clsx";
-import { jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
-var InsideLabelInput = forwardRef13(function InsideLabelInput2({
+import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
+var InsideLabelInput = forwardRef11(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
   const [isFocused, setIsFocused] = useState34(false);
-  const generatedId = useId12();
+  const generatedId = useId13();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs44("div", { className: clsx34("relative"), children: [
-    /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs42("div", { className: clsx34("relative"), children: [
+    /* @__PURE__ */ jsx66(
       Input,
       {
         ...props,
@@ -14690,7 +14532,7 @@ var InsideLabelInput = forwardRef13(function InsideLabelInput2({
         }
       }
     ),
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx66(
       "label",
       {
         id: id + "-label",
@@ -14712,7 +14554,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onValueChange);
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx66(
     InsideLabelInput,
     {
       ...props,
@@ -14725,7 +14567,7 @@ var InsideLabelInputUncontrolled = ({
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
 import { clsx as clsx35 } from "clsx";
-import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs43 } from "react/jsx-runtime";
 var SearchBar = ({
   value: initialValue,
   onSearch,
@@ -14736,8 +14578,8 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsxs45("div", { ...containerProps, className: clsx35("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsxs43("div", { ...containerProps, className: clsx35("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx67(
       InputUncontrolled,
       {
         ...inputProps,
@@ -14748,7 +14590,7 @@ var SearchBar = ({
         className: clsx35("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx67(
       Button,
       {
         ...searchButtonProps,
@@ -14758,33 +14600,33 @@ var SearchBar = ({
         coloringStyle: "text",
         onClick: () => onSearch(value),
         className: clsx35("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx69(Search, { className: "w-full h-full" })
+        children: /* @__PURE__ */ jsx67(Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef14, useEffect as useEffect33, useImperativeHandle as useImperativeHandle5, useRef as useRef22, useState as useState35 } from "react";
+import { forwardRef as forwardRef12, useEffect as useEffect33, useImperativeHandle as useImperativeHandle4, useRef as useRef21, useState as useState35 } from "react";
 import { Pencil } from "lucide-react";
 import clsx36 from "clsx";
-import { jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
-var ToggleableInput = forwardRef14(function ToggleableInput2({
+import { jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
+var ToggleableInput = forwardRef12(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
   const [isEditing, setIsEditing] = useState35(initialState !== "display");
-  const innerRef = useRef22(null);
-  useImperativeHandle5(forwardedRef, () => innerRef.current);
+  const innerRef = useRef21(null);
+  useImperativeHandle4(forwardedRef, () => innerRef.current);
   useEffect33(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs46("div", { className: clsx36("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsxs44("div", { className: clsx36("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx68(
       Input,
       {
         ...props,
@@ -14810,9 +14652,9 @@ var ToggleableInput = forwardRef14(function ToggleableInput2({
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs46("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx70("span", { className: clsx36(" truncate"), children: value }),
-      /* @__PURE__ */ jsx70(Pencil, { className: clsx36(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs44("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx68("span", { className: clsx36(" truncate"), children: value }),
+      /* @__PURE__ */ jsx68(Pencil, { className: clsx36(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -14822,7 +14664,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx68(
     ToggleableInput,
     {
       value,
@@ -14837,7 +14679,7 @@ import { Check as Check3 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
-import { jsx as jsx71, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 var PropertyBase = ({
   name: name2,
   children,
@@ -14856,29 +14698,29 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: className ? `group/property ${className}` : "group/property",
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ jsxs47(
+        /* @__PURE__ */ jsxs45(
           "div",
           {
             className,
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsx71(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs47("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ jsx71("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ jsx71("span", { "data-name": "property-title-text", children: name2 })
+              /* @__PURE__ */ jsx69(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs45("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ jsx69("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ jsx69("span", { "data-name": "property-title-text", children: name2 })
               ] }) }),
-              invalid && /* @__PURE__ */ jsx71(AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ jsx69(AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs47(
+        /* @__PURE__ */ jsxs45(
           "div",
           {
             className,
@@ -14886,8 +14728,8 @@ var PropertyBase = ({
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsxs47("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ jsx71(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ jsx71(
+              showActionsContainer && /* @__PURE__ */ jsxs45("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ jsx69(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ jsx69(
                   Button,
                   {
                     onClick: onValueClear,
@@ -14896,10 +14738,10 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx71(X3, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx69(X3, { className: "size-force-5" })
                   }
                 ) }),
-                isRemoveEnabled && /* @__PURE__ */ jsx71(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ jsx71(
+                isRemoveEnabled && /* @__PURE__ */ jsx69(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ jsx69(
                   Button,
                   {
                     onClick: onRemove,
@@ -14907,7 +14749,7 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx71(Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx69(Trash, { className: "size-force-5" })
                   }
                 ) })
               ] })
@@ -14920,7 +14762,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -14929,15 +14771,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx70(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ jsx72(Check3, { size: 24 }),
-      children: () => /* @__PURE__ */ jsxs48("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx72(
+      icon: /* @__PURE__ */ jsx70(Check3, { size: 24 }),
+      children: () => /* @__PURE__ */ jsxs46("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx70(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -14950,7 +14792,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ jsx72(
+        /* @__PURE__ */ jsx70(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -14970,7 +14812,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onValueChange,
@@ -14980,13 +14822,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx71(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx73(CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx73(
+      icon: /* @__PURE__ */ jsx71(CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx71(
         DateTimeInput,
         {
           value,
@@ -15004,7 +14846,129 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import { jsx as jsx74 } from "react/jsx-runtime";
+
+// src/components/user-interaction/select/MultiSelectChipDisplay.tsx
+import { forwardRef as forwardRef13, useEffect as useEffect34, useImperativeHandle as useImperativeHandle5, useRef as useRef22 } from "react";
+import { XIcon as XIcon2, Plus } from "lucide-react";
+import { jsx as jsx72, jsxs as jsxs47 } from "react/jsx-runtime";
+var MultiSelectChipDisplayButton = forwardRef13(function MultiSelectChipDisplayButton2({
+  id,
+  ...props
+}, ref) {
+  const { state, trigger, item, ids, setIds } = useSelectContext();
+  const { register, unregister, toggleOpen } = trigger;
+  useEffect34(() => {
+    if (id) {
+      setIds((prev) => ({
+        ...prev,
+        trigger: id
+      }));
+    }
+  }, [id, setIds]);
+  const innerRef = useRef22(null);
+  useImperativeHandle5(ref, () => innerRef.current);
+  useEffect34(() => {
+    register(innerRef);
+    return () => unregister();
+  }, [register, unregister]);
+  const disabled = !!props?.disabled || !!state.disabled;
+  const invalid = state.invalid;
+  return /* @__PURE__ */ jsxs47(
+    "div",
+    {
+      ...props,
+      ref: innerRef,
+      onClick: (event) => {
+        toggleOpen();
+        props.onClick?.(event);
+      },
+      "data-name": props["data-name"] ?? "select-button-chips",
+      "data-value": state.value.length > 0 ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "aria-invalid": invalid,
+      "aria-disabled": disabled,
+      children: [
+        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ jsxs47(Chip, { className: "gap-x-2", children: [
+          label,
+          /* @__PURE__ */ jsx72(
+            Button,
+            {
+              onClick: () => {
+                item.toggleSelection(value, false);
+              },
+              size: "xs",
+              color: "negative",
+              coloringStyle: "text",
+              layout: "icon",
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ jsx72(XIcon2, { className: "size-5" })
+            }
+          )
+        ] }, value)),
+        /* @__PURE__ */ jsx72(
+          Button,
+          {
+            id: ids.trigger,
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
+            onKeyDown: (event) => {
+              switch (event.key) {
+                case "ArrowDown":
+                  toggleOpen(true, { highlightStartPositionBehavior: "first" });
+                  break;
+                case "ArrowUp":
+                  toggleOpen(true, { highlightStartPositionBehavior: "last" });
+              }
+            },
+            layout: "icon",
+            size: "sm",
+            color: "neutral",
+            "aria-invalid": invalid,
+            "aria-disabled": disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": state.isOpen,
+            "aria-controls": state.isOpen ? ids.content : void 0,
+            className: "size-9",
+            children: /* @__PURE__ */ jsx72(Plus, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var MultiSelectChipDisplay = forwardRef13(function MultiSelectChipDisplay2({
+  children,
+  contentPanelProps,
+  chipDisplayProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs47(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx72(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ jsx72(MultiSelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectChipDisplayUncontrolled = forwardRef13(function MultiSelectChipDisplayUncontrolled2({
+  value: initialValue,
+  onValueChange,
+  ...props
+}, ref) {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ jsx72(
+    MultiSelectChipDisplay,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChange: setValue
+    }
+  );
+});
+
+// src/components/user-interaction/properties/MultiSelectProperty.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   value,
@@ -15013,18 +14977,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx73(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx74(List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx74(
+      icon: /* @__PURE__ */ jsx73(List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx73(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx74(
+          children: /* @__PURE__ */ jsx73(
             MultiSelectChipDisplay,
             {
               value,
@@ -15050,7 +15014,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import { jsx as jsx75, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onRemove,
@@ -15062,20 +15026,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx74(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx75(Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsxs49(
+      icon: /* @__PURE__ */ jsx74(Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsxs48(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ jsx75(
+            /* @__PURE__ */ jsx74(
               Input,
               {
                 className: "w-full pr-8",
@@ -15103,7 +15067,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx75(
+            suffix && /* @__PURE__ */ jsx74(
               "span",
               {
                 "data-name": "property-suffix",
@@ -15120,7 +15084,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -15129,18 +15093,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx75(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx76(List2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx76(
+      icon: /* @__PURE__ */ jsx75(List2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx75(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx76(
+          children: /* @__PURE__ */ jsx75(
             Select,
             {
               value,
@@ -15163,7 +15127,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -15174,14 +15138,14 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx76(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx77(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx77(
+      icon: /* @__PURE__ */ jsx76(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx76(
         Textarea,
         {
           className: "w-full",
@@ -15211,6 +15175,37 @@ var TextProperty = ({
   );
 };
 
+// src/components/user-interaction/select/MultiSelect.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx77, jsxs as jsxs49 } from "react/jsx-runtime";
+var MultiSelect = forwardRef14(function MultiSelect2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs49(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx77(MultiSelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ jsx77(MultiSelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectUncontrolled = forwardRef14(function MultiSelectUncontrolled2({
+  value: initialValue,
+  onValueChange,
+  ...props
+}, ref) {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ jsx77(
+    MultiSelect,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChange: setValue
+    }
+  );
+});
+
 // src/components/utils/FocusTrap.tsx
 import { useRef as useRef23 } from "react";
 import { useImperativeHandle as useImperativeHandle6 } from "react";
@@ -15229,7 +15224,7 @@ var FocusTrap = forwardRef15(function FocusTrap2({
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect34, useState as useState36 } from "react";
+import { useEffect as useEffect35, useState as useState36 } from "react";
 function Transition({
   children,
   show,
@@ -15238,7 +15233,7 @@ function Transition({
   const [isOpen, setIsOpen] = useState36(show);
   const [isTransitioning, setIsTransitioning] = useState36(!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]);
@@ -15274,7 +15269,7 @@ var HightideProvider = ({
 };
 
 // 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");
@@ -15312,7 +15307,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect35(() => {
+  useEffect36(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15321,10 +15316,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React5, { useEffect as useEffect36 } from "react";
+import React5, { useEffect as useEffect37 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React5.useState(false);
-  useEffect36(() => {
+  useEffect37(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15350,7 +15345,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback23, useEffect as useEffect37, useMemo as useMemo19, useState as useState37 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect38, useMemo as useMemo19, useState as useState37 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15399,7 +15394,7 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }