@helpwave/hightide 0.1.46 → 0.1.48

package/dist/{components/index.js → index.mjs}

@@ -34,17 +34,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
     "use strict";
-    var React20 = __require("react");
+    var React21 = __require("react");
     function is(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
-    var useState35 = React20.useState;
-    var useEffect36 = React20.useEffect;
-    var useLayoutEffect3 = React20.useLayoutEffect;
-    var useDebugValue = React20.useDebugValue;
+    var useState37 = React21.useState;
+    var useEffect40 = React21.useEffect;
+    var useLayoutEffect3 = React21.useLayoutEffect;
+    var useDebugValue = React21.useDebugValue;
     function useSyncExternalStore$2(subscribe2, getSnapshot) {
-      var value = getSnapshot(), _useState = useState35({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState37({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -53,7 +53,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe2, value, getSnapshot]
       );
-      useEffect36(
+      useEffect40(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe2(function() {
@@ -79,7 +79,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return getSnapshot();
     }
     var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-    exports.useSyncExternalStore = void 0 !== React20.useSyncExternalStore ? React20.useSyncExternalStore : shim;
+    exports.useSyncExternalStore = void 0 !== React21.useSyncExternalStore ? React21.useSyncExternalStore : shim;
   }
 });
 
@@ -92,7 +92,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
       }
       function useSyncExternalStore$2(subscribe2, getSnapshot) {
-        didWarnOld18Alpha || void 0 === React20.startTransition || (didWarnOld18Alpha = true, console.error(
+        didWarnOld18Alpha || void 0 === React21.startTransition || (didWarnOld18Alpha = true, console.error(
           "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
         ));
         var value = getSnapshot();
@@ -102,7 +102,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState35({
+        cachedValue = useState37({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -114,7 +114,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe2, value, getSnapshot]
         );
-        useEffect36(
+        useEffect40(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe2(function() {
@@ -140,8 +140,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React20 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState35 = React20.useState, useEffect36 = React20.useEffect, useLayoutEffect3 = React20.useLayoutEffect, useDebugValue = React20.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      exports.useSyncExternalStore = void 0 !== React20.useSyncExternalStore ? React20.useSyncExternalStore : shim;
+      var React21 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState37 = React21.useState, useEffect40 = React21.useEffect, useLayoutEffect3 = React21.useLayoutEffect, useDebugValue = React21.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      exports.useSyncExternalStore = void 0 !== React21.useSyncExternalStore ? React21.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
   }
@@ -6365,6 +6365,50 @@ var require_link2 = __commonJS({
   }
 });
 
+// src/coloring/shading.ts
+import tinycolor from "tinycolor2";
+
+// src/coloring/types.ts
+var shadingColorValues = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1e3];
+
+// src/coloring/shading.ts
+var generateShadingColors = (partialShading) => {
+  const shading = {
+    0: "#FFFFFF",
+    1e3: "#000000"
+  };
+  let index = 1;
+  while (index < shadingColorValues.length - 1) {
+    const previous = shadingColorValues[index - 1];
+    const current = shadingColorValues[index];
+    if (partialShading[current] !== void 0) {
+      shading[current] = partialShading[current];
+      index++;
+      continue;
+    }
+    let j = index + 1;
+    while (j < shadingColorValues.length) {
+      if (partialShading[shadingColorValues[j]] !== void 0) {
+        break;
+      }
+      j++;
+    }
+    if (j === shadingColorValues.length) {
+      j = shadingColorValues.length - 1;
+    }
+    const nextFound = shadingColorValues[j];
+    const interval = nextFound - previous;
+    for (let k = index; k < j; k++) {
+      const current2 = shadingColorValues[k];
+      const previousValue = partialShading[previous] ?? shading[previous];
+      const nextValue = partialShading[nextFound] ?? shading[nextFound];
+      shading[current2] = tinycolor.mix(tinycolor(previousValue), tinycolor(nextValue), (current2 - previous) / interval * 100).toHexString();
+    }
+    index = j;
+  }
+  return shading;
+};
+
 // src/components/icons-and-geometry/HelpwaveLogo.tsx
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -6561,6 +6605,9 @@ var createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = t
   }
   return returnList;
 };
+var createLoopingList = (list, startIndex = 0, length = 0, forwards = true) => {
+  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item);
+};
 var moveItems = (list, move = 0) => {
   const result = [];
   let start = move;
@@ -6615,6 +6662,10 @@ var formatDateTime = (date) => {
   const minutes = date.getMinutes().toString().padStart(2, "0");
   return `${dateString}T${hours}:${minutes}`;
 };
+var getDaysInMonth = (year, month) => {
+  const lastDayOfMonth = new Date(year, month + 1, 0);
+  return lastDayOfMonth.getDate();
+};
 var changeDuration = (date, duration, isAdding) => {
   const {
     years = 0,
@@ -6670,6 +6721,28 @@ var addDuration = (date, duration) => {
 var subtractDuration = (date, duration) => {
   return changeDuration(date, duration, false);
 };
+var getBetweenDuration = (startDate, endDate) => {
+  const durationInMilliseconds = endDate.getTime() - startDate.getTime();
+  const millisecondsInSecond = 1e3;
+  const millisecondsInMinute = 60 * millisecondsInSecond;
+  const millisecondsInHour = 60 * millisecondsInMinute;
+  const millisecondsInDay = 24 * millisecondsInHour;
+  const millisecondsInMonth = 30 * millisecondsInDay;
+  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay));
+  const months = Math.floor(durationInMilliseconds / millisecondsInMonth);
+  const days = Math.floor(durationInMilliseconds / millisecondsInDay);
+  const hours = Math.floor(durationInMilliseconds % millisecondsInDay / millisecondsInHour);
+  const seconds = Math.floor(durationInMilliseconds % millisecondsInHour / millisecondsInSecond);
+  const milliseconds = durationInMilliseconds % millisecondsInSecond;
+  return {
+    years,
+    months,
+    days,
+    hours,
+    seconds,
+    milliseconds
+  };
+};
 var isInTimeSpan = (value, startDate, endDate) => {
   if (startDate && endDate) {
     console.assert(startDate <= endDate);
@@ -6737,6 +6810,72 @@ import { createContext, useContext, useEffect as useEffect2, useMemo, useState a
 // src/hooks/useLocalStorage.ts
 import { useCallback, useState as useState2 } from "react";
 
+// src/utils/storage.ts
+var StorageService = class {
+  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript
+  constructor(storage) {
+    this.storage = storage;
+  }
+  get(key) {
+    const value = this.storage.getItem(key);
+    if (value === null) {
+      return null;
+    }
+    return JSON.parse(value);
+  }
+  set(key, value) {
+    this.storage.setItem(key, JSON.stringify(value));
+  }
+  delete(key) {
+    this.storage.removeItem(key);
+  }
+  deleteAll() {
+    this.storage.clear();
+  }
+};
+var LocalStorageService = class extends StorageService {
+  constructor() {
+    super(window.localStorage);
+  }
+};
+var SessionStorageService = class extends StorageService {
+  constructor() {
+    super(window.sessionStorage);
+  }
+};
+
+// src/hooks/useLocalStorage.ts
+var useLocalStorage = (key, backupValue) => {
+  const get = useCallback(() => {
+    if (typeof window === "undefined") {
+      return backupValue;
+    }
+    const storageService = new LocalStorageService();
+    try {
+      const value = storageService.get(key);
+      return value || backupValue;
+    } catch (_) {
+      console.warn("useLocalStorage: Error while reading the stored value. Make sure your typing is correct.");
+      storageService.delete(key);
+      console.info(`useLocalStorage: deleted erroneous value for key: ${key}`);
+      return backupValue;
+    }
+  }, [backupValue, key]);
+  const [storedValue, setStoredValue] = useState2(get);
+  const setValue = useCallback((action) => {
+    const newValue = resolveSetState(action, storedValue);
+    const storageService = new LocalStorageService();
+    storageService.set(key, newValue);
+    setStoredValue(newValue);
+  }, [storedValue, setStoredValue, key]);
+  const deleteValue = () => {
+    const storageService = new LocalStorageService();
+    storageService.delete(key);
+    setStoredValue(backupValue);
+  };
+  return { value: storedValue, setValue, deleteValue };
+};
+
 // src/i18n/translations.ts
 import { TranslationGen } from "@helpwave/internationalization";
 var hightideTranslationLocales = ["de-DE", "en-US"];
@@ -6847,7 +6986,7 @@ var hightideTranslation = {
       });
     },
     "themes": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Farbschema`,
         "other": `Farbschemas`
       });
@@ -6859,19 +6998,19 @@ var hightideTranslation = {
     "time.april": `April`,
     "time.august": `August`,
     "time.century": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Jahrhundert`,
         "other": `Jahrhunderte`
       });
     },
     "time.day": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Tag`,
         "other": `Tage`
       });
     },
     "time.decade": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Jahrzehnt`,
         "other": `Jahrzehnte`
       });
@@ -6879,7 +7018,7 @@ var hightideTranslation = {
     "time.december": `December`,
     "time.february": `Febuar`,
     "time.hour": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Stunde`,
         "other": `Stunden`
       });
@@ -6894,25 +7033,25 @@ var hightideTranslation = {
     "time.march": `M\xE4rz`,
     "time.may": `Mai`,
     "time.microsecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Mikrosekunde`,
         "other": `Mikrosekunden`
       });
     },
     "time.millisecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Millisekunde`,
         "other": `Millisekunden`
       });
     },
     "time.minute": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Minute`,
         "other": `Minuten`
       });
     },
     "time.month": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Monat`,
         "other": `Monate`
       });
@@ -6935,7 +7074,7 @@ var hightideTranslation = {
       });
     },
     "time.nanosecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Nanosekunde`,
         "other": `Nanosekunden`
       });
@@ -6943,7 +7082,7 @@ var hightideTranslation = {
     "time.november": `November`,
     "time.october": `October`,
     "time.second": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Sekunde`,
         "other": `Sekunden`
       });
@@ -6952,7 +7091,7 @@ var hightideTranslation = {
     "time.today": `Heute`,
     "time.tomorrow": `Morgen`,
     "time.year": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Jahr`,
         "other": `Jahre`
       });
@@ -7083,7 +7222,7 @@ var hightideTranslation = {
       });
     },
     "themes": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Theme`,
         "other": `Themes`
       });
@@ -7095,19 +7234,19 @@ var hightideTranslation = {
     "time.april": `April`,
     "time.august": `August`,
     "time.century": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Century`,
         "other": `Centuries`
       });
     },
     "time.day": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Day`,
         "other": `Days`
       });
     },
     "time.decade": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Decade`,
         "other": `Decades`
       });
@@ -7115,7 +7254,7 @@ var hightideTranslation = {
     "time.december": `December`,
     "time.february": `Febuary`,
     "time.hour": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Hour`,
         "other": `Hours`
       });
@@ -7130,25 +7269,25 @@ var hightideTranslation = {
     "time.march": `March`,
     "time.may": `May`,
     "time.microsecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Microsecond`,
         "other": `Microseconds`
       });
     },
     "time.millisecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Millisecond`,
         "other": `Milliseconds`
       });
     },
     "time.minute": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Minute`,
         "other": `Minutes`
       });
     },
     "time.month": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Month`,
         "other": `Months`
       });
@@ -7171,7 +7310,7 @@ var hightideTranslation = {
       });
     },
     "time.nanosecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Nanosecond`,
         "other": `Nanoseconds`
       });
@@ -7179,7 +7318,7 @@ var hightideTranslation = {
     "time.november": `November`,
     "time.october": `October`,
     "time.second": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Second`,
         "other": `Seconds`
       });
@@ -7188,7 +7327,7 @@ var hightideTranslation = {
     "time.today": `Today`,
     "time.tomorrow": `Tomorrow`,
     "time.year": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
+      return TranslationGen.resolvePlural(count, {
         "=1": `Year`,
         "other": `Years`
       });
@@ -7237,6 +7376,62 @@ var LocaleContext = createContext({
   locale: LocalizationUtil.DEFAULT_LOCALE,
   setLocale: (v) => v
 });
+var LocaleProvider = ({ children, locale, onChangedLocale }) => {
+  const {
+    value: storedLocale,
+    setValue: setStoredLocale,
+    deleteValue: deleteStoredLocale
+  } = useLocalStorage("locale", "system");
+  const [localePreference, setLocalePreference] = useState3("system");
+  const resolvedLocale = useMemo(() => {
+    if (locale && locale !== "system") {
+      return locale;
+    }
+    if (storedLocale && storedLocale !== "system") {
+      return storedLocale;
+    }
+    if (localePreference !== "system") {
+      return localePreference;
+    }
+    return LocalizationUtil.DEFAULT_LOCALE;
+  }, [locale, localePreference, storedLocale]);
+  useEffect2(() => {
+    if (!locale) return;
+    if (locale === "system") {
+      deleteStoredLocale();
+    } else {
+      setStoredLocale(locale);
+    }
+  }, [locale]);
+  useEffect2(() => {
+    onChangedLocale?.(resolvedLocale);
+  }, [resolvedLocale]);
+  useEffect2(() => {
+    const localesToTestAgainst = Object.values(LocalizationUtil.locals);
+    const detectLanguage = () => {
+      const matchingBrowserLanguage = window.navigator.languages.map((locale2) => localesToTestAgainst.find(
+        (test) => locale2 === test || locale2.split("-")[0] === LocalizationUtil.localToLanguage(test)
+      )).filter((entry) => entry !== void 0);
+      if (matchingBrowserLanguage.length === 0) return;
+      const firstMatch = matchingBrowserLanguage[0];
+      setLocalePreference(firstMatch);
+    };
+    detectLanguage();
+    window.addEventListener("languagechange", detectLanguage);
+    return () => {
+      window.removeEventListener("languagechange", detectLanguage);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3(LocaleContext.Provider, { value: {
+    locale: resolvedLocale,
+    setLocale: (newLocale) => {
+      if (locale !== "system") {
+        console.warn("LocaleProvider: Attempting to change the locale while setting a fixed locale won't have any effect. Change the locale provided to the LocaleProvider instead.");
+      }
+      setStoredLocale(newLocale);
+    }
+  }, children });
+};
 var useLocale = () => {
   const context = useContext(LocaleContext);
   if (!context) {
@@ -7244,6 +7439,13 @@ var useLocale = () => {
   }
   return context;
 };
+var useLanguage = () => {
+  const context = useContext(LocaleContext);
+  if (!context) {
+    throw new Error("useLanguage must be used within LocaleContext. Try adding a LocaleProvider around your app.");
+  }
+  return { language: LocalizationUtil.localToLanguage(context.locale) };
+};
 
 // src/components/date/DayPicker.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
@@ -7774,6 +7976,25 @@ var YearMonthPickerUncontrolled = ({
 
 // src/i18n/useHightideTranslation.ts
 import { combineTranslation, ICUUtil } from "@helpwave/internationalization";
+function useICUTranslation(translations, locale) {
+  translations = Array.isArray(translations) ? translations : [translations];
+  return function translate(key, values) {
+    try {
+      for (let i = 0; i < translations.length; i++) {
+        const localizedTranslation = translations[i][locale];
+        if (!localizedTranslation) continue;
+        const msg = localizedTranslation[key];
+        if (typeof msg === "string") {
+          return ICUUtil.interpret(msg, values);
+        }
+      }
+      console.warn(`useTranslation: No translation for key "${key}" found.`);
+    } catch (e) {
+      console.error(`useTranslation: Error translating key "${String(key)}"`, e);
+    }
+    return `{{${String(locale)}:${String(key)}}}`;
+  };
+}
 function useHightideTranslation(extensions, overwrites) {
   const { locale: inferredLocale } = useLocale();
   const locale = overwrites?.locale ?? inferredLocale;
@@ -9629,6 +9850,74 @@ var ThemeUtil = {
   themes
 };
 var ThemeContext = createContext3(null);
+var ThemeProvider = ({ children, theme }) => {
+  const {
+    value: storedTheme,
+    setValue: setStoredTheme,
+    deleteValue: deleteStoredTheme
+  } = useLocalStorage("theme", "system");
+  const [themePreference, setThemePreference] = useState13("system");
+  const resolvedTheme = useMemo3(() => {
+    if (theme && theme !== "system") {
+      return theme;
+    }
+    if (storedTheme && storedTheme !== "system") {
+      return storedTheme;
+    }
+    if (themePreference !== "system") {
+      return themePreference;
+    }
+    return "light";
+  }, [storedTheme, theme, themePreference]);
+  useEffect14(() => {
+    if (!theme) return;
+    if (theme === "system") {
+      deleteStoredTheme();
+    } else {
+      setStoredTheme(theme);
+    }
+  }, [theme]);
+  useEffect14(() => {
+    document.documentElement.setAttribute("data-theme", resolvedTheme);
+  }, [resolvedTheme]);
+  const getPreference = useCallback7(() => {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
+  }, []);
+  useEffect14(() => {
+    getPreference();
+  }, [getPreference]);
+  useEffect14(() => {
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
+    darkQuery.addEventListener("change", getPreference);
+    lightQuery.addEventListener("change", getPreference);
+    noPrefQuery.addEventListener("change", getPreference);
+    return () => {
+      darkQuery.removeEventListener("change", getPreference);
+      lightQuery.removeEventListener("change", getPreference);
+      noPrefQuery.removeEventListener("change", getPreference);
+    };
+  }, [getPreference]);
+  return /* @__PURE__ */ jsx19(
+    ThemeContext.Provider,
+    {
+      value: {
+        theme: storedTheme,
+        resolvedTheme,
+        setTheme: (newTheme) => {
+          if (theme && theme !== "system") {
+            console.warn("ThemeProvider: Attempting to change the theme while setting a fixed theme won't have any effect. Change the theme provided to the ThemeProvider instead.");
+          }
+          setStoredTheme(newTheme);
+        }
+      },
+      children
+    }
+  );
+};
 var useTheme = () => {
   const context = useContext3(ThemeContext);
   if (!context) {
@@ -10565,7 +10854,7 @@ var RadialRings = ({
 };
 
 // src/components/icons-and-geometry/Tag.tsx
-var import_image = __toESM(require_image(), 1);
+var import_image = __toESM(require_image());
 import { jsx as jsx30 } from "react/jsx-runtime";
 var TagIcon = ({
   className,
@@ -12497,9 +12786,102 @@ var ScrollArea2 = ({
   );
 };
 
-// src/components/layout/TextImage.tsx
+// src/components/layout/TabView.tsx
+import { useId as useId7 } from "react";
+import { createContext as createContext8, useContext as useContext8, useState as useState20, useEffect as useEffect22, useRef as useRef14 } from "react";
 import clsx26 from "clsx";
 import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+var TabContext = createContext8(null);
+function useTabContext() {
+  const ctx = useContext8(TabContext);
+  if (!ctx) throw new Error("useTabContext must be used inside a <TabView>");
+  return ctx;
+}
+function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, ...props }) {
+  const [tabs, setTabs] = useState20([]);
+  const [active, setActiveState] = useState20(null);
+  const buttonRefs = useRef14({});
+  const setActive = (id) => {
+    setActiveState(id);
+    onTabChanged?.(id);
+  };
+  const register = (id, label) => {
+    setTabs((prev) => {
+      const exists = prev.some((t) => t.id === id);
+      if (!exists) {
+        const updated = [...prev, { id, label }];
+        if (active === null && updated[initialTabIndex]) {
+          setActive(updated[initialTabIndex].id);
+        }
+        return updated;
+      }
+      return prev;
+    });
+  };
+  const unregister = (id) => {
+    setTabs((prev) => prev.filter((t) => t.id !== id));
+    delete buttonRefs.current[id];
+  };
+  const onKeyDown = (e, id) => {
+    const idx = tabs.findIndex((t) => t.id === id);
+    if (idx === -1) return;
+    let nextIdx = idx;
+    if (e.key === "ArrowRight") nextIdx = (idx + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") nextIdx = (idx - 1 + tabs.length) % tabs.length;
+    else return;
+    const nextId = tabs[nextIdx].id;
+    setActive(nextId);
+    buttonRefs.current[nextId]?.focus();
+  };
+  const value = { active, setActive, register, unregister, tabs };
+  return /* @__PURE__ */ jsx40(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs21("div", { ...outerDivProps, className: clsx26("w-full", props.className), children: [
+    /* @__PURE__ */ jsx40("div", { role: "tablist", ...props, className: clsx26("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx40(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": active === t.id,
+        "aria-controls": `${t.id}-panel`,
+        id: `${t.id}-tab`,
+        tabIndex: active === t.id ? 0 : -1,
+        ref: (el) => buttonRefs.current[t.id] = el,
+        onClick: () => setActive(t.id),
+        onKeyDown: (e) => onKeyDown(e, t.id),
+        className: clsx26(
+          "flex-row-0 grow justify-center px-3 pb-1 typography-label-md border-b-2",
+          active === t.id ? "border-primary" : "text-description hover:text-on-background"
+        ),
+        children: t.label
+      },
+      t.id
+    )) }),
+    children
+  ] }) });
+}
+function Tab({ id: customId, label, children, ...props }) {
+  const { active, register, unregister } = useTabContext();
+  const generatedId = useId7();
+  const id = customId ?? generatedId;
+  useEffect22(() => {
+    register(id, label);
+    return () => unregister(id);
+  }, [id, label]);
+  return /* @__PURE__ */ jsx40(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${id}-panel`,
+      "aria-labelledby": `${id}-tab`,
+      hidden: active !== id,
+      className: "mt-4 text-sm",
+      ...props,
+      children: active === id && children
+    }
+  );
+}
+
+// src/components/layout/TextImage.tsx
+import clsx27 from "clsx";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var TextImage = ({
   title,
   description,
@@ -12521,25 +12903,25 @@ var TextImage = ({
     secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
     dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
   };
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
-      className: clsx26("rounded-2xl w-full", className),
+      className: clsx27("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
       },
-      children: /* @__PURE__ */ jsxs21(
+      children: /* @__PURE__ */ jsxs22(
         "div",
         {
-          className: clsx26(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: clsx27(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ jsx40("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx40("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ jsxs21("div", { className: "flex-col-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsx40("span", { className: "typography-title-lg", children: title }),
-              /* @__PURE__ */ jsx40("span", { className: "text-ellipsis overflow-hidden", children: description })
+            badge && /* @__PURE__ */ jsx41("div", { className: clsx27(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx41("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ jsxs22("div", { className: "flex-col-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx41("span", { className: "typography-title-lg", children: title }),
+              /* @__PURE__ */ jsx41("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ jsx40("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx40("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+            onShowMoreClicked && /* @__PURE__ */ jsx41("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx41("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
           ]
         }
       )
@@ -12548,7 +12930,7 @@ var TextImage = ({
 };
 
 // src/components/layout/VerticalDivider.tsx
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -12556,7 +12938,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ jsx41("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx42("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs23(
     "svg",
     {
       width,
@@ -12565,7 +12947,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "line",
           {
             opacity: "0.5",
@@ -12579,7 +12961,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsxs23(
           "linearGradient",
           {
             id: "paint_linear",
@@ -12589,9 +12971,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx41("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx41("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx41("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ jsx42("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx42("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx42("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -12602,32 +12984,32 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
-import clsx27 from "clsx";
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import clsx28 from "clsx";
+import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs23("div", { className: clsx27("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx42(AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ jsxs24("div", { className: clsx28("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx43(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 
 // src/components/loading-states/LoadingContainer.tsx
-import { clsx as clsx28 } from "clsx";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { clsx as clsx29 } from "clsx";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx43("div", { className: clsx28("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
+  return /* @__PURE__ */ jsx44("div", { className: clsx29("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { clsx as clsx29 } from "clsx";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { clsx as clsx30 } from "clsx";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -12637,8 +13019,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState20(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState20(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState21(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState21(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -12647,41 +13029,41 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ jsx44(LoadingContainer, { className: clsx29(className) });
+    return loadingComponent ?? /* @__PURE__ */ jsx45(LoadingContainer, { className: clsx30(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ jsx44(LoadingContainer, { className: clsx29("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ jsx45(LoadingContainer, { className: clsx30("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-import clsx30 from "clsx";
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs24("div", { className: clsx30("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx45(HelpwaveLogo, { animate: "loading" }),
+  return /* @__PURE__ */ jsxs25("div", { className: clsx31("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx46(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-import clsx31 from "clsx";
-import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+import clsx32 from "clsx";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ jsxs25("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx46("div", { className: clsx31("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx46(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ jsx46(SolidButton, { ...rest, disabled: rest.disabled, onClick })
+  return /* @__PURE__ */ jsxs26("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ jsx47("div", { className: clsx32("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx47(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ jsx47(SolidButton, { ...rest, disabled: rest.disabled, onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -12698,7 +13080,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "svg",
     {
       style: {
@@ -12707,7 +13089,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "circle",
           {
             cx: center,
@@ -12718,7 +13100,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "circle",
           {
             cx: center,
@@ -12737,35 +13119,35 @@ var ProgressIndicator = ({
 };
 
 // src/components/navigation/BreadCrumb.tsx
-var import_link = __toESM(require_link2(), 1);
-import clsx32 from "clsx";
+var import_link = __toESM(require_link2());
+import clsx33 from "clsx";
 import { Fragment as Fragment7 } from "react";
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
-  return /* @__PURE__ */ jsx48("div", { className: clsx32("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ jsx49("div", { className: clsx33("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ jsxs27(Fragment7, { children: [
-      /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsxs28(Fragment7, { children: [
+      /* @__PURE__ */ jsx49(
         import_link.default,
         {
           href: crumb.link,
-          className: clsx32("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
+          className: clsx33("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ jsx48("span", { className: clsx32(`px-1`, color), children: "/" })
+      !isLast && /* @__PURE__ */ jsx49("span", { className: clsx33(`px-1`, color), children: "/" })
     ] }, index);
   }) });
 };
 
 // src/components/navigation/Navigation.tsx
-var import_link2 = __toESM(require_link2(), 1);
+var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
-import { useEffect as useEffect22 } from "react";
-import { useCallback as useCallback14, useId as useId7, useRef as useRef14, useState as useState21 } from "react";
-import clsx33 from "clsx";
-import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useEffect as useEffect23 } from "react";
+import { useCallback as useCallback14, useId as useId8, useRef as useRef15, useState as useState22 } from "react";
+import clsx34 from "clsx";
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -12775,10 +13157,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = useState21(false);
-  const containerRef = useRef14();
-  const triggerRef = useRef14(null);
-  const id = useId7();
+  const [isOpen, setOpen] = useState22(false);
+  const containerRef = useRef15();
+  const triggerRef = useRef15(null);
+  const id = useId8();
   const style = useFloatingElement({
     active: isOpen,
     containerRef,
@@ -12792,8 +13174,8 @@ var NavigationItemWithSubItem = ({
       setOpen(false);
     }
   }, []);
-  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    /* @__PURE__ */ jsxs29(
       "button",
       {
         id: "navigation-" + id,
@@ -12808,11 +13190,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ jsx49(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ jsx50(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -12826,12 +13208,12 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: clsx33(
+        className: clsx34(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md z-2001",
           { "opacity-0": !style }
         ),
         style,
-        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx49("li", { children: /* @__PURE__ */ jsx49(
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx50("li", { children: /* @__PURE__ */ jsx50(
           import_link2.default,
           {
             href: link,
@@ -12845,24 +13227,24 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx49("ul", { ...restProps, className: clsx33("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx49("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx49(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx49(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx50("ul", { ...restProps, className: clsx34("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx50("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx50(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx50(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = useState21(false);
-  const id = useId7();
-  const menuRef = useRef14(null);
-  useEffect22(() => {
+  const [isMobileOpen, setIsMobileOpen] = useState22(false);
+  const id = useId8();
+  const menuRef = useRef15(null);
+  useEffect23(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
-  return /* @__PURE__ */ jsxs28("nav", { children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs29("nav", { children: [
+    /* @__PURE__ */ jsx50(
       NavigationItemList,
       {
         ...props,
-        className: clsx33("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: clsx34("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       IconButton,
       {
         color: "transparent",
@@ -12871,10 +13253,10 @@ var Navigation = ({ ...props }) => {
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ jsx49(MenuIcon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx50(MenuIcon, { className: "w-6 h-6" })
       }
     ),
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs29(
       "div",
       {
         id: "navigation-menu-" + id,
@@ -12887,7 +13269,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: clsx33(
+        className: clsx34(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen z-2000 bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -12895,8 +13277,8 @@ var Navigation = ({ ...props }) => {
           props.className
         ),
         children: [
-          /* @__PURE__ */ jsx49(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ jsx49(XIcon2, {}) }),
-          /* @__PURE__ */ jsx49(NavigationItemList, { ...props, className: clsx33("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx50(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ jsx50(XIcon2, {}) }),
+          /* @__PURE__ */ jsx50(NavigationItemList, { ...props, className: clsx34("flex-col-8", props.className) })
         ]
       }
     )
@@ -12905,9 +13287,9 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-import clsx34 from "clsx";
-import { useEffect as useEffect23, useState as useState22 } from "react";
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+import clsx35 from "clsx";
+import { useEffect as useEffect24, useState as useState23 } from "react";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -12916,11 +13298,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = useState22((pageIndex + 1).toString());
+  const [value, setValue] = useState23((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect23(() => {
+  useEffect24(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -12930,15 +13312,15 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs29("div", { className: clsx34("flex-row-1", className), style, children: [
-    /* @__PURE__ */ jsx50(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx50(ChevronFirst, {}) }),
-    /* @__PURE__ */ jsx50(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx50(ChevronLeft2, {}) }),
-    /* @__PURE__ */ jsxs29("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs30("div", { className: clsx35("flex-row-1", className), style, children: [
+    /* @__PURE__ */ jsx51(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx51(ChevronFirst, {}) }),
+    /* @__PURE__ */ jsx51(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx51(ChevronLeft2, {}) }),
+    /* @__PURE__ */ jsxs30("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ jsx51(
         Input,
         {
           value,
-          className: clsx34(
+          className: clsx35(
             "w-full text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -12958,8 +13340,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ jsx50("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ jsx51(
         "span",
         {
           className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
@@ -12967,15 +13349,15 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx50(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx50(ChevronRight2, {}) }),
-    /* @__PURE__ */ jsx50(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx50(ChevronLast, {}) })
+    /* @__PURE__ */ jsx51(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx51(ChevronRight2, {}) }),
+    /* @__PURE__ */ jsx51(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx51(ChevronLast, {}) })
   ] });
 };
 
 // src/components/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
-import clsx35 from "clsx";
-import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+import clsx36 from "clsx";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -12997,12 +13379,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
-      className: clsx35("flex-row-2 justify-between", className),
+      className: clsx36("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ jsx51("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsx52("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs31(
           SolidButton,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -13011,18 +13393,18 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx51(ChevronLeft3, { size: 14 }),
+              /* @__PURE__ */ jsx52(ChevronLeft3, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx51("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx52("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ jsx51(
+          return /* @__PURE__ */ jsx52(
             "div",
             {
               onClick: () => seen && update(index),
-              className: clsx35(
+              className: clsx36(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -13038,7 +13420,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ jsx51("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs30(
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx52("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs31(
           SolidButton,
           {
             onClick: () => update(currentStep + 1),
@@ -13046,18 +13428,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ jsx51(ChevronRight3, { size: 14 })
+              /* @__PURE__ */ jsx52(ChevronRight3, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ jsx51("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs30(
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx52("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs31(
           SolidButton,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx51(Check, { size: 14 }),
+              /* @__PURE__ */ jsx52(Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -13068,7 +13450,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     StepperBar,
     {
       ...props,
@@ -13083,7 +13465,7 @@ import { Check as Check3 } from "lucide-react";
 
 // src/components/user-action/Checkbox.tsx
 import { Check as Check2, Minus } from "lucide-react";
-import clsx36 from "clsx";
+import clsx37 from "clsx";
 
 // node_modules/@radix-ui/react-checkbox/dist/index.mjs
 import * as React19 from "react";
@@ -13208,7 +13590,7 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-checkbox/dist/index.mjs
-import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
 var CHECKBOX_NAME = "Checkbox";
 var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
@@ -13256,7 +13638,7 @@ function CheckboxProvider(props) {
     bubbleInput,
     setBubbleInput
   };
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     CheckboxProviderImpl,
     {
       scope: __scopeCheckbox,
@@ -13290,7 +13672,7 @@ var CheckboxTrigger = React19.forwardRef(
         return () => form.removeEventListener("reset", reset);
       }
     }, [control, setChecked]);
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       Primitive.button,
       {
         type: "button",
@@ -13332,7 +13714,7 @@ var Checkbox = React19.forwardRef(
       form,
       ...checkboxProps
     } = props;
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       CheckboxProvider,
       {
         __scopeCheckbox,
@@ -13344,8 +13726,8 @@ var Checkbox = React19.forwardRef(
         name,
         form,
         value,
-        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxs31(Fragment9, { children: [
-          /* @__PURE__ */ jsx52(
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxs32(Fragment9, { children: [
+          /* @__PURE__ */ jsx53(
             CheckboxTrigger,
             {
               ...checkboxProps,
@@ -13353,7 +13735,7 @@ var Checkbox = React19.forwardRef(
               __scopeCheckbox
             }
           ),
-          isFormControl && /* @__PURE__ */ jsx52(
+          isFormControl && /* @__PURE__ */ jsx53(
             CheckboxBubbleInput,
             {
               __scopeCheckbox
@@ -13370,11 +13752,11 @@ var CheckboxIndicator = React19.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
     const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       Presence,
       {
         present: forceMount || isIndeterminate(context.checked) || context.checked === true,
-        children: /* @__PURE__ */ jsx52(
+        children: /* @__PURE__ */ jsx53(
           Primitive.span,
           {
             "data-state": getState(context.checked),
@@ -13426,7 +13808,7 @@ var CheckboxBubbleInput = React19.forwardRef(
       }
     }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
     const defaultCheckedRef = React19.useRef(isIndeterminate(checked) ? false : checked);
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       Primitive.input,
       {
         type: "checkbox",
@@ -13468,7 +13850,7 @@ function getState(checked) {
 }
 
 // src/components/user-action/Checkbox.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 var checkboxSizeMapping = {
   sm: "size-5 border-1",
   md: "size-6 border-1",
@@ -13490,14 +13872,14 @@ var Checkbox2 = ({
 }) => {
   const usedSizeClass = checkboxSizeMapping[size];
   const innerIconSize = checkboxIconSizeMapping[size];
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Checkbox,
     {
       ...props,
       disabled,
       checked: indeterminate ? "indeterminate" : checked,
       onCheckedChange: onChange,
-      className: clsx36(
+      className: clsx37(
         usedSizeClass,
         `flex-col-0 items-center justify-center rounded`,
         {
@@ -13508,10 +13890,10 @@ var Checkbox2 = ({
         },
         className
       ),
-      children: /* @__PURE__ */ jsxs32(CheckboxIndicator, { children: [
-        !checked && !indeterminate && /* @__PURE__ */ jsx53("div", { className: clsx36("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ jsx53(Check2, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ jsx53(Minus, { className: innerIconSize })
+      children: /* @__PURE__ */ jsxs33(CheckboxIndicator, { children: [
+        !checked && !indeterminate && /* @__PURE__ */ jsx54("div", { className: clsx37("bg-input-background", innerIconSize) }),
+        checked && !indeterminate && /* @__PURE__ */ jsx54(Check2, { className: innerIconSize }),
+        indeterminate && /* @__PURE__ */ jsx54(Minus, { className: innerIconSize })
       ] })
     }
   );
@@ -13522,7 +13904,7 @@ var CheckboxUncontrolled = ({
   ...props
 }) => {
   const [checked, setChecked] = useOverwritableState(initialChecked, onChange);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Checkbox2,
     {
       ...props,
@@ -13534,8 +13916,8 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
-import clsx37 from "clsx";
-import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+import clsx38 from "clsx";
+import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   input,
@@ -13548,11 +13930,11 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ jsxs33("div", { className: clsx37("flex-row-0 group", className), children: [
-    /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34("div", { className: clsx38("flex-row-0 group", className), children: [
+    /* @__PURE__ */ jsxs34(
       "div",
       {
-        className: clsx37(
+        className: clsx38(
           "flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
           {
             "bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
@@ -13561,15 +13943,15 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx54("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
-          /* @__PURE__ */ jsx54("span", { className: "font-semibold", children: name })
+          /* @__PURE__ */ jsx55("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
+          /* @__PURE__ */ jsx55("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs33(
+    /* @__PURE__ */ jsxs34(
       "div",
       {
-        className: clsx37(
+        className: clsx38(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
             "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
@@ -13579,13 +13961,13 @@ var PropertyBase = ({
         ),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ jsx54("div", { className: "text-warning", children: /* @__PURE__ */ jsx54(AlertTriangle, { size: 24 }) }),
-          onRemove && !readOnly && /* @__PURE__ */ jsx54(
+          requiredAndNoValue && /* @__PURE__ */ jsx55("div", { className: "text-warning", children: /* @__PURE__ */ jsx55(AlertTriangle, { size: 24 }) }),
+          onRemove && !readOnly && /* @__PURE__ */ jsx55(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: clsx37("items-center"),
+              className: clsx38("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -13597,8 +13979,8 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-import { useId as useId8 } from "react";
-import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useId as useId9 } from "react";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onChange,
@@ -13606,16 +13988,16 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  const id = useId8();
-  return /* @__PURE__ */ jsx55(
+  const id = useId9();
+  return /* @__PURE__ */ jsx56(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ jsx55(Check3, { size: 24 }),
-      input: () => /* @__PURE__ */ jsxs34("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx55(
+      icon: /* @__PURE__ */ jsx56(Check3, { size: 24 }),
+      input: () => /* @__PURE__ */ jsxs35("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx56(
           Checkbox2,
           {
             id,
@@ -13625,7 +14007,7 @@ var CheckboxProperty = ({
             "aria-labelledby": id + "label"
           }
         ),
-        /* @__PURE__ */ jsx55(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
+        /* @__PURE__ */ jsx56(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
       ] })
     }
   );
@@ -13633,8 +14015,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import clsx38 from "clsx";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import clsx39 from "clsx";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onChange,
@@ -13645,16 +14027,16 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx56(CalendarDays, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx56(
+      icon: /* @__PURE__ */ jsx57(CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx57(
         Input,
         {
-          className: clsx38("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: clsx39("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -13676,8 +14058,8 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import clsx39 from "clsx";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import clsx40 from "clsx";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   values,
@@ -13685,25 +14067,25 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = values.length > 0;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx57(List, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx57(
+      icon: /* @__PURE__ */ jsx58(List, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx58(
         MultiSelectChipDisplay,
         {
           values,
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: clsx39(
+            className: clsx40(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: clsx39({
+            className: clsx40({
               "!bg-warning !text-surface-warning": softRequired && !hasValue
             })
           },
@@ -13716,8 +14098,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import clsx40 from "clsx";
-import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import clsx41 from "clsx";
+import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onChange,
@@ -13729,22 +14111,22 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx58(Binary, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsxs35(
+      icon: /* @__PURE__ */ jsx59(Binary, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsxs36(
         "div",
         {
-          className: clsx40("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
+          className: clsx41("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ jsx58(
+            /* @__PURE__ */ jsx59(
               Input,
               {
-                className: clsx40("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: clsx41("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                 value: value?.toString() ?? "",
                 type: "number",
                 readOnly,
@@ -13767,7 +14149,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx58("span", { className: clsx40("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ jsx59("span", { className: clsx41("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -13777,8 +14159,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import clsx41 from "clsx";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import clsx42 from "clsx";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -13787,20 +14169,20 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx59(List2, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx59(
+      icon: /* @__PURE__ */ jsx60(List2, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx60(
         Select,
         {
           value,
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: clsx41(
+            className: clsx42(
               "border-none w-full",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
@@ -13817,12 +14199,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import clsx43 from "clsx";
+import clsx44 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { forwardRef as forwardRef13, useId as useId9 } from "react";
-import clsx42 from "clsx";
-import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
+import { forwardRef as forwardRef13, useId as useId10 } from "react";
+import clsx43 from "clsx";
+import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 var Textarea = forwardRef13(function Textarea2({
   id,
   onChange,
@@ -13841,12 +14223,12 @@ var Textarea = forwardRef13(function Textarea2({
     onEditCompleted?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "textarea",
     {
       ref,
       id,
-      className: clsx42(
+      className: clsx43(
         "resize-none w-full h-32 overflow-y-scroll",
         "py-2 px-3 rounded-md border-2 border-transparent focus-style-none",
         {
@@ -13879,7 +14261,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [text, setText] = useOverwritableState(value, onChangeText);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Textarea,
     {
       ...props,
@@ -13897,12 +14279,12 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = useId9();
+  const genId = useId10();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
-      className: clsx42(
+      className: clsx43(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -13911,13 +14293,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx60(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
-        /* @__PURE__ */ jsx60(
+        headline && /* @__PURE__ */ jsx61(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
+        /* @__PURE__ */ jsx61(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: clsx42(
+            className: clsx43(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             ),
@@ -13930,7 +14312,7 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/properties/TextProperty.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -13941,17 +14323,17 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx61(Text, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx61(
+      icon: /* @__PURE__ */ jsx62(Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx62(
         Textarea,
         {
-          className: clsx43({
+          className: clsx44({
             "bg-surface-warning placeholder-warning": softRequired && !hasValue
           }),
           rows: 5,
@@ -13980,12 +14362,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-import { clsx as clsx44 } from "clsx";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { clsx as clsx45 } from "clsx";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ jsx62("div", { className: clsx44("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ jsx63("div", { className: clsx45("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -14003,8 +14385,8 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback16, useEffect as useEffect32, useMemo as useMemo10, useRef as useRef20, useState as useState29 } from "react";
-import clsx48 from "clsx";
+import { useCallback as useCallback16, useEffect as useEffect33, useMemo as useMemo10, useRef as useRef21, useState as useState30 } from "react";
+import clsx49 from "clsx";
 import {
   flexRender,
   getCoreRowModel,
@@ -14016,19 +14398,19 @@ import {
 import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 
 // src/components/table/TableCell.tsx
-import { clsx as clsx45 } from "clsx";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { clsx as clsx46 } from "clsx";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx63("span", { className: clsx45("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx64("span", { className: clsx46("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect27 } from "react";
+import { useEffect as useEffect28 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect27(() => {
+  useEffect28(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -14038,8 +14420,8 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp } from "lucide-react";
-import clsx46 from "clsx";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import clsx47 from "clsx";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -14047,20 +14429,20 @@ var TableSortButton = ({
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ jsx64(ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ jsx65(ChevronsUpDown, { className: "w-full h-full" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx64(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx64(ChevronDown3, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx65(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx65(ChevronDown3, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     IconButton,
     {
       size: "tiny",
       color,
-      className: clsx46(className),
+      className: clsx47(className),
       ...buttonProps,
       children: icon
     }
@@ -14071,8 +14453,8 @@ var TableSortButton = ({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useEffect as useEffect30, useRef as useRef19, useState as useState27 } from "react";
-import clsx47 from "clsx";
+import { useEffect as useEffect31, useRef as useRef20, useState as useState28 } from "react";
+import clsx48 from "clsx";
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -14143,15 +14525,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect28, useState as useState26 } from "react";
+import { useEffect as useEffect29, useState as useState27 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState26(false);
-  const [timer, setTimer] = useState26();
+  const [isHovered, setIsHovered] = useState27(false);
+  const [timer, setTimer] = useState27();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -14167,14 +14549,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  useEffect28(() => {
+  useEffect29(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  useEffect28(() => {
+  useEffect29(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -14187,9 +14569,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect29 } from "react";
+import { useEffect as useEffect30 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect29(() => {
+  useEffect30(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -14207,17 +14589,17 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs38 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx65(
+}) => /* @__PURE__ */ jsx66(
   "div",
   {
-    className: clsx47("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: clsx48("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled cursor-not-allowed": isDisabled,
@@ -14247,10 +14629,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef19(null);
-  const menuRef = useRef19(null);
+  const triggerRef = useRef20(null);
+  const menuRef = useRef20(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState27(true);
+  const [isHidden, setIsHidden] = useState28(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -14261,7 +14643,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  useEffect30(() => {
+  useEffect31(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -14278,19 +14660,19 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (isOpen) {
       setIsHidden(false);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs37(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs38(Fragment10, { children: [
     trigger(bag, triggerRef),
-    createPortal4(/* @__PURE__ */ jsx65(
+    createPortal4(/* @__PURE__ */ jsx66(
       "div",
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: clsx47(
+        className: clsx48(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -14314,25 +14696,25 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect31, useState as useState28 } from "react";
-import { Fragment as Fragment11, jsx as jsx66, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useEffect as useEffect32, useState as useState29 } from "react";
+import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs39 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState28(columnFilterValue);
+  const [filterValue, setFilterValue] = useState29(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect31(() => {
+  useEffect32(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx66(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ jsx66(FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ jsx66(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs39("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx67(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ jsx67(FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ jsx67(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -14340,9 +14722,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ jsxs38("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx66("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx66(
+      children: ({ close }) => /* @__PURE__ */ jsxs39("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx67("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx67(
           Input,
           {
             value: filterValue ?? "",
@@ -14352,8 +14734,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ jsx66(
+        filterType === "range" && /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ jsx67(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -14366,8 +14748,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx66("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx67(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -14381,8 +14763,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs38(Fragment11, { children: [
-          /* @__PURE__ */ jsx66(
+        filterType === "dateRange" && /* @__PURE__ */ jsxs39(Fragment11, { children: [
+          /* @__PURE__ */ jsx67(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -14395,7 +14777,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -14409,12 +14791,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx66(SolidButton, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx67(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx66(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ jsx67(SolidButton, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -14425,7 +14807,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-import { jsx as jsx67, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs40 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -14438,21 +14820,21 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = useRef20(null);
-  const tableRef = useRef20(null);
-  const [columnSizing, setColumnSizing] = useState29(columns.reduce((previousValue, currentValue) => {
+  const ref = useRef21(null);
+  const tableRef = useRef21(null);
+  const [columnSizing, setColumnSizing] = useState30(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState29();
-  const [pagination, setPagination] = useState29({
+  const [columnSizingInfo, setColumnSizingInfo] = useState30();
+  const [pagination, setPagination] = useState30({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState29(initialState?.columnFilters);
+  const [columnFilters, setColumnFilters] = useState30(initialState?.columnFilters);
   const computedColumnMinWidths = useMemo10(() => {
     return columns.reduce((previousValue, column) => {
       return {
@@ -14544,7 +14926,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx67(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx68(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -14592,8 +14974,8 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState29(false);
-  useEffect32(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = useState30(false);
+  useEffect33(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
@@ -14603,7 +14985,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect32(() => {
+  useEffect33(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -14629,24 +15011,24 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs39("div", { ref, className: clsx48("flex-col-4", className), children: [
-    /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs40("div", { ref, className: clsx49("flex-col-4", className), children: [
+    /* @__PURE__ */ jsx68(
       Scrollbars3,
       {
         autoHeight: true,
         autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
         autoHide: true,
-        children: /* @__PURE__ */ jsxs39(
+        children: /* @__PURE__ */ jsxs40(
           "table",
           {
             ref: tableRef,
-            className: clsx48(tableClassName),
+            className: clsx49(tableClassName),
             style: {
               ...columnSizeVars,
               width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
             children: [
-              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx67("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx67(
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx68("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx68(
                 "col",
                 {
                   style: {
@@ -14657,22 +15039,22 @@ var Table = ({
                 },
                 header.id
               )) }, headerGroup.id)),
-              /* @__PURE__ */ jsx67("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx67("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-                return /* @__PURE__ */ jsxs39(
+              /* @__PURE__ */ jsx68("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx68("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ jsxs40(
                   "th",
                   {
                     colSpan: header.colSpan,
-                    className: clsx48("relative group", header.column.columnDef.meta?.className),
+                    className: clsx49("relative group", header.column.columnDef.meta?.className),
                     children: [
-                      /* @__PURE__ */ jsx67("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs39("div", { className: "flex-row-1 items-center", children: [
-                        header.column.getCanSort() && /* @__PURE__ */ jsx67(
+                      /* @__PURE__ */ jsx68("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs40("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ jsx68(
                           TableSortButton,
                           {
                             sortDirection: header.column.getIsSorted(),
                             onClick: () => header.column.toggleSorting()
                           }
                         ),
-                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx67(
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx68(
                           TableFilterButton,
                           {
                             column: header.column,
@@ -14684,7 +15066,7 @@ var Table = ({
                           header.getContext()
                         )
                       ] }) }),
-                      header.column.getCanResize() && /* @__PURE__ */ jsx67(
+                      header.column.getCanResize() && /* @__PURE__ */ jsx68(
                         "div",
                         {
                           onMouseDown: header.getResizeHandler(),
@@ -14703,18 +15085,18 @@ var Table = ({
                   header.id
                 );
               }) }, headerGroup.id)) }),
-              /* @__PURE__ */ jsxs39("tbody", { children: [
+              /* @__PURE__ */ jsxs40("tbody", { children: [
                 table.getRowModel().rows.map((row) => {
-                  return /* @__PURE__ */ jsx67("tr", { onClick: () => onRowClick?.(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ jsx67("td", { children: flexRender(
+                  return /* @__PURE__ */ jsx68("tr", { onClick: () => onRowClick?.(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ jsx68("td", { children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
                   }) }, row.id);
                 }),
                 range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-                  return /* @__PURE__ */ jsx67("tr", { children: columns.map((column) => {
-                    return /* @__PURE__ */ jsx67("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx67(FillerRowElement, {}) }, column.id);
+                  return /* @__PURE__ */ jsx68("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ jsx68("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx68(FillerRowElement, {}) }, column.id);
                   }) }, "filler-row-" + index);
                 })
               ] })
@@ -14723,7 +15105,7 @@ var Table = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx67("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx68("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx68(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -14735,7 +15117,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Table,
     {
       ...props,
@@ -14759,7 +15141,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx67(
+          return /* @__PURE__ */ jsx68(
             Checkbox2,
             {
               checked: table.getIsAllRowsSelected(),
@@ -14772,7 +15154,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx67(
+          return /* @__PURE__ */ jsx68(
             Checkbox2,
             {
               disabled: !row.getCanSelect(),
@@ -14790,15 +15172,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx67(Checkbox2, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx68(Checkbox2, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx67(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx68(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -14812,7 +15194,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: clsx48(
+        bodyRowClassName: clsx49(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -14823,8 +15205,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-import { useState as useState30 } from "react";
-import { clsx as clsx49 } from "clsx";
+import { useState as useState31 } from "react";
+import { clsx as clsx50 } from "clsx";
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -14833,7 +15215,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon2, Copy } from "lucide-react";
-import { jsx as jsx68, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs41 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -14843,8 +15225,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = useState30(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState30(false);
+  const [isShowingIndication, setIsShowingIndication] = useState31(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState31(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -14864,10 +15246,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
-      className: clsx49("relative inline-block cursor-copy", containerClassName),
+      className: clsx50("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -14882,10 +15264,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsxs41(
           "div",
           {
-            className: clsx49(
+            className: clsx50(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -14897,18 +15279,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ jsxs40("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ jsx68(CheckIcon2, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ jsxs41("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ jsx69(CheckIcon2, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ jsxs40("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ jsx68(Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ jsxs41("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ jsx69(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx68(
+              /* @__PURE__ */ jsx69(
                 "div",
                 {
-                  className: clsx49(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx50(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -14921,8 +15303,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-import clsx50 from "clsx";
-import { jsx as jsx69, jsxs as jsxs41 } from "react/jsx-runtime";
+import clsx51 from "clsx";
+import { jsx as jsx70, jsxs as jsxs42 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -14940,7 +15322,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx69(
+    dateDisplay = /* @__PURE__ */ jsx70(
       DatePicker,
       {
         ...datePickerProps,
@@ -14954,25 +15336,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx69(
+    timeDisplay = /* @__PURE__ */ jsx70(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx50("h-full", { "justify-between w-full": mode === "time" }),
+        className: clsx51("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ jsxs41("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex-row-4", children: [
+  return /* @__PURE__ */ jsxs42("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ jsxs42("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx69("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs41("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ jsx69(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs42("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ jsx70(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ jsx70(
         SolidButton,
         {
           size: "medium",
@@ -14985,9 +15367,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback17, useEffect as useEffect33, useState as useState31 } from "react";
-import clsx51 from "clsx";
-import { jsx as jsx70, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useCallback as useCallback17, useEffect as useEffect34, useState as useState32 } from "react";
+import clsx52 from "clsx";
+import { jsx as jsx71, jsxs as jsxs43 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -15006,7 +15388,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState31({
+  }, setAnimation] = useState32({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -15105,7 +15487,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect33(() => {
+  useEffect34(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -15126,7 +15508,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       className: "relative overflow-hidden",
@@ -15137,15 +15519,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs42("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx70(
+      children: /* @__PURE__ */ jsxs43("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx71(
           "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__ */ jsx70(
+        /* @__PURE__ */ jsx71(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -15153,10 +15535,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx70(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx71(
               "div",
               {
-                className: clsx51(
+                className: clsx52(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -15184,8 +15566,8 @@ var ScrollPicker = ({
 
 // src/components/user-action/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx52 } from "clsx";
-import { jsx as jsx71, jsxs as jsxs43 } from "react/jsx-runtime";
+import { clsx as clsx53 } from "clsx";
+import { jsx as jsx72, jsxs as jsxs44 } from "react/jsx-runtime";
 var SearchBar = ({
   placeholder,
   onSearch,
@@ -15194,21 +15576,21 @@ var SearchBar = ({
   ...inputProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs43("div", { className: clsx52("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsxs44("div", { className: clsx53("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ jsx72(
       Input,
       {
         ...inputProps,
         placeholder: placeholder ?? translation("search")
       }
     ),
-    onSearch && /* @__PURE__ */ jsx71(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ jsx71(Search, { className: "w-full h-full" }) })
+    onSearch && /* @__PURE__ */ jsx72(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ jsx72(Search, { className: "w-full h-full" }) })
   ] });
 };
 
 // src/components/user-action/Tooltip.tsx
-import { clsx as clsx53 } from "clsx";
-import { jsx as jsx72, jsxs as jsxs44 } from "react/jsx-runtime";
+import { clsx as clsx54 } from "clsx";
+import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
 var Tooltip = ({
   tooltip,
   children,
@@ -15238,17 +15620,17 @@ var Tooltip = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
-      className: clsx53("relative inline-block", containerClassName),
+      className: clsx54("relative inline-block", containerClassName),
       ...handlers,
       children: [
         children,
-        isHovered && /* @__PURE__ */ jsxs44(
+        isHovered && /* @__PURE__ */ jsxs45(
           "div",
           {
-            className: clsx53(
+            className: clsx54(
               `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
               positionClasses[position],
@@ -15257,10 +15639,10 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ jsx72(
+              /* @__PURE__ */ jsx73(
                 "div",
                 {
-                  className: clsx53(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx54(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15273,26 +15655,26 @@ var Tooltip = ({
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-import { useId as useId10 } from "react";
-import { forwardRef as forwardRef14, useState as useState32 } from "react";
-import clsx54 from "clsx";
-import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useId as useId11 } from "react";
+import { forwardRef as forwardRef14, useState as useState33 } from "react";
+import clsx55 from "clsx";
+import { jsx as jsx74, jsxs as jsxs46 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef14(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = useState32(false);
-  const generatedId = useId10();
+  const [isFocused, setIsFocused] = useState33(false);
+  const generatedId = useId11();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs45("div", { className: clsx54("relative"), children: [
-    /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsxs46("div", { className: clsx55("relative"), children: [
+    /* @__PURE__ */ jsx74(
       Input,
       {
         ...props,
         id,
-        className: clsx54("h-14 px-4 pb-2 py-6.5", props.className),
+        className: clsx55("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -15305,13 +15687,13 @@ var InsideLabelInput = forwardRef14(function InsideLabelInput2({
         }
       }
     ),
-    /* @__PURE__ */ jsx73(
+    /* @__PURE__ */ jsx74(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx54(
+        className: clsx55(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -15327,7 +15709,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     InsideLabelInput,
     {
       ...props,
@@ -15338,26 +15720,26 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-import { forwardRef as forwardRef15, useEffect as useEffect34, useImperativeHandle as useImperativeHandle4, useRef as useRef21, useState as useState33 } from "react";
+import { forwardRef as forwardRef15, useEffect as useEffect35, useImperativeHandle as useImperativeHandle4, useRef as useRef22, useState as useState34 } from "react";
 import { Pencil } from "lucide-react";
-import clsx55 from "clsx";
-import { jsx as jsx74, jsxs as jsxs46 } from "react/jsx-runtime";
+import clsx56 from "clsx";
+import { jsx as jsx75, jsxs as jsxs47 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef15(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = useState33(initialState !== "display");
-  const innerRef = useRef21(null);
+  const [isEditing, setIsEditing] = useState34(initialState !== "display");
+  const innerRef = useRef22(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect34(() => {
+  useEffect35(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs46("div", { className: clsx55("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsxs47("div", { className: clsx56("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx75(
       Input,
       {
         ...props,
@@ -15376,16 +15758,16 @@ var ToggleableInput = forwardRef15(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: clsx55(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
+        className: clsx56(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
           "underline": isEditing,
           "text-transparent": !isEditing
         }),
         defaultStyle: false
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs46("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx74("span", { className: clsx55(" truncate"), children: value }),
-      /* @__PURE__ */ jsx74(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs47("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx75("span", { className: clsx56(" truncate"), children: value }),
+      /* @__PURE__ */ jsx75(Pencil, { className: clsx56(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -15395,7 +15777,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     ToggleableInput,
     {
       value,
@@ -15406,33 +15788,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-import { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import { useImperativeHandle as useImperativeHandle5 } from "react";
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var FocusTrap = forwardRef16(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = useRef22(null);
+  const innerRef = useRef23(null);
   useImperativeHandle5(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ jsx75("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx76("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect35, useState as useState34 } from "react";
+import { useEffect as useEffect36, useState as useState35 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState34(show);
-  const [isTransitioning, setIsTransitioning] = useState34(!isOpen);
+  const [isOpen, setIsOpen] = useState35(show);
+  const [isTransitioning, setIsTransitioning] = useState35(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect35(() => {
+  useEffect36(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -15455,12 +15837,367 @@ function Transition({
   };
   return BagFunctionUtil.resolve(children, bag);
 }
+
+// src/hooks/focus/useFocusGuards.ts
+import { useEffect as useEffect37 } from "react";
+var selectorName = "data-hw-focus-guard";
+function FocusGuard() {
+  const element = document.createElement("div");
+  element.setAttribute(selectorName, "");
+  element.tabIndex = 0;
+  element.style.border = "none";
+  element.style.outline = "none";
+  element.style.boxShadow = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+var FocusGuardsService = class _FocusGuardsService {
+  constructor() {
+    this.count = 0;
+  }
+  static getInstance() {
+    if (!_FocusGuardsService.instance) {
+      _FocusGuardsService.instance = new _FocusGuardsService();
+    }
+    return _FocusGuardsService.instance;
+  }
+  add() {
+    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
+    this.count++;
+  }
+  remove() {
+    if (this.count === 1) {
+      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
+    }
+    this.count--;
+  }
+};
+var useFocusGuards = () => {
+  useEffect37(() => {
+    FocusGuardsService.getInstance().add();
+    return () => {
+      FocusGuardsService.getInstance().remove();
+    };
+  }, []);
+};
+
+// src/hooks/focus/useFocusOnceVisible.ts
+import React20, { useEffect as useEffect38 } from "react";
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = React20.useState(false);
+  useEffect38(() => {
+    if (disable || hasUsedFocus) {
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !hasUsedFocus) {
+        ref.current?.focus();
+        setHasUsedFocus(hasUsedFocus);
+      }
+    }, {
+      threshold: 0.1
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [disable, hasUsedFocus, ref]);
+};
+
+// src/hooks/useRerender.ts
+import { useReducer as useReducer4 } from "react";
+var useRerender = () => {
+  return useReducer4(() => ({}), {})[1];
+};
+
+// src/hooks/useSearch.ts
+import { useCallback as useCallback18, useEffect as useEffect39, useMemo as useMemo11, useState as useState36 } from "react";
+
+// src/utils/simpleSearch.ts
+var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
+  });
+};
+var MultiSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+  });
+};
+var SimpleSearchWithMapping = (search, objects, mapping) => {
+  return MultiSearchWithMapping(search, objects, (value) => [mapping(value)]);
+};
+var SimpleSearch = (search, objects) => {
+  return SimpleSearchWithMapping(search, objects, (value) => value);
+};
+
+// src/hooks/useSearch.ts
+var useSearch = ({
+  list,
+  initialSearch,
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
+}) => {
+  const [search, setSearch] = useState36(initialSearch ?? "");
+  const [result, setResult] = useState36(list);
+  const searchTags = useMemo11(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = useCallback18((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
+  useEffect39(() => {
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = useMemo11(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = useMemo11(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = useMemo11(() => {
+    if (!disabled) {
+      return sortedAndFilteredResult;
+    }
+    return list;
+  }, [disabled, list, sortedAndFilteredResult]);
+  return {
+    result: usedResult,
+    hasResult: usedResult.length > 0,
+    allItems: list,
+    updateSearch,
+    search,
+    setSearch
+  };
+};
+
+// src/utils/emailValidation.ts
+var validateEmail = (email) => {
+  return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
+};
+
+// src/hooks/useValidators.ts
+var notEmpty = (value) => {
+  if (!value) {
+    return "notEmpty";
+  }
+};
+var boundsValidator = (length, bounds) => {
+  const [min, max] = bounds;
+  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
+    return "range";
+  }
+  if (min !== void 0 && (length === void 0 || length < min)) {
+    return "lower";
+  }
+  if (max !== void 0 && length !== void 0 && length > max) {
+    return "upper";
+  }
+  return "none";
+};
+var lengthValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeString",
+    lower: "tooShort",
+    upper: "tooLong",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var selectionValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeSelectionItems",
+    lower: "tooFewSelectionItems",
+    upper: "tooManySelectionItems",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var emailValidator = (value) => {
+  if (!value || !validateEmail(value)) {
+    return "invalidEmail";
+  }
+};
+var UseValidators = {
+  notEmpty,
+  length: lengthValidator,
+  email: emailValidator,
+  selection: selectionValidator
+};
+var useTranslatedValidators = () => {
+  const translation = useHightideTranslation();
+  return {
+    notEmpty: (value) => {
+      const result = notEmpty(value);
+      if (result) {
+        return translation(result);
+      }
+    },
+    length: (value, length) => {
+      const [min, max] = length;
+      const result = lengthValidator(value, length);
+      if (result) {
+        return translation(result, { min, max });
+      }
+    },
+    email: (value) => {
+      const result = emailValidator(value);
+      if (result) {
+        return translation(result);
+      }
+    },
+    selection: (value, length) => {
+      const [min, max] = length;
+      const result = selectionValidator(value, length);
+      if (result) {
+        return translation(
+          result,
+          { min, max }
+        );
+      }
+    }
+  };
+};
+
+// src/utils/builder.ts
+var builder = (value, update) => {
+  update(value);
+  return value;
+};
+
+// src/utils/easeFunctions.ts
+var EaseFunctions = class _EaseFunctions {
+  static cubicBezierGeneric(x1, y1, x2, y2) {
+    const cx = 3 * x1;
+    const bx = 3 * (x2 - x1) - cx;
+    const ax = 1 - cx - bx;
+    const cy = 3 * y1;
+    const by = 3 * (y2 - y1) - cy;
+    const ay = 1 - cy - by;
+    const x = (t) => ((ax * t + bx) * t + cx) * t;
+    const y = (t) => ((ay * t + by) * t + cy) * t;
+    return {
+      x,
+      y
+    };
+  }
+  static cubicBezier(x1, y1, x2, y2) {
+    const { y } = _EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2);
+    return (t) => {
+      t = clamp(t);
+      return y(t);
+    };
+  }
+  static easeInEaseOut(t) {
+    return _EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t);
+  }
+};
+
+// src/utils/loopingArray.ts
+var LoopingArrayCalculator = class _LoopingArrayCalculator {
+  constructor(length, isLooping = true, allowedOverScroll = 0.1) {
+    if (allowedOverScroll < 0 || length < 1) {
+      throw new Error("Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true");
+    }
+    this.length = length;
+    this.isLooping = isLooping;
+    this.allowedOverScroll = allowedOverScroll;
+  }
+  getCorrectedPosition(position) {
+    if (!this.isLooping) {
+      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position));
+    }
+    if (position >= this.length) {
+      return position % this.length;
+    }
+    if (position < 0) {
+      return this.length - Math.abs(position) % this.length;
+    }
+    return position;
+  }
+  static withoutOffset(position) {
+    return position + _LoopingArrayCalculator.getOffset(position);
+  }
+  static getOffset(position) {
+    return Math.round(position) - position;
+  }
+  /**
+   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)
+   */
+  getDistanceDirectional(position, target, direction) {
+    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {
+      throw new Error("Invalid parameters: position is out of bounds.");
+    }
+    const isForwardInvalid = direction === 1 && position > target;
+    const isBackwardInvalid = direction === -1 && target < position;
+    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {
+      return Infinity;
+    }
+    if (direction === -1) {
+      return this.getDistanceDirectional(target, position, 1);
+    }
+    position = this.getCorrectedPosition(position);
+    target = this.getCorrectedPosition(target);
+    let distance = (target - position) * direction;
+    if (distance < 0) {
+      distance = this.length - Math.abs(position) % this.length + target;
+    }
+    return distance;
+  }
+  getDistanceForward(position, target) {
+    return this.getDistanceDirectional(position, target, 1);
+  }
+  getDistanceBackward(position, target) {
+    return this.getDistanceDirectional(position, target, -1);
+  }
+  getDistance(position, target) {
+    const forwardDistance = this.getDistanceForward(position, target);
+    const backwardDistance = this.getDistanceBackward(position, target);
+    return Math.min(forwardDistance, backwardDistance);
+  }
+  getBestDirection(position, target) {
+    const forwardDistance = this.getDistanceForward(position, target);
+    const backwardDistance = this.getDistanceBackward(position, target);
+    return forwardDistance < backwardDistance ? 1 : -1;
+  }
+};
+
+// src/utils/noop.ts
+var noop = () => void 0;
 export {
   ASTNodeInterpreter,
   AnimatedRing,
+  ArrayUtil,
   Avatar2 as Avatar,
   AvatarGroup,
   AvatarUtil,
+  BagFunctionUtil,
   BreadCrumb,
   ButtonColorUtil,
   ButtonUtil,
@@ -15484,6 +16221,7 @@ export {
   Dialog,
   DiscardChangesDialog,
   DividerInserter,
+  EaseFunctions,
   ErrorComponent,
   Expandable,
   ExpandableUncontrolled,
@@ -15514,14 +16252,21 @@ export {
   LoadingAnimation,
   LoadingButton,
   LoadingContainer,
+  LocalStorageService,
+  LocaleContext,
+  LocaleProvider,
+  LocalizationUtil,
+  LoopingArrayCalculator,
   MarkdownInterpreter,
   Menu,
   MenuItem,
+  MultiSearchWithMapping,
   MultiSelect,
   MultiSelectChipDisplay,
   MultiSelectChipDisplayUncontrolled,
   MultiSelectProperty,
   MultiSelectUncontrolled,
+  MultiSubjectSearchWithMapping,
   Navigation,
   NavigationItemList,
   NumberProperty,
@@ -15542,10 +16287,15 @@ export {
   SelectOption,
   SelectRoot,
   SelectUncontrolled,
+  SessionStorageService,
+  SimpleSearch,
+  SimpleSearchWithMapping,
   SingleSelectProperty,
   SolidButton,
   StepperBar,
   StepperBarUncontrolled,
+  Tab,
+  TabView,
   Table,
   TableCell,
   TableFilterButton,
@@ -15560,7 +16310,10 @@ export {
   Textarea,
   TextareaUncontrolled,
   TextareaWithHeadline,
+  ThemeContext,
   ThemeDialog,
+  ThemeProvider,
+  ThemeUtil,
   TimeDisplay,
   TimePicker,
   TimePickerUncontrolled,
@@ -15568,9 +16321,62 @@ export {
   ToggleableInputUncontrolled,
   Tooltip,
   Transition,
+  UseValidators,
   VerticalDivider,
   YearMonthPicker,
-  YearMonthPickerUncontrolled
+  YearMonthPickerUncontrolled,
+  addDuration,
+  builder,
+  changeDuration,
+  clamp,
+  closestMatch,
+  createLoopingList,
+  createLoopingListWithIndex,
+  equalDate,
+  equalSizeGroups,
+  formatDate,
+  formatDateTime,
+  generateShadingColors,
+  getBetweenDuration,
+  getDaysInMonth,
+  getNeighbours,
+  getWeeksForCalenderMonth,
+  hightideTranslation,
+  hightideTranslationLocales,
+  isInTimeSpan,
+  match,
+  monthsList,
+  noop,
+  range,
+  resolveSetState,
+  shadingColorValues,
+  subtractDuration,
+  useDelay,
+  useFloatingElement,
+  useFocusGuards,
+  useFocusManagement,
+  useFocusOnceVisible,
+  useFocusTrap,
+  useHightideTranslation,
+  useHoverState,
+  useICUTranslation,
+  useIsMounted,
+  useLanguage,
+  useLocalStorage,
+  useLocale,
+  useLogOnce,
+  useOutsideClick,
+  useOverwritableState,
+  usePopoverPosition,
+  useRerender,
+  useResizeCallbackWrapper,
+  useSearch,
+  useTabContext,
+  useTheme,
+  useTranslatedValidators,
+  validateEmail,
+  weekDayList,
+  writeToClipboard
 };
 /*! Bundled license information:
 
@@ -15596,4 +16402,4 @@ use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map