@helpwave/hightide 0.1.19 → 0.1.20

package/dist/index.js

@@ -2891,6 +2891,7 @@ __export(index_exports, {
   LoadingAndErrorComponent: () => LoadingAndErrorComponent,
   LoadingAnimation: () => LoadingAnimation,
   LoadingButton: () => LoadingButton,
+  LoadingContainer: () => LoadingContainer,
   LocalStorageService: () => LocalStorageService,
   LoopingArrayCalculator: () => LoopingArrayCalculator,
   MarkdownInterpreter: () => MarkdownInterpreter,
@@ -3905,7 +3906,8 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
   disabled = false,
   className,
   headerClassName,
-  contentClassName
+  contentClassName,
+  contentExpandedClassName
 }, ref) {
   const defaultIcon = (0, import_react4.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
@@ -3941,7 +3943,7 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
             className: (0, import_clsx5.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
-                "max-h-96 opacity-100 pb-2": isExpanded,
+                [(0, import_clsx5.default)("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
                 "max-h-0 opacity-0 overflow-hidden": !isExpanded
               },
               contentClassName
@@ -6912,30 +6914,24 @@ var ErrorComponent = ({
 // src/components/loading-states/LoadingAndErrorComponent.tsx
 var import_react20 = require("react");
 
-// src/components/loading-states/LoadingAnimation.tsx
-var import_clsx28 = __toESM(require("clsx"));
+// src/components/loading-states/LoadingContainer.tsx
+var import_clsx28 = require("clsx");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var LoadingAnimation = ({
-  overwriteTranslation,
-  loadingText,
-  classname
-}) => {
-  const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx28.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Helpwave, { animate: "loading" }),
-    loadingText ?? `${translation("loading")}...`
-  ] });
+var LoadingContainer = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_clsx28.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_runtime34 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
   hasError = false,
-  errorProps,
-  loadingProps,
-  minimumLoadingDuration
+  loadingComponent,
+  errorComponent,
+  minimumLoadingDuration,
+  className
 }) => {
   const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react20.useState)(false);
   const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react20.useState)(false);
@@ -6947,27 +6943,42 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingAnimation, { ...loadingProps });
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)(className) });
   }
   if (hasError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorComponent, { ...errorProps });
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)("bg-negative", className) });
   }
   return children;
 };
 
-// src/components/loading-states/LoadingButton.tsx
-var import_clsx29 = __toESM(require("clsx"));
+// src/components/loading-states/LoadingAnimation.tsx
+var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
+var LoadingAnimation = ({
+  overwriteTranslation,
+  loadingText,
+  classname
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Helpwave, { animate: "loading" }),
+    loadingText ?? `${translation("loading")}...`
+  ] });
+};
+
+// src/components/loading-states/LoadingButton.tsx
+var import_clsx31 = __toESM(require("clsx"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_clsx29.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -6984,7 +6995,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "svg",
     {
       style: {
@@ -6993,7 +7004,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "circle",
           {
             cx: center,
@@ -7004,7 +7015,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "circle",
           {
             cx: center,
@@ -7023,8 +7034,8 @@ var ProgressIndicator = ({
 };
 
 // src/components/modals/ConfirmModal.tsx
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var ConfirmModal = ({
   overwriteTranslation,
   children,
@@ -7043,10 +7054,10 @@ var ConfirmModal = ({
     positive: "positive",
     primary: "primary"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Modal, { ...restProps, onClose: onCancel, className: (0, import_clsx30.default)("justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-col-2 grow", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-row-4 mt-3 justify-end", children: [
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Modal, { ...restProps, onClose: onCancel, className: (0, import_clsx32.default)("justify-between", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex-row-4 mt-3 justify-end", children: [
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         SolidButton,
         {
           color: buttonOverwrites?.[0].color ?? "neutral",
@@ -7055,7 +7066,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[0].text ?? translation("cancel")
         }
       ),
-      onDecline && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      onDecline && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         SolidButton,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
@@ -7064,7 +7075,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[1].text ?? translation("decline")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         SolidButton,
         {
           autoFocus: true,
@@ -7079,7 +7090,7 @@ var ConfirmModal = ({
 };
 
 // src/components/modals/DiscardChangesModal.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var DiscardChangesModal = ({
   overwriteTranslation,
   children,
@@ -7090,7 +7101,7 @@ var DiscardChangesModal = ({
   ...modalProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     ConfirmModal,
     {
       headerProps: {
@@ -7109,18 +7120,18 @@ var DiscardChangesModal = ({
 };
 
 // src/components/modals/InputModal.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var InputModal = ({
   inputs,
   buttonOverwrites,
   ...restProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     ConfirmModal,
     {
       buttonOverwrites,
       ...restProps,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
@@ -7128,11 +7139,11 @@ var InputModal = ({
 // src/components/user-action/Select.tsx
 var import_react23 = require("react");
 var import_react24 = require("react");
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 
 // src/components/user-action/Menu.tsx
 var import_react22 = require("react");
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 
 // src/hooks/useOutsideClick.ts
 var import_react21 = require("react");
@@ -7221,17 +7232,17 @@ var usePopoverPosition = (trigger, options) => {
 
 // src/components/user-action/Menu.tsx
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
   "div",
   {
-    className: (0, import_clsx31.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
+    className: (0, import_clsx33.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled-text cursor-not-allowed": isDisabled,
@@ -7297,14 +7308,14 @@ var Menu = ({
       setIsHidden(false);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
     trigger(bag, triggerRef),
-    (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx31.default)(
+        className: (0, import_clsx33.default)(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
           {
             "animate-pop-in": isOpen,
@@ -7329,8 +7340,8 @@ var Menu = ({
 
 // src/components/user-action/SearchBar.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_clsx32 = require("clsx");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_clsx34 = require("clsx");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var SearchBar = ({
   placeholder,
   onSearch,
@@ -7339,31 +7350,31 @@ var SearchBar = ({
   ...inputProps
 }) => {
   const translation = useTranslation([formTranslation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx32.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx34.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Input,
       {
         ...inputProps,
         placeholder: placeholder ?? translation("search")
       }
     ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react10.Search, { className: "w-full h-full" }) })
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react10.Search, { className: "w-full h-full" }) })
   ] });
 };
 
 // src/components/user-action/Select.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var SelectTile = ({
   className,
   disabledClassName,
   title,
   ...restProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Tile,
     {
       ...restProps,
-      className: (0, import_clsx33.default)("px-2 py-1 rounded-md", className),
+      className: (0, import_clsx35.default)("px-2 py-1 rounded-md", className),
       disabledClassName: disabledClassName ?? "text-disabled-text cursor-not-allowed",
       title: { ...title, className: title.className ?? "font-semibold" }
     }
@@ -7393,17 +7404,17 @@ var Select = ({
     searchMapping: (0, import_react23.useCallback)((item) => item.searchTags, []),
     ...searchOptions
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx33.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx33.default)("mb-1", label.className) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx35.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx35.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Menu,
       {
         ...menuProps,
-        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "button",
           {
             ref,
-            className: (0, import_clsx33.default)(
+            className: (0, import_clsx35.default)(
               "btn-md justify-between w-full border-2",
               {
                 "rounded-b-lg": !open,
@@ -7415,17 +7426,17 @@ var Select = ({
             onClick: toggleOpen,
             disabled,
             children: [
-              !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? selectedOption?.label }),
-              isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx33.default)("textstyle-description", hintTextClassName), children: hintText }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ExpansionIcon, { isExpanded: isOpen })
+              !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? selectedOption?.label }),
+              isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_clsx35.default)("textstyle-description", hintTextClassName), children: hintText }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ExpansionIcon, { isExpanded: isOpen })
             ]
           }
         ),
-        menuClassName: (0, import_clsx33.default)("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
+        menuClassName: (0, import_clsx35.default)("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
         children: (bag) => {
           const { close } = bag;
-          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-            !searchOptions?.disabled && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+            !searchOptions?.disabled && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               SearchBar,
               {
                 value: search,
@@ -7433,8 +7444,8 @@ var Select = ({
                 autoFocus: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
-              result.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
+              result.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 SelectTile,
                 {
                   isSelected: option === selectedOption,
@@ -7468,7 +7479,7 @@ var SelectUncontrolled = ({
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Select,
     {
       value: selected,
@@ -7484,7 +7495,7 @@ var SelectUncontrolled = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var defaultLanguageModalTranslation = {
   en: {
     language: "Language",
@@ -7507,7 +7518,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation([defaultLanguageModalTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Modal,
     {
       headerProps: {
@@ -7517,8 +7528,8 @@ var LanguageModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           Select,
           {
             className: "mt-2",
@@ -7527,7 +7538,7 @@ var LanguageModal = ({
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -7535,7 +7546,7 @@ var LanguageModal = ({
 
 // src/theming/useTheme.tsx
 var import_react25 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -7574,12 +7585,12 @@ var ThemeProvider = ({ children, initialTheme = "light" }) => {
   (0, import_react25.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
 var useTheme = () => (0, import_react25.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var defaultConfirmDialogTranslation = {
   en: {
     chooseTheme: "Choose your preferred theme"
@@ -7596,7 +7607,7 @@ var ThemeModal = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useTranslation([defaultConfirmDialogTranslation, formTranslation, ThemeUtil.translation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Modal,
     {
       headerProps: {
@@ -7606,8 +7617,8 @@ var ThemeModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           Select,
           {
             className: "mt-2",
@@ -7616,7 +7627,7 @@ var ThemeModal = ({
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -7629,8 +7640,8 @@ var import_lucide_react13 = require("lucide-react");
 var import_react26 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_lucide_react11 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
   small: "size-5",
   medium: "size-6",
@@ -7666,27 +7677,27 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx34.default)("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx36.default)("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       CheckboxPrimitive.Root,
       {
         onCheckedChange: propagateChange,
         checked,
         disabled,
         id,
-        className: (0, import_clsx34.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
+        className: (0, import_clsx36.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
           "focus:border-primary group-hover:border-primary ": !disabled,
           "bg-surface": !disabled && !checked,
           "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
         }, className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.Check, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.Minus, { className: innerIconSize })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react11.Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react11.Minus, { className: innerIconSize })
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { ...label, className: (0, import_clsx34.default)(label.className), htmlFor: id })
+    label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Label, { ...label, className: (0, import_clsx36.default)(label.className), htmlFor: id })
   ] });
 };
 var CheckboxUncontrolled = ({
@@ -7705,7 +7716,7 @@ var CheckboxUncontrolled = ({
     }
     setChecked(checked2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     Checkbox,
     {
       ...props,
@@ -7717,8 +7728,8 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_clsx37 = __toESM(require("clsx"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var PropertyBase = ({
   overwriteTranslation,
   name,
@@ -7732,11 +7743,11 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx35.default)("flex-row-0 group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: (0, import_clsx37.default)("flex-row-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
-        className: (0, import_clsx35.default)(
+        className: (0, import_clsx37.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,
@@ -7745,15 +7756,15 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "max-w-6 min-w-6 text-text-default", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-semibold", children: name })
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "max-w-6 min-w-6 text-text-default", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
-        className: (0, import_clsx35.default)(
+        className: (0, import_clsx37.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-surface group-hover:border-primary": !requiredAndNoValue,
@@ -7763,13 +7774,13 @@ var PropertyBase = ({
         ),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.AlertTriangle, { size: 24 }) }),
-          onRemove && hasValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react12.AlertTriangle, { size: 24 }) }),
+          onRemove && hasValue && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx35.default)("items-center", { "!text-transparent": !hasValue || readOnly }),
+              className: (0, import_clsx37.default)("items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
               children: translation("remove")
             }
@@ -7781,7 +7792,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   overwriteTranslation,
   value,
@@ -7790,14 +7801,14 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react13.Check, { size: 24 }),
-      input: () => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react13.Check, { size: 24 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Checkbox,
         {
           checked: value ?? true,
@@ -7813,8 +7824,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onChange = noop,
@@ -7825,16 +7836,16 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.CalendarDays, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Input,
         {
-          className: (0, import_clsx36.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_clsx38.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,
@@ -7856,14 +7867,14 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 
 // src/components/user-action/MultiSelect.tsx
 var import_react27 = require("react");
 var import_react28 = require("react");
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var defaultMultiSelectTranslation = {
   en: {
     selected: `{{amount}} selected`
@@ -7895,25 +7906,25 @@ var MultiSelect = ({
   });
   const selectedItems = options.filter((value) => value.selected);
   const isShowingHint = !selectedDisplayOverwrite && selectedItems.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx37.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: (0, import_clsx39.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: (0, import_clsx37.default)(" mb-1", label.className),
+        className: (0, import_clsx39.default)(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Menu,
       {
         ...menuProps,
-        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "button",
           {
             ref,
-            className: (0, import_clsx37.default)(
+            className: (0, import_clsx39.default)(
               "btn-md justify-between w-full border-2 h-auto",
               {
                 "min-h-14": useChipDisplay,
@@ -7924,18 +7935,18 @@ var MultiSelect = ({
             ),
             onClick: toggleOpen,
             disabled,
-            children: useChipDisplay ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: isShowingHint ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { disabled, size: "small", color: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react15.Plus, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-              !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
-              isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: (0, import_clsx37.default)("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ExpansionIcon, { isExpanded: isOpen })
+            children: useChipDisplay ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: isShowingHint ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { disabled, size: "small", color: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react15.Plus, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+              !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
+              isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx39.default)("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ExpansionIcon, { isExpanded: isOpen })
             ] })
           }
         ),
-        menuClassName: (0, import_clsx37.default)("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
+        menuClassName: (0, import_clsx39.default)("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
         children: (bag) => {
           const { close } = bag;
-          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-            !searchOptions?.disabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+            !searchOptions?.disabled && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               SearchBar,
               {
                 value: search,
@@ -7943,7 +7954,7 @@ var MultiSelect = ({
                 autoFocus: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
               result.map((option, index) => {
                 const update = () => {
                   onChange(options.map((value) => value.value === option.value ? {
@@ -7951,10 +7962,10 @@ var MultiSelect = ({
                     selected: !value.selected
                   } : value));
                 };
-                return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                   SelectTile,
                   {
-                    prefix: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                    prefix: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                       Checkbox,
                       {
                         checked: option.selected,
@@ -7972,9 +7983,9 @@ var MultiSelect = ({
               }),
               additionalItems && additionalItems({ ...bag, search })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-row-2 justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-row-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-row-2 justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-row-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7989,7 +8000,7 @@ var MultiSelect = ({
                     children: translation("all")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                   SolidButton,
                   {
                     color: "neutral",
@@ -8004,7 +8015,7 @@ var MultiSelect = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SolidButton, { size: "small", onClick: close, children: "Done" })
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SolidButton, { size: "small", onClick: close, children: "Done" })
             ] })
           ] });
         }
@@ -8021,7 +8032,7 @@ var MultiSelectUncontrolled = ({
   (0, import_react28.useEffect)(() => {
     setUsedOptions(options);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     MultiSelect,
     {
       ...props,
@@ -8035,7 +8046,7 @@ var MultiSelectUncontrolled = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   overwriteTranslation,
   options,
@@ -8048,7 +8059,7 @@ var MultiSelectProperty = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = options.some((value) => value.selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     PropertyBase,
     {
       name,
@@ -8056,12 +8067,12 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react16.List, { size: 24 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react16.List, { size: 24 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         MultiSelect,
         {
           ...multiSelectProps,
-          className: (0, import_clsx38.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+          className: (0, import_clsx40.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
           options,
           disabled: readOnly,
           useChipDisplay: true,
@@ -8074,10 +8085,10 @@ var MultiSelectProperty = ({
             if (!onAddNew && !search.trim()) {
               return void 0;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               SelectTile,
               {
-                prefix: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react16.Plus, {}),
+                prefix: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react16.Plus, {}),
                 title: { value: `${translation("add")} ${search.trim()}` },
                 onClick: () => {
                   onAddNew(search);
@@ -8087,7 +8098,7 @@ var MultiSelectProperty = ({
               }
             );
           },
-          triggerClassName: (0, import_clsx38.default)(
+          triggerClassName: (0, import_clsx40.default)(
             "!border-none !p-0 !min-h-10",
             {
               "!bg-warning !text-surface-warning": softRequired2 && !hasValue,
@@ -8102,8 +8113,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -8124,23 +8135,23 @@ var NumberProperty = ({
 }) => {
   const translation = useTranslation([defaultNumberPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react17.Binary, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react17.Binary, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         "div",
         {
-          className: (0, import_clsx39.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_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Input,
               {
                 expanded: false,
-                className: (0, import_clsx39.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,
@@ -8163,7 +8174,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: (0, import_clsx39.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: (0, import_clsx41.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -8173,8 +8184,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_clsx42 = __toESM(require("clsx"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   overwriteTranslation,
   value,
@@ -8188,7 +8199,7 @@ var SingleSelectProperty = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     PropertyBase,
     {
       name,
@@ -8196,15 +8207,15 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react18.List, { size: 24 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react18.List, { size: 24 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Select,
         {
           ...selectProps,
           value,
           options,
           disabled: readOnly,
-          className: (0, import_clsx40.default)("w-full"),
+          className: (0, import_clsx42.default)("w-full"),
           hintText: `${translation("select")}...`,
           searchOptions: {
             sortingFunction: (a, b) => a.value.localeCompare(b.value),
@@ -8214,10 +8225,10 @@ var SingleSelectProperty = ({
             if (!onAddNew && !search.trim()) {
               return void 0;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               SelectTile,
               {
-                prefix: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react18.Plus, {}),
+                prefix: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react18.Plus, {}),
                 title: { value: `${translation("add")} ${search.trim()}` },
                 onClick: () => {
                   onAddNew(search);
@@ -8227,7 +8238,7 @@ var SingleSelectProperty = ({
               }
             );
           },
-          triggerClassName: (0, import_clsx40.default)(
+          triggerClassName: (0, import_clsx42.default)(
             "!border-none",
             {
               "!bg-warning !text-surface-warning": softRequired2 && !hasValue,
@@ -8243,12 +8254,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx42 = __toESM(require("clsx"));
+var import_clsx44 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
 var import_react29 = require("react");
-var import_clsx41 = __toESM(require("clsx"));
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx43 = __toESM(require("clsx"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Textarea = ({
   label,
   headline,
@@ -8271,20 +8282,20 @@ var Textarea = ({
     onEditCompleted(text);
     clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: (0, import_clsx41.default)("mb-1", label.className),
+        className: (0, import_clsx43.default)("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
-        className: (0, import_clsx41.default)(
+        className: (0, import_clsx43.default)(
           "bg-surface text-on-surface relative",
           {
             "shadow border-2 rounded-lg": defaultStyle,
@@ -8293,12 +8304,12 @@ var Textarea = ({
           }
         ),
         children: [
-          headline && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          headline && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "textarea",
             {
               id,
-              className: (0, import_clsx41.default)("pt-0 px-3 border-transparent appearance-none w-full leading-tight focus:ring-0 focus:outline-none", {
+              className: (0, import_clsx43.default)("pt-0 px-3 border-transparent appearance-none w-full leading-tight focus:ring-0 focus:outline-none", {
                 "resize-none": !resizable,
                 "h-32": defaultStyle,
                 "mt-3": !headline,
@@ -8327,7 +8338,7 @@ var Textarea = ({
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -8339,7 +8350,7 @@ var TextareaUncontrolled = ({
   (0, import_react29.useEffect)(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     Textarea,
     {
       ...props,
@@ -8353,7 +8364,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var defaultTextPropertyTranslation = {
   en: {
     text: "Text"
@@ -8373,17 +8384,17 @@ var TextProperty = ({
 }) => {
   const translation = useTranslation([defaultTextPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react19.Text, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react19.Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Textarea,
         {
-          className: (0, import_clsx42.default)("ring-0 border-0 outline-0 !px-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+          className: (0, import_clsx44.default)("ring-0 border-0 outline-0 !px-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
           rows: 5,
           defaultStyle: false,
           value: value ?? "",
@@ -8410,12 +8421,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx43 = require("clsx");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_clsx45 = require("clsx");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: (0, import_clsx43.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: (0, import_clsx45.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -8434,14 +8445,14 @@ var TableFilters = {
 
 // src/components/table/Table.tsx
 var import_react32 = require("react");
-var import_clsx46 = __toESM(require("clsx"));
+var import_clsx48 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/table/TableFilterButton.tsx
 var import_lucide_react20 = require("lucide-react");
 var import_react30 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var defaultTableFilterTranslation = {
   en: {
     filter: "Filter",
@@ -8471,12 +8482,12 @@ var TableFilterButton = ({
   (0, import_react30.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -8484,9 +8495,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -8496,8 +8507,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -8510,8 +8521,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -8525,8 +8536,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -8539,7 +8550,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -8553,12 +8564,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SolidButton, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -8570,8 +8581,8 @@ var TableFilterButton = ({
 
 // src/components/table/TableSortButton.tsx
 var import_lucide_react21 = require("lucide-react");
-var import_clsx44 = __toESM(require("clsx"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_clsx46 = __toESM(require("clsx"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -8579,20 +8590,20 @@ var TableSortButton = ({
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react21.ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.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_runtime58.jsx)(import_lucide_react21.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react21.ChevronDown, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.ChevronDown, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     IconButton,
     {
       size: "tiny",
       color,
-      className: (0, import_clsx44.default)(className),
+      className: (0, import_clsx46.default)(className),
       ...buttonProps,
       children: icon
     }
@@ -8611,17 +8622,17 @@ var useResizeCallbackWrapper = (callback) => {
 };
 
 // src/components/table/TableCell.tsx
-var import_clsx45 = require("clsx");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_clsx47 = require("clsx");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: (0, import_clsx47.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/components/table/Table.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -8740,7 +8751,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -8825,24 +8836,24 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx46.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       import_react_custom_scrollbars_23.Scrollbars,
       {
         autoHeight: true,
         autoHeightMax: tableRef.current?.offsetHeight + 2,
         autoHide: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "table",
           {
             ref: tableRef,
-            className: (0, import_clsx46.default)(tableClassName),
+            className: (0, import_clsx48.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_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "col",
                 {
                   style: {
@@ -8853,22 +8864,22 @@ var Table = ({
                 },
                 header.id
               )) }, headerGroup.id)),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
                   "th",
                   {
                     colSpan: header.colSpan,
-                    className: (0, import_clsx46.default)("relative group", header.column.columnDef.meta?.className),
+                    className: (0, import_clsx48.default)("relative group", header.column.columnDef.meta?.className),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                           TableSortButton,
                           {
                             sortDirection: header.column.getIsSorted(),
                             onClick: () => header.column.toggleSorting()
                           }
                         ),
-                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                           TableFilterButton,
                           {
                             column: header.column,
@@ -8880,7 +8891,7 @@ var Table = ({
                           header.getContext()
                         )
                       ] }) }),
-                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                         "div",
                         {
                           onMouseDown: header.getResizeHandler(),
@@ -8899,18 +8910,18 @@ var Table = ({
                   header.id
                 );
               }) }, headerGroup.id)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("tbody", { children: [
                 table.getRowModel().rows.map((row) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: (0, import_react_table.flexRender)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime60.jsx)("tr", { children: columns.map((column) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {}) }, column.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FillerRowElement, {}) }, column.id);
                   }) }, "filler-row-" + index);
                 })
               ] })
@@ -8919,7 +8930,7 @@ var Table = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -8934,7 +8945,7 @@ var TableUncontrolled = ({ data, ...props }) => {
   (0, import_react32.useEffect)(() => {
     setUsedData(data);
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Table,
     {
       ...props,
@@ -8958,7 +8969,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Checkbox,
             {
               checked: table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected(),
@@ -8971,7 +8982,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -8990,15 +9001,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -9012,7 +9023,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx46.default)(
+        bodyRowClassName: (0, import_clsx48.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -9024,7 +9035,7 @@ var TableWithSelection = ({
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_react33 = require("react");
-var import_clsx47 = require("clsx");
+var import_clsx49 = require("clsx");
 
 // src/util/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -9033,7 +9044,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -9064,10 +9075,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_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
-      className: (0, import_clsx47.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -9082,10 +9093,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
           "div",
           {
-            className: (0, import_clsx47.clsx)(
+            className: (0, import_clsx49.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",
@@ -9097,18 +9108,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react22.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx47.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -9121,8 +9132,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx48 = __toESM(require("clsx"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_clsx50 = __toESM(require("clsx"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -9141,7 +9152,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -9155,25 +9166,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx48.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx50.default)("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         SolidButton,
         {
           size: "medium",
@@ -9187,8 +9198,8 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 var import_react34 = require("react");
-var import_clsx49 = __toESM(require("clsx"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_clsx51 = __toESM(require("clsx"));
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -9327,7 +9338,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -9337,15 +9348,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.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/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -9353,10 +9364,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               "div",
               {
-                className: (0, import_clsx49.default)(
+                className: (0, import_clsx51.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -9385,8 +9396,8 @@ var ScrollPicker = ({
 // src/components/user-action/ToggleableInput.tsx
 var import_react35 = require("react");
 var import_lucide_react23 = require("lucide-react");
-var import_clsx50 = __toESM(require("clsx"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_clsx52 = __toESM(require("clsx"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var ToggleableInput = ({
   type = "text",
   value,
@@ -9413,14 +9424,14 @@ var ToggleableInput = ({
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
       "div",
       {
-        className: (0, import_clsx50.default)("flex-row-2 items-center w-full overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: (0, import_clsx52.default)("flex-row-2 items-center w-full overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: (0, import_clsx50.default)("flex-row-2 overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: (0, import_clsx52.default)("flex-row-2 overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             "input",
             {
               ref,
@@ -9448,16 +9459,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: (0, import_clsx50.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: (0, import_clsx52.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: (0, import_clsx50.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: (0, import_clsx52.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             import_lucide_react23.Pencil,
             {
-              className: (0, import_clsx50.default)(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: (0, import_clsx52.default)(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -9465,7 +9476,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -9477,7 +9488,7 @@ var ToggleableInputUncontrolled = ({
   (0, import_react35.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     ToggleableInput,
     {
       value,
@@ -9592,6 +9603,7 @@ function resolveSetState(action, prev) {
   LoadingAndErrorComponent,
   LoadingAnimation,
   LoadingButton,
+  LoadingContainer,
   LocalStorageService,
   LoopingArrayCalculator,
   MarkdownInterpreter,