@helpwave/hightide 0.1.47 → 0.1.48

package/dist/index.js

@@ -38,12 +38,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
-    var useState36 = React21.useState;
-    var useEffect39 = React21.useEffect;
+    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 = useState36({ 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;
@@ -52,7 +52,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe2, value, getSnapshot]
       );
-      useEffect39(
+      useEffect40(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe2(function() {
@@ -101,7 +101,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState36({
+        cachedValue = useState37({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -113,7 +113,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe2, value, getSnapshot]
         );
-        useEffect39(
+        useEffect40(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe2(function() {
@@ -139,7 +139,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React21 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState36 = React21.useState, useEffect39 = React21.useEffect, useLayoutEffect3 = React21.useLayoutEffect, useDebugValue = React21.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      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;
       exports2.useSyncExternalStore = void 0 !== React21.useSyncExternalStore ? React21.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
@@ -6470,6 +6470,8 @@ __export(index_exports, {
   SolidButton: () => SolidButton,
   StepperBar: () => StepperBar,
   StepperBarUncontrolled: () => StepperBarUncontrolled,
+  Tab: () => Tab,
+  TabView: () => TabView,
   Table: () => Table,
   TableCell: () => TableCell,
   TableFilterButton: () => TableFilterButton,
@@ -6545,6 +6547,7 @@ __export(index_exports, {
   useRerender: () => useRerender,
   useResizeCallbackWrapper: () => useResizeCallbackWrapper,
   useSearch: () => useSearch,
+  useTabContext: () => useTabContext,
   useTheme: () => useTheme,
   useTranslatedValidators: () => useTranslatedValidators,
   validateEmail: () => validateEmail,
@@ -7174,7 +7177,7 @@ var hightideTranslation = {
       });
     },
     "themes": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Farbschema`,
         "other": `Farbschemas`
       });
@@ -7186,19 +7189,19 @@ var hightideTranslation = {
     "time.april": `April`,
     "time.august": `August`,
     "time.century": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Jahrhundert`,
         "other": `Jahrhunderte`
       });
     },
     "time.day": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Tag`,
         "other": `Tage`
       });
     },
     "time.decade": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Jahrzehnt`,
         "other": `Jahrzehnte`
       });
@@ -7206,7 +7209,7 @@ var hightideTranslation = {
     "time.december": `December`,
     "time.february": `Febuar`,
     "time.hour": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Stunde`,
         "other": `Stunden`
       });
@@ -7221,25 +7224,25 @@ var hightideTranslation = {
     "time.march": `M\xE4rz`,
     "time.may": `Mai`,
     "time.microsecond": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Mikrosekunde`,
         "other": `Mikrosekunden`
       });
     },
     "time.millisecond": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Millisekunde`,
         "other": `Millisekunden`
       });
     },
     "time.minute": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Minute`,
         "other": `Minuten`
       });
     },
     "time.month": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Monat`,
         "other": `Monate`
       });
@@ -7262,7 +7265,7 @@ var hightideTranslation = {
       });
     },
     "time.nanosecond": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Nanosekunde`,
         "other": `Nanosekunden`
       });
@@ -7270,7 +7273,7 @@ var hightideTranslation = {
     "time.november": `November`,
     "time.october": `October`,
     "time.second": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Sekunde`,
         "other": `Sekunden`
       });
@@ -7279,7 +7282,7 @@ var hightideTranslation = {
     "time.today": `Heute`,
     "time.tomorrow": `Morgen`,
     "time.year": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Jahr`,
         "other": `Jahre`
       });
@@ -7410,7 +7413,7 @@ var hightideTranslation = {
       });
     },
     "themes": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Theme`,
         "other": `Themes`
       });
@@ -7422,19 +7425,19 @@ var hightideTranslation = {
     "time.april": `April`,
     "time.august": `August`,
     "time.century": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Century`,
         "other": `Centuries`
       });
     },
     "time.day": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Day`,
         "other": `Days`
       });
     },
     "time.decade": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Decade`,
         "other": `Decades`
       });
@@ -7442,7 +7445,7 @@ var hightideTranslation = {
     "time.december": `December`,
     "time.february": `Febuary`,
     "time.hour": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Hour`,
         "other": `Hours`
       });
@@ -7457,25 +7460,25 @@ var hightideTranslation = {
     "time.march": `March`,
     "time.may": `May`,
     "time.microsecond": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Microsecond`,
         "other": `Microseconds`
       });
     },
     "time.millisecond": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Millisecond`,
         "other": `Milliseconds`
       });
     },
     "time.minute": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Minute`,
         "other": `Minutes`
       });
     },
     "time.month": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Month`,
         "other": `Months`
       });
@@ -7498,7 +7501,7 @@ var hightideTranslation = {
       });
     },
     "time.nanosecond": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Nanosecond`,
         "other": `Nanoseconds`
       });
@@ -7506,7 +7509,7 @@ var hightideTranslation = {
     "time.november": `November`,
     "time.october": `October`,
     "time.second": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Second`,
         "other": `Seconds`
       });
@@ -7515,7 +7518,7 @@ var hightideTranslation = {
     "time.today": `Today`,
     "time.tomorrow": `Tomorrow`,
     "time.year": ({ count }) => {
-      return import_internationalization.TranslationGen.resolveSelect(count, {
+      return import_internationalization.TranslationGen.resolvePlural(count, {
         "=1": `Year`,
         "other": `Years`
       });
@@ -12953,9 +12956,102 @@ var ScrollArea2 = ({
   );
 };
 
-// src/components/layout/TextImage.tsx
+// src/components/layout/TabView.tsx
+var import_react27 = require("react");
+var import_react28 = require("react");
 var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var TabContext = (0, import_react28.createContext)(null);
+function useTabContext() {
+  const ctx = (0, import_react28.useContext)(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] = (0, import_react28.useState)([]);
+  const [active, setActiveState] = (0, import_react28.useState)(null);
+  const buttonRefs = (0, import_react28.useRef)({});
+  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__ */ (0, import_jsx_runtime40.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...outerDivProps, className: (0, import_clsx26.default)("w-full", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx26.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "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: (0, import_clsx26.default)(
+          "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 = (0, import_react27.useId)();
+  const id = customId ?? generatedId;
+  (0, import_react28.useEffect)(() => {
+    register(id, label);
+    return () => unregister(id);
+  }, [id, label]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "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
+var import_clsx27 = __toESM(require("clsx"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var TextImage = ({
   title,
   description,
@@ -12977,25 +13073,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__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
-      className: (0, import_clsx26.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx27.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "div",
         {
-          className: (0, import_clsx26.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx27.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "typography-title-lg", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
+            badge && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: (0, import_clsx27.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "typography-title-lg", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
           ]
         }
       )
@@ -13004,7 +13100,7 @@ var TextImage = ({
 };
 
 // src/components/layout/VerticalDivider.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -13012,7 +13108,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "svg",
     {
       width,
@@ -13021,7 +13117,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "line",
           {
             opacity: "0.5",
@@ -13035,7 +13131,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "linearGradient",
           {
             id: "paint_linear",
@@ -13045,9 +13141,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -13058,32 +13154,32 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx27 = __toESM(require("clsx"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_clsx28 = __toESM(require("clsx"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx28.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
-var import_clsx28 = require("clsx");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_clsx29 = require("clsx");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_clsx28.clsx)("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: (0, import_clsx29.clsx)("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_clsx29 = require("clsx");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_clsx30 = require("clsx");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -13093,8 +13189,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react27.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react27.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react29.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react29.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -13103,41 +13199,41 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)(className) });
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx30.clsx)(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx30.clsx)("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(HelpwaveLogo, { animate: "loading" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx31.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx31 = __toESM(require("clsx"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_clsx31.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: (0, import_clsx32.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -13154,7 +13250,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "svg",
     {
       style: {
@@ -13163,7 +13259,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "circle",
           {
             cx: center,
@@ -13174,7 +13270,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "circle",
           {
             cx: center,
@@ -13194,34 +13290,34 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-var import_clsx32 = __toESM(require("clsx"));
-var import_react28 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_clsx33 = __toESM(require("clsx"));
+var import_react30 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: (0, import_clsx32.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: (0, import_clsx33.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react28.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_link.default,
         {
           href: crumb.link,
-          className: (0, import_clsx32.default)("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
+          className: (0, import_clsx33.default)("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: (0, import_clsx32.default)(`px-1`, color), children: "/" })
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: (0, import_clsx33.default)(`px-1`, color), children: "/" })
     ] }, index);
   }) });
 };
 
 // src/components/navigation/Navigation.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_react29 = require("react");
-var import_react30 = require("react");
+var import_react31 = require("react");
+var import_react32 = require("react");
 var import_link2 = __toESM(require_link2());
-var import_clsx33 = __toESM(require("clsx"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_clsx34 = __toESM(require("clsx"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -13231,10 +13327,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = (0, import_react30.useState)(false);
-  const containerRef = (0, import_react30.useRef)();
-  const triggerRef = (0, import_react30.useRef)(null);
-  const id = (0, import_react30.useId)();
+  const [isOpen, setOpen] = (0, import_react32.useState)(false);
+  const containerRef = (0, import_react32.useRef)();
+  const triggerRef = (0, import_react32.useRef)(null);
+  const id = (0, import_react32.useId)();
   const style = useFloatingElement({
     active: isOpen,
     containerRef,
@@ -13242,14 +13338,14 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = (0, import_react30.useCallback)((event) => {
+  const onBlur = (0, import_react32.useCallback)((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "button",
       {
         id: "navigation-" + id,
@@ -13264,11 +13360,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -13282,12 +13378,12 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx34.default)(
           "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__ */ (0, import_jsx_runtime49.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           import_link2.default,
           {
             href: link,
@@ -13301,24 +13397,24 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { ...restProps, className: (0, import_clsx33.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { ...restProps, className: (0, import_clsx34.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = (0, import_react30.useState)(false);
-  const id = (0, import_react30.useId)();
-  const menuRef = (0, import_react30.useRef)(null);
-  (0, import_react29.useEffect)(() => {
+  const [isMobileOpen, setIsMobileOpen] = (0, import_react32.useState)(false);
+  const id = (0, import_react32.useId)();
+  const menuRef = (0, import_react32.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("nav", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("nav", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       NavigationItemList,
       {
         ...props,
-        className: (0, import_clsx33.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: (0, import_clsx34.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       IconButton,
       {
         color: "transparent",
@@ -13327,10 +13423,10 @@ var Navigation = ({ ...props }) => {
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react9.Menu, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react9.Menu, { className: "w-6 h-6" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "div",
       {
         id: "navigation-menu-" + id,
@@ -13343,7 +13439,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx34.default)(
           "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
@@ -13351,8 +13447,8 @@ var Navigation = ({ ...props }) => {
           props.className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react9.XIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationItemList, { ...props, className: (0, import_clsx33.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react9.XIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationItemList, { ...props, className: (0, import_clsx34.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -13361,9 +13457,9 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
-var import_react31 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react33 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -13372,11 +13468,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = (0, import_react31.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react33.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -13386,15 +13482,15 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx34.default)("flex-row-1", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react10.ChevronFirst, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react10.ChevronLeft, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: (0, import_clsx35.default)("flex-row-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronFirst, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronLeft, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Input,
         {
           value,
-          className: (0, import_clsx34.default)(
+          className: (0, import_clsx35.default)(
             "w-full text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -13414,8 +13510,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "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",
@@ -13423,15 +13519,15 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react10.ChevronRight, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react10.ChevronLast, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronRight, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronLast, {}) })
   ] });
 };
 
 // src/components/navigation/StepperBar.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -13453,12 +13549,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
-      className: (0, import_clsx35.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx36.default)("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           SolidButton,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -13467,18 +13563,18 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react11.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react11.ChevronLeft, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx35.default)(
+              className: (0, import_clsx36.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -13494,7 +13590,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           SolidButton,
           {
             onClick: () => update(currentStep + 1),
@@ -13502,18 +13598,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react11.ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react11.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           SolidButton,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react11.Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react11.Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -13524,7 +13620,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     StepperBar,
     {
       ...props,
@@ -13539,7 +13635,7 @@ var import_lucide_react14 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 
 // node_modules/@radix-ui/react-checkbox/dist/index.mjs
 var React19 = __toESM(require("react"), 1);
@@ -13664,7 +13760,7 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-checkbox/dist/index.mjs
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var CHECKBOX_NAME = "Checkbox";
 var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
@@ -13712,7 +13808,7 @@ function CheckboxProvider(props) {
     bubbleInput,
     setBubbleInput
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     CheckboxProviderImpl,
     {
       scope: __scopeCheckbox,
@@ -13746,7 +13842,7 @@ var CheckboxTrigger = React19.forwardRef(
         return () => form.removeEventListener("reset", reset);
       }
     }, [control, setChecked]);
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Primitive.button,
       {
         type: "button",
@@ -13788,7 +13884,7 @@ var Checkbox = React19.forwardRef(
       form,
       ...checkboxProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       CheckboxProvider,
       {
         __scopeCheckbox,
@@ -13800,8 +13896,8 @@ var Checkbox = React19.forwardRef(
         name,
         form,
         value,
-        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             CheckboxTrigger,
             {
               ...checkboxProps,
@@ -13809,7 +13905,7 @@ var Checkbox = React19.forwardRef(
               __scopeCheckbox
             }
           ),
-          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             CheckboxBubbleInput,
             {
               __scopeCheckbox
@@ -13826,11 +13922,11 @@ var CheckboxIndicator = React19.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
     const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Presence,
       {
         present: forceMount || isIndeterminate(context.checked) || context.checked === true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Primitive.span,
           {
             "data-state": getState(context.checked),
@@ -13882,7 +13978,7 @@ var CheckboxBubbleInput = React19.forwardRef(
       }
     }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
     const defaultCheckedRef = React19.useRef(isIndeterminate(checked) ? false : checked);
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Primitive.input,
       {
         type: "checkbox",
@@ -13924,7 +14020,7 @@ function getState(checked) {
 }
 
 // src/components/user-action/Checkbox.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
   sm: "size-5 border-1",
   md: "size-6 border-1",
@@ -13946,14 +14042,14 @@ var Checkbox2 = ({
 }) => {
   const usedSizeClass = checkboxSizeMapping[size];
   const innerIconSize = checkboxIconSizeMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     Checkbox,
     {
       ...props,
       disabled,
       checked: indeterminate ? "indeterminate" : checked,
       onCheckedChange: onChange,
-      className: (0, import_clsx36.default)(
+      className: (0, import_clsx37.default)(
         usedSizeClass,
         `flex-col-0 items-center justify-center rounded`,
         {
@@ -13964,10 +14060,10 @@ var Checkbox2 = ({
         },
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(CheckboxIndicator, { children: [
-        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: (0, import_clsx36.default)("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(CheckboxIndicator, { children: [
+        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: (0, import_clsx37.default)("bg-input-background", innerIconSize) }),
+        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
       ] })
     }
   );
@@ -13978,7 +14074,7 @@ var CheckboxUncontrolled = ({
   ...props
 }) => {
   const [checked, setChecked] = useOverwritableState(initialChecked, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     Checkbox2,
     {
       ...props,
@@ -13990,8 +14086,8 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
   input,
@@ -14004,11 +14100,11 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: (0, import_clsx37.default)("flex-row-0 group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: (0, import_clsx38.default)("flex-row-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           "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,
@@ -14017,15 +14113,15 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-semibold", children: name })
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           "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,
@@ -14035,13 +14131,13 @@ var PropertyBase = ({
         ),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
-          onRemove && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
+          onRemove && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx37.default)("items-center"),
+              className: (0, import_clsx38.default)("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -14053,8 +14149,8 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_react32 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onChange,
@@ -14062,16 +14158,16 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  const id = (0, import_react32.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const id = (0, import_react34.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react14.Check, { size: 24 }),
-      input: () => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.Check, { size: 24 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Checkbox2,
           {
             id,
@@ -14081,7 +14177,7 @@ var CheckboxProperty = ({
             "aria-labelledby": id + "label"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
       ] })
     }
   );
@@ -14089,8 +14185,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_clsx39 = __toESM(require("clsx"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onChange,
@@ -14101,16 +14197,16 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react15.CalendarDays, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react15.CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         Input,
         {
-          className: (0, import_clsx38.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: (0, import_clsx39.default)("!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,
@@ -14132,8 +14228,8 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   values,
@@ -14141,25 +14237,25 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = values.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react16.List, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react16.List, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         MultiSelectChipDisplay,
         {
           values,
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: (0, import_clsx39.default)(
+            className: (0, import_clsx40.default)(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: (0, import_clsx39.default)({
+            className: (0, import_clsx40.default)({
               "!bg-warning !text-surface-warning": softRequired && !hasValue
             })
           },
@@ -14172,8 +14268,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onChange,
@@ -14185,22 +14281,22 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react17.Binary, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react17.Binary, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         "div",
         {
-          className: (0, import_clsx40.default)("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
+          className: (0, import_clsx41.default)("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Input,
               {
-                className: (0, import_clsx40.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: (0, import_clsx41.default)("!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,
@@ -14223,7 +14319,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: (0, import_clsx40.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: (0, import_clsx41.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -14233,8 +14329,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_clsx42 = __toESM(require("clsx"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -14243,20 +14339,20 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react18.List, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react18.List, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Select,
         {
           value,
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: (0, import_clsx41.default)(
+            className: (0, import_clsx42.default)(
               "border-none w-full",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
@@ -14273,13 +14369,13 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx44 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
-var import_react33 = require("react");
-var import_clsx42 = __toESM(require("clsx"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var Textarea = (0, import_react33.forwardRef)(function Textarea2({
+var import_react35 = require("react");
+var import_clsx43 = __toESM(require("clsx"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var Textarea = (0, import_react35.forwardRef)(function Textarea2({
   id,
   onChange,
   onChangeText,
@@ -14297,12 +14393,12 @@ var Textarea = (0, import_react33.forwardRef)(function Textarea2({
     onEditCompleted?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "textarea",
     {
       ref,
       id,
-      className: (0, import_clsx42.default)(
+      className: (0, import_clsx43.default)(
         "resize-none w-full h-32 overflow-y-scroll",
         "py-2 px-3 rounded-md border-2 border-transparent focus-style-none",
         {
@@ -14335,7 +14431,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [text, setText] = useOverwritableState(value, onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Textarea,
     {
       ...props,
@@ -14353,12 +14449,12 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react33.useId)();
+  const genId = (0, import_react35.useId)();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
-      className: (0, import_clsx42.default)(
+      className: (0, import_clsx43.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -14367,13 +14463,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        headline && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx42.default)(
+            className: (0, import_clsx43.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             ),
@@ -14386,7 +14482,7 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -14397,17 +14493,17 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react19.Text, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react19.Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Textarea,
         {
-          className: (0, import_clsx43.default)({
+          className: (0, import_clsx44.default)({
             "bg-surface-warning placeholder-warning": softRequired && !hasValue
           }),
           rows: 5,
@@ -14436,12 +14532,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx44 = require("clsx");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_clsx45 = require("clsx");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_clsx44.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx45.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -14459,25 +14555,25 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react39 = require("react");
-var import_clsx48 = __toESM(require("clsx"));
+var import_react41 = require("react");
+var import_clsx49 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/table/TableCell.tsx
-var import_clsx45 = require("clsx");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_clsx46 = require("clsx");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: (0, import_clsx46.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react34 = require("react");
+var import_react36 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -14487,8 +14583,8 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_clsx46 = __toESM(require("clsx"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_clsx47 = __toESM(require("clsx"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -14496,20 +14592,20 @@ var TableSortButton = ({
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react20.ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.ChevronsUpDown, { className: "w-full h-full" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     IconButton,
     {
       size: "tiny",
       color,
-      className: (0, import_clsx46.default)(className),
+      className: (0, import_clsx47.default)(className),
       ...buttonProps,
       children: icon
     }
@@ -14520,8 +14616,8 @@ var TableSortButton = ({
 var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react37 = require("react");
-var import_clsx47 = __toESM(require("clsx"));
+var import_react39 = require("react");
+var import_clsx48 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -14592,15 +14688,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react35 = require("react");
+var import_react37 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react35.useState)(false);
-  const [timer, setTimer] = (0, import_react35.useState)();
+  const [isHovered, setIsHovered] = (0, import_react37.useState)(false);
+  const [timer, setTimer] = (0, import_react37.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -14616,14 +14712,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -14636,9 +14732,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-var import_react36 = require("react");
+var import_react38 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -14656,17 +14752,17 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   "div",
   {
-    className: (0, import_clsx47.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx48.default)("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,
@@ -14696,10 +14792,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react37.useRef)(null);
-  const menuRef = (0, import_react37.useRef)(null);
+  const triggerRef = (0, import_react39.useRef)(null);
+  const menuRef = (0, import_react39.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react37.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react39.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -14710,7 +14806,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -14727,19 +14823,19 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
     trigger(bag, triggerRef),
-    (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "div",
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx47.default)(
+        className: (0, import_clsx48.default)(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -14763,25 +14859,25 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-var import_react38 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react38.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react40.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react21.FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react21.FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -14789,9 +14885,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -14801,8 +14897,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -14815,8 +14911,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -14830,8 +14926,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -14844,7 +14940,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -14858,12 +14954,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SolidButton, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -14874,7 +14970,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -14887,22 +14983,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react39.useRef)(null);
-  const tableRef = (0, import_react39.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react39.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react41.useRef)(null);
+  const tableRef = (0, import_react41.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react41.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react39.useState)();
-  const [pagination, setPagination] = (0, import_react39.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react41.useState)();
+  const [pagination, setPagination] = (0, import_react41.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react39.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react39.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react41.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react41.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -14911,7 +15007,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react39.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react41.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -14919,12 +15015,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react39.useMemo)(() => {
+  const tableMinWidth = (0, import_react41.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react39.useMemo)(() => {
+  const updateColumnSizes = (0, import_react41.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -14993,7 +15089,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -15041,18 +15137,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react39.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react41.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -15068,7 +15164,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react39.useMemo)(() => {
+  const columnSizeVars = (0, import_react41.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -15078,24 +15174,24 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ref, className: (0, import_clsx49.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       import_react_custom_scrollbars_23.Scrollbars,
       {
         autoHeight: true,
         autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
         autoHide: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
           "table",
           {
             ref: tableRef,
-            className: (0, import_clsx48.default)(tableClassName),
+            className: (0, import_clsx49.default)(tableClassName),
             style: {
               ...columnSizeVars,
               width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
             children: [
-              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                 "col",
                 {
                   style: {
@@ -15106,22 +15202,22 @@ var Table = ({
                 },
                 header.id
               )) }, headerGroup.id)),
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
                   "th",
                   {
                     colSpan: header.colSpan,
-                    className: (0, import_clsx48.default)("relative group", header.column.columnDef.meta?.className),
+                    className: (0, import_clsx49.default)("relative group", header.column.columnDef.meta?.className),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                           TableSortButton,
                           {
                             sortDirection: header.column.getIsSorted(),
                             onClick: () => header.column.toggleSorting()
                           }
                         ),
-                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                           TableFilterButton,
                           {
                             column: header.column,
@@ -15133,7 +15229,7 @@ var Table = ({
                           header.getContext()
                         )
                       ] }) }),
-                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                         "div",
                         {
                           onMouseDown: header.getResizeHandler(),
@@ -15152,18 +15248,18 @@ var Table = ({
                   header.id
                 );
               }) }, headerGroup.id)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("tbody", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("tbody", { children: [
                 table.getRowModel().rows.map((row) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tr", { onClick: () => onRowClick?.(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: (0, import_react_table.flexRender)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { onClick: () => onRowClick?.(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { children: (0, import_react_table.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__ */ (0, import_jsx_runtime67.jsx)("tr", { children: columns.map((column) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FillerRowElement, {}) }, column.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FillerRowElement, {}) }, column.id);
                   }) }, "filler-row-" + index);
                 })
               ] })
@@ -15172,7 +15268,7 @@ var Table = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -15184,7 +15280,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     Table,
     {
       ...props,
@@ -15203,12 +15299,12 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react39.useMemo)(() => {
+  const columnsWithSelection = (0, import_react41.useMemo)(() => {
     return [
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Checkbox2,
             {
               checked: table.getIsAllRowsSelected(),
@@ -15221,7 +15317,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Checkbox2,
             {
               disabled: !row.getCanSelect(),
@@ -15239,15 +15335,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Checkbox2, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Checkbox2, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -15261,7 +15357,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx48.default)(
+        bodyRowClassName: (0, import_clsx49.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -15272,8 +15368,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react40 = require("react");
-var import_clsx49 = require("clsx");
+var import_react42 = require("react");
+var import_clsx50 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -15282,7 +15378,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -15292,8 +15388,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react40.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react40.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react42.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react42.useState)(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -15313,10 +15409,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "div",
     {
-      className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx50.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -15331,10 +15427,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
           "div",
           {
-            className: (0, import_clsx49.clsx)(
+            className: (0, import_clsx50.clsx)(
               `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",
@@ -15346,18 +15442,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react22.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react22.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx50.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15370,8 +15466,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx50 = __toESM(require("clsx"));
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_clsx51 = __toESM(require("clsx"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -15389,7 +15485,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -15403,25 +15499,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx50.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx51.default)("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         SolidButton,
         {
           size: "medium",
@@ -15434,9 +15530,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react41 = require("react");
-var import_clsx51 = __toESM(require("clsx"));
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_clsx52 = __toESM(require("clsx"));
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -15455,7 +15551,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react41.useState)({
+  }, setAnimation] = (0, import_react43.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -15471,7 +15567,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react41.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react43.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -15481,7 +15577,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react41.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react43.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -15554,7 +15650,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -15575,7 +15671,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -15586,15 +15682,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "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__ */ (0, import_jsx_runtime70.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -15602,10 +15698,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               "div",
               {
-                className: (0, import_clsx51.default)(
+                className: (0, import_clsx52.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -15633,8 +15729,8 @@ var ScrollPicker = ({
 
 // src/components/user-action/SearchBar.tsx
 var import_lucide_react23 = require("lucide-react");
-var import_clsx52 = require("clsx");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_clsx53 = require("clsx");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var SearchBar = ({
   placeholder,
   onSearch,
@@ -15643,21 +15739,21 @@ var SearchBar = ({
   ...inputProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_clsx52.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: (0, import_clsx53.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       Input,
       {
         ...inputProps,
         placeholder: placeholder ?? translation("search")
       }
     ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react23.Search, { className: "w-full h-full" }) })
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react23.Search, { className: "w-full h-full" }) })
   ] });
 };
 
 // src/components/user-action/Tooltip.tsx
-var import_clsx53 = require("clsx");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_clsx54 = require("clsx");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var Tooltip = ({
   tooltip,
   children,
@@ -15687,17 +15783,17 @@ var Tooltip = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "div",
     {
-      className: (0, import_clsx53.clsx)("relative inline-block", containerClassName),
+      className: (0, import_clsx54.clsx)("relative inline-block", containerClassName),
       ...handlers,
       children: [
         children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
           "div",
           {
-            className: (0, import_clsx53.clsx)(
+            className: (0, import_clsx54.clsx)(
               `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],
@@ -15706,10 +15802,10 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx53.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx54.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15722,26 +15818,26 @@ var Tooltip = ({
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-var import_react42 = require("react");
-var import_react43 = require("react");
-var import_clsx54 = __toESM(require("clsx"));
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react43.forwardRef)(function InsideLabelInput2({
+var import_react44 = require("react");
+var import_react45 = require("react");
+var import_clsx55 = __toESM(require("clsx"));
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react45.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = (0, import_react43.useState)(false);
-  const generatedId = (0, import_react42.useId)();
+  const [isFocused, setIsFocused] = (0, import_react45.useState)(false);
+  const generatedId = (0, import_react44.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: (0, import_clsx54.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_clsx55.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx54.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx55.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -15754,13 +15850,13 @@ var InsideLabelInput = (0, import_react43.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx54.default)(
+        className: (0, import_clsx55.default)(
           // 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",
@@ -15776,7 +15872,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -15787,26 +15883,26 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_clsx55 = __toESM(require("clsx"));
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react44.forwardRef)(function ToggleableInput2({
+var import_clsx56 = __toESM(require("clsx"));
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react46.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = (0, import_react44.useState)(initialState !== "display");
-  const innerRef = (0, import_react44.useRef)(null);
-  (0, import_react44.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react44.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react46.useState)(initialState !== "display");
+  const innerRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react46.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: (0, import_clsx56.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       Input,
       {
         ...props,
@@ -15825,16 +15921,16 @@ var ToggleableInput = (0, import_react44.forwardRef)(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: (0, import_clsx55.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
+        className: (0, import_clsx56.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
           "underline": isEditing,
           "text-transparent": !isEditing
         }),
         defaultStyle: false
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: (0, import_clsx56.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx56.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -15844,7 +15940,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     ToggleableInput,
     {
       value,
@@ -15855,33 +15951,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-var import_react45 = require("react");
-var import_react46 = require("react");
 var import_react47 = require("react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var FocusTrap = (0, import_react47.forwardRef)(function FocusTrap2({
+var import_react48 = require("react");
+var import_react49 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var FocusTrap = (0, import_react49.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = (0, import_react45.useRef)(null);
-  (0, import_react46.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react47.useRef)(null);
+  (0, import_react48.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react48.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react48.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react50.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react50.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -15906,7 +16002,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react49 = require("react");
+var import_react51 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15944,7 +16040,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15953,10 +16049,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react50.default.useState(false);
-  (0, import_react50.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react52.default.useState(false);
+  (0, import_react52.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15976,13 +16072,13 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react51 = require("react");
+var import_react53 = require("react");
 var useRerender = () => {
-  return (0, import_react51.useReducer)(() => ({}), {})[1];
+  return (0, import_react53.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react52 = require("react");
+var import_react54 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -16021,34 +16117,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react52.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react52.useState)(list);
-  const searchTags = (0, import_react52.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react52.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react54.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react54.useState)(list);
+  const searchTags = (0, import_react54.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react54.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react52.useMemo)(() => {
+  const filteredResult = (0, import_react54.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react52.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react54.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react52.useMemo)(() => {
+  const usedResult = (0, import_react54.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -16362,6 +16458,8 @@ var noop = () => void 0;
   SolidButton,
   StepperBar,
   StepperBarUncontrolled,
+  Tab,
+  TabView,
   Table,
   TableCell,
   TableFilterButton,
@@ -16437,6 +16535,7 @@ var noop = () => void 0;
   useRerender,
   useResizeCallbackWrapper,
   useSearch,
+  useTabContext,
   useTheme,
   useTranslatedValidators,
   validateEmail,