@helpwave/hightide 0.1.11 → 0.1.13

package/dist/index.mjs

@@ -3222,14 +3222,35 @@ var equalSizeGroups = (array, groupSize) => {
   }
   return groups;
 };
-var range = (start, end, allowEmptyRange = false) => {
-  if (end < start) {
+var defaultRangeOptions = {
+  allowEmptyRange: false,
+  stepSize: 1,
+  exclusiveStart: false,
+  exclusiveEnd: true
+};
+var range = (endOrRange, options) => {
+  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
+  let start = 0;
+  let end;
+  if (typeof endOrRange === "number") {
+    end = endOrRange;
+  } else {
+    start = endOrRange[0];
+    end = endOrRange[1];
+  }
+  if (!exclusiveEnd) {
+    end -= 1;
+  }
+  if (exclusiveStart) {
+    start += 1;
+  }
+  if (end - 1 < start) {
     if (!allowEmptyRange) {
-      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
+      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
     }
     return [];
   }
-  return Array.from({ length: end - start + 1 }, (_, index) => index + start);
+  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
 };
 var closestMatch = (list, firstCloser) => {
   return list.reduce((item1, item2) => {
@@ -3440,12 +3461,16 @@ var ButtonColorUtil = {
   text: ["primary", "negative", "neutral"],
   outline: ["primary"]
 };
+var IconButtonUtil = {
+  icon: [...ButtonColorUtil.solid, "transparent"]
+};
 var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
   large: "btn-lg"
 };
 var iconPaddingMapping = {
+  tiny: "icon-btn-xs",
   small: "icon-btn-sm",
   medium: "icon-btn-md",
   large: "icon-btn-lg"
@@ -3609,7 +3634,7 @@ var TextButton = ({
       className: clsx4(
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [clsx4(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+          [clsx4(colorClasses, "hover:bg-button-text-hover-background")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
@@ -3657,7 +3682,8 @@ var IconButton = ({
     positive: "bg-button-solid-positive-background text-button-solid-positive-text",
     warning: "bg-button-solid-warning-background text-button-solid-warning-text",
     negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text",
+    transparent: "bg-transparent"
   }[color];
   return /* @__PURE__ */ jsx5(
     "button",
@@ -3666,7 +3692,9 @@ var IconButton = ({
       disabled: disabled || onClick === void 0,
       className: clsx4(
         {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
+          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
+          "text-disabled-text cursor-not-allowed opacity-70": disabled && color === "transparent",
+          "hover:bg-button-text-hover-background": !disabled && color === "transparent",
           [clsx4(colorClasses, "hover:brightness-90")]: !disabled
         },
         ButtonUtil.iconPaddingMapping[size],
@@ -3688,7 +3716,7 @@ import { forwardRef, useEffect as useEffect3, useState as useState3 } from "reac
 import { ChevronDown, ChevronUp } from "lucide-react";
 import clsx5 from "clsx";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx6(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx6(ChevronDown, { size: 16, className: "min-w-[16px]" });
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx6(ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ jsx6(ChevronDown, { className: "min-w-4 w-4" });
 var Expandable = forwardRef(function Expandable2({
   children,
   label,
@@ -3784,7 +3812,7 @@ var YearMonthPicker = ({
     console.error(`startYear: (${start}) less than endYear: (${end})`);
     return null;
   }
-  const years = range(start.getFullYear(), end.getFullYear());
+  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
   return /* @__PURE__ */ jsx7("div", { className: clsx6("col select-none", className), children: /* @__PURE__ */ jsx7(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx7("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ jsx7(
@@ -4183,8 +4211,8 @@ var TimePicker = ({
   const minuteRef = useRef2(null);
   const hourRef = useRef2(null);
   const isPM = time.getHours() >= 11;
-  const hours = is24HourFormat ? range(0, 23) : range(1, 12);
-  let minutes = range(0, 59);
+  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
+  let minutes = range(60);
   useEffect7(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
@@ -4431,6 +4459,7 @@ import { X } from "lucide-react";
 var formTranslation = {
   en: {
     all: "All",
+    apply: "Apply",
     back: "Back",
     cancel: "Cancel",
     change: "Change",
@@ -4479,6 +4508,7 @@ var formTranslation = {
   },
   de: {
     all: "Alle",
+    apply: "Anwenden",
     back: "Zur\xFCck",
     cancel: "Abbrechen",
     change: "\xC4ndern",
@@ -5300,7 +5330,7 @@ var Carousel = ({
   overScrollThreshold = 0.1,
   blurColor = "from-background",
   className = "",
-  heightClassName = "h-[24rem]",
+  heightClassName = "h-96",
   widthClassName = "w-[70%] desktop:w-1/2"
 }) => {
   if (isAutoLooping && !isLooping) {
@@ -5583,10 +5613,10 @@ var Carousel = ({
       "div",
       {
         className: "row items-center justify-center w-full my-2",
-        children: range(0, length - 1).map((index) => /* @__PURE__ */ jsx20(
+        children: range(length).map((index) => /* @__PURE__ */ jsx20(
           "button",
           {
-            className: clsx17("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] first:rounded-l-md last:rounded-r-md", {
+            className: clsx17("w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md", {
               "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
               "bg-carousel-dot-active hover:brightness-90": currentIndex === index
             }),
@@ -5944,85 +5974,52 @@ var FAQSection = ({
 
 // src/components/layout-and-navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-import clsx21 from "clsx";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-var Pagination = ({
-  overwriteTranslation,
-  page,
-  numberOfPages,
-  onPageChanged
-}) => {
-  const translation = useTranslation([formTranslation], overwriteTranslation);
-  const changePage = (page2) => {
-    onPageChanged(page2);
-  };
-  const noPages = numberOfPages === 0;
-  const onFirstPage = page === 0 && !noPages;
-  const onLastPage = page === numberOfPages - 1;
-  return /* @__PURE__ */ jsxs16("div", { className: clsx21("row", { "opacity-30": noPages }), children: [
-    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ jsx25(ChevronFirst, { className: clsx21({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ jsx25(ChevronLeft2, { className: clsx21({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ jsxs16("div", { className: "min-w-[80px] justify-center mx-2", children: [
-      /* @__PURE__ */ jsx25("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
-      /* @__PURE__ */ jsx25("span", { className: "select-none mx-2", children: translation("of") }),
-      /* @__PURE__ */ jsx25("span", { className: "select-none text-left flex-1", children: numberOfPages })
-    ] }),
-    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx25(ChevronRight2, { className: clsx21({ "opacity-30": onLastPage }) }) }),
-    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx25(ChevronLast, { className: clsx21({ "opacity-30": onLastPage }) }) })
-  ] });
-};
-
-// src/components/layout-and-navigation/SearchableList.tsx
-import { Search } from "lucide-react";
-import clsx24 from "clsx";
+import clsx23 from "clsx";
 
 // src/components/user-action/Input.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
-import clsx23 from "clsx";
+import { forwardRef as forwardRef2, useEffect as useEffect14, useImperativeHandle, useRef as useRef5, useState as useState13 } from "react";
+import clsx22 from "clsx";
 
-// src/hooks/useSaveDelay.ts
+// src/hooks/useDelay.ts
 import { useEffect as useEffect12, useState as useState12 } from "react";
-function useSaveDelay(setNotificationStatus, delay) {
-  const [updateTimer, setUpdateTimer] = useState12(void 0);
-  const [notificationTimer, setNotificationTimer] = useState12(void 0);
-  const restartTimer = (onSave) => {
-    clearTimeout(updateTimer);
-    setUpdateTimer(setTimeout(() => {
-      onSave();
-      setNotificationStatus(true);
-      clearTimeout(notificationTimer);
-      setNotificationTimer(setTimeout(() => {
-        setNotificationStatus(false);
-        clearTimeout(notificationTimer);
-      }, delay));
-      clearTimeout(updateTimer);
-    }, delay));
+var defaultOptions = {
+  delay: 3e3,
+  disabled: false
+};
+function useDelay(options) {
+  const [timer, setTimer] = useState12(void 0);
+  const { delay, disabled } = {
+    ...defaultOptions,
+    ...options
   };
-  const clearUpdateTimer = (hasSaved = true) => {
-    clearTimeout(updateTimer);
-    if (hasSaved) {
-      setNotificationStatus(true);
-      clearTimeout(notificationTimer);
-      setNotificationTimer(setTimeout(() => {
-        setNotificationStatus(false);
-        clearTimeout(notificationTimer);
-      }, delay));
-    } else {
-      setNotificationStatus(false);
+  const restartTimer = (onDelayFinish) => {
+    if (disabled) {
+      return;
     }
+    clearTimeout(timer);
+    setTimer(setTimeout(() => {
+      onDelayFinish();
+    }, delay));
+  };
+  const clearTimer = () => {
+    clearTimeout(timer);
   };
   useEffect12(() => {
     return () => {
-      clearTimeout(updateTimer);
-      clearTimeout(notificationTimer);
+      clearTimeout(timer);
     };
-  }, []);
-  return { restartTimer, clearUpdateTimer };
+  }, [timer]);
+  useEffect12(() => {
+    if (disabled) {
+      clearTimeout(timer);
+    }
+  }, [disabled, timer]);
+  return { restartTimer, clearTimer };
 }
 
 // src/components/user-action/Label.tsx
-import clsx22 from "clsx";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import clsx21 from "clsx";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var styleMapping = {
   labelSmall: "textstyle-label-sm",
   labelMedium: "textstyle-label-md",
@@ -6035,12 +6032,107 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx26("label", { ...props, className: clsx22(styleMapping[labelType], className), children: children ? children : name });
+  return /* @__PURE__ */ jsx25("label", { ...props, className: clsx21(styleMapping[labelType], className), children: children ? children : name });
+};
+
+// src/hooks/useFocusManagement.ts
+import { useCallback as useCallback4 } from "react";
+function useFocusManagement() {
+  const getFocusableElements = useCallback4(() => {
+    return Array.from(
+      document.querySelectorAll(
+        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(
+      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
+    );
+  }, []);
+  const getNextFocusElement = useCallback4(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
+    }
+    let nextElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      nextElement = elements[(currentIndex + 1) % elements.length];
+    }
+    return nextElement;
+  }, [getFocusableElements]);
+  const focusNext = useCallback4(() => {
+    const nextElement = getNextFocusElement();
+    nextElement?.focus();
+  }, [getNextFocusElement]);
+  const getPreviousFocusElement = useCallback4(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
+    }
+    let previousElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      if (currentIndex === 0) {
+        previousElement = elements[elements.length - 1];
+      } else {
+        previousElement = elements[currentIndex - 1];
+      }
+    }
+    return previousElement;
+  }, [getFocusableElements]);
+  const focusPrevious = useCallback4(() => {
+    const previousElement = getPreviousFocusElement();
+    if (previousElement) previousElement.focus();
+  }, [getPreviousFocusElement]);
+  return {
+    getFocusableElements,
+    getNextFocusElement,
+    getPreviousFocusElement,
+    focusNext,
+    focusPrevious
+  };
+}
+
+// src/hooks/useFocusOnceVisible.ts
+import React2, { useEffect as useEffect13 } from "react";
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = React2.useState(false);
+  useEffect13(() => {
+    if (disable || hasUsedFocus) {
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !hasUsedFocus) {
+        ref.current?.focus();
+        setHasUsedFocus(hasUsedFocus);
+      }
+    }, {
+      threshold: 0.1
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [disable, hasUsedFocus, ref]);
 };
 
 // src/components/user-action/Input.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var Input = ({
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+var getInputClassName = ({ disabled = false, hasError = false }) => {
+  return clsx22(
+    "px-2 py-1.5 rounded-md border-2",
+    {
+      "bg-surface text-on-surface hover:border-primary focus:border-primary": !disabled && !hasError,
+      "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover": !disabled && hasError,
+      "bg-disabled-background text-disabled-text border-disabled-border": disabled
+    }
+  );
+};
+var defaultEditCompleteOptions = {
+  onBlur: true,
+  afterDelay: true,
+  delay: 2500
+};
+var Input = forwardRef2(function Input2({
   id,
   type = "text",
   value,
@@ -6049,70 +6141,88 @@ var Input = ({
   onChangeText = noop,
   onEditCompleted,
   className = "",
+  allowEnterComplete = true,
   expanded = true,
-  autoFocus,
+  autoFocus = false,
   onBlur,
+  editCompleteOptions,
   containerClassName,
+  disabled,
   ...restProps
-}) => {
+}, forwardedRef) {
+  const { onBlur: allowEditCompleteOnBlur, afterDelay, delay } = { ...defaultEditCompleteOptions, ...editCompleteOptions };
   const {
     restartTimer,
-    clearUpdateTimer
-  } = useSaveDelay(() => void 0, 3e3);
-  const ref = useRef5(null);
-  useEffect13(() => {
-    if (autoFocus) {
-      ref.current?.focus();
+    clearTimer
+  } = useDelay({ delay, disabled: !afterDelay });
+  const innerRef = useRef5(null);
+  const { focusNext } = useFocusManagement();
+  useFocusOnceVisible(innerRef, !autoFocus);
+  useImperativeHandle(forwardedRef, () => innerRef.current);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      innerRef.current?.blur();
+      focusNext();
     }
-  }, [autoFocus]);
-  return /* @__PURE__ */ jsxs17("div", { className: clsx23({ "w-full": expanded }, containerClassName), children: [
-    label && /* @__PURE__ */ jsx27(Label, { ...label, htmlFor: id, className: clsx23("mb-1", label.className) }),
-    /* @__PURE__ */ jsx27(
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: clsx22({ "w-full": expanded }, containerClassName), children: [
+    label && /* @__PURE__ */ jsx26(Label, { ...label, htmlFor: id, className: clsx22("mb-1", label.className) }),
+    /* @__PURE__ */ jsx26(
       "input",
       {
-        ref,
+        ...restProps,
+        ref: innerRef,
         value,
         id,
         type,
-        className,
+        disabled,
+        className: clsx22(getInputClassName({ disabled }), className),
+        onKeyDown: allowEnterComplete ? handleKeyDown : void 0,
         onBlur: (event) => {
-          if (onBlur) {
-            onBlur(event);
-          }
-          if (onEditCompleted) {
+          onBlur?.(event);
+          if (onEditCompleted && allowEditCompleteOnBlur) {
             onEditCompleted(event.target.value);
-            clearUpdateTimer();
+            clearTimer();
           }
         },
         onChange: (e) => {
           const value2 = e.target.value;
           if (onEditCompleted) {
             restartTimer(() => {
-              onEditCompleted(value2);
-              clearUpdateTimer();
+              if (innerRef.current) {
+                innerRef.current.blur();
+                if (!allowEditCompleteOnBlur) {
+                  onEditCompleted(value2);
+                }
+              } else {
+                onEditCompleted(value2);
+              }
             });
           }
           onChange(e);
           onChangeText(value2);
-        },
-        ...restProps
+        }
       }
     )
   ] });
-};
+});
 var InputUncontrolled = ({
-  defaultValue = "",
+  value = "",
   onChangeText = noop,
   ...props
 }) => {
-  const [value, setValue] = useState13(defaultValue);
-  return /* @__PURE__ */ jsx27(
+  const [usedValue, setUsedValue] = useState13(value);
+  useEffect14(() => {
+    setUsedValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx26(
     Input,
     {
       ...props,
-      value,
+      value: usedValue,
       onChangeText: (text) => {
-        setValue(text);
+        setUsedValue(text);
         onChangeText(text);
       }
     }
@@ -6127,35 +6237,107 @@ var FormInput = forwardRef2(function FormInput2({
   errorClassName,
   containerClassName,
   required,
+  disabled,
   ...restProps
 }, ref) {
-  const input = /* @__PURE__ */ jsx27(
+  const input = /* @__PURE__ */ jsx26(
     "input",
     {
+      ...restProps,
       ref,
       id,
-      ...restProps,
-      className: clsx23(
-        {
-          "focus:border-primary focus:ring-primary": !errorText,
-          "focus:border-negative focus:ring-negative text-negative": !!errorText
-        },
+      disabled,
+      className: clsx22(
+        getInputClassName({ disabled, hasError: !!errorText }),
         className
       )
     }
   );
-  return /* @__PURE__ */ jsxs17("div", { className: clsx23("flex flex-col gap-y-1", containerClassName), children: [
-    labelText && /* @__PURE__ */ jsxs17("label", { htmlFor: id, className: clsx23("textstyle-label-md", labelClassName), children: [
+  return /* @__PURE__ */ jsxs16("div", { className: clsx22("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ jsxs16("label", { htmlFor: id, className: clsx22("textstyle-label-md", labelClassName), children: [
       labelText,
-      required && /* @__PURE__ */ jsx27("span", { className: "text-primary font-bold", children: "*" })
+      required && /* @__PURE__ */ jsx26("span", { className: "text-primary font-bold", children: "*" })
     ] }),
     input,
-    errorText && /* @__PURE__ */ jsx27("label", { htmlFor: id, className: clsx23("text-negative", errorClassName), children: errorText })
+    errorText && /* @__PURE__ */ jsx26("label", { htmlFor: id, className: clsx22("text-negative", errorClassName), children: errorText })
   ] });
 });
 
+// src/components/layout-and-navigation/Pagination.tsx
+import { useEffect as useEffect15, useState as useState14 } from "react";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var Pagination = ({
+  overwriteTranslation,
+  pageIndex,
+  pageCount,
+  onPageChanged,
+  className,
+  style
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  const [value, setValue] = useState14((pageIndex + 1).toString());
+  const noPages = pageCount === 0;
+  const onFirstPage = pageIndex === 0 && !noPages;
+  const onLastPage = pageIndex === pageCount - 1;
+  useEffect15(() => {
+    if (noPages) {
+      setValue("0");
+    } else {
+      setValue((pageIndex + 1).toString());
+    }
+  }, [pageIndex, noPages]);
+  const changePage = (page) => {
+    onPageChanged(page);
+  };
+  return /* @__PURE__ */ jsxs17("div", { className: clsx23("row gap-x-1", className), style, children: [
+    /* @__PURE__ */ jsx27(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx27(ChevronFirst, {}) }),
+    /* @__PURE__ */ jsx27(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx27(ChevronLeft2, {}) }),
+    /* @__PURE__ */ jsxs17("div", { className: "row min-w-56 gap-x-2 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ jsx27(
+        Input,
+        {
+          value,
+          containerClassName: "flex flex-1 h-10",
+          className: clsx23(
+            "w-full text-center font-bold input-indicator-hidden"
+          ),
+          type: "number",
+          min: 1,
+          max: pageCount,
+          disabled: noPages,
+          onChangeText: (value2) => {
+            if (value2) {
+              setValue(clamp(Number(value2), 1, pageCount).toString());
+            } else {
+              setValue(value2);
+            }
+          },
+          onEditCompleted: (value2) => {
+            changePage(clamp(Number(value2) - 1, 0, pageCount - 1));
+          },
+          editCompleteOptions: { delay: 800 }
+        }
+      ),
+      /* @__PURE__ */ jsx27("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ jsx27(
+        "span",
+        {
+          className: "row flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
+          children: pageCount
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx27(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx27(ChevronRight2, {}) }),
+    /* @__PURE__ */ jsx27(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx27(ChevronLast, {}) })
+  ] });
+};
+
+// src/components/layout-and-navigation/SearchableList.tsx
+import { Search } from "lucide-react";
+import clsx24 from "clsx";
+
 // src/hooks/useSearch.ts
-import { useEffect as useEffect14, useMemo as useMemo2, useState as useState14 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo2, useState as useState15 } from "react";
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -6186,9 +6368,9 @@ var useSearch = ({
   initialSearch,
   searchMapping
 }) => {
-  const [items, setItems] = useState14(list);
-  const [search, setSearch] = useState14(initialSearch);
-  useEffect14(() => {
+  const [items, setItems] = useState15(list);
+  const [search, setSearch] = useState15(initialSearch);
+  useEffect16(() => {
     setItems(list);
   }, [list]);
   const result = useMemo2(
@@ -6249,7 +6431,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 import { Check as Check2, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx25 from "clsx";
-import { useEffect as useEffect15, useState as useState15 } from "react";
+import { useEffect as useEffect17, useState as useState16 } from "react";
 import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
@@ -6267,7 +6449,7 @@ var StepperBar = ({
   className = ""
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const dots = range(0, numberOfSteps);
+  const dots = range(numberOfSteps + 1);
   const { currentStep, seenSteps } = state ?? defaultState;
   const update = (newStep) => {
     seenSteps.add(newStep);
@@ -6343,8 +6525,8 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = useState15(state ?? defaultState);
-  useEffect15(() => {
+  const [usedState, setUsedState] = useState16(state ?? defaultState);
+  useEffect17(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
   return /* @__PURE__ */ jsx29(
@@ -6360,394 +6542,59 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   );
 };
 
-// src/components/layout-and-navigation/Table.tsx
-import { useEffect as useEffect16, useRef as useRef6, useState as useState17 } from "react";
-import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
-
-// src/components/user-action/Checkbox.tsx
-import { useState as useState16 } from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check as Check3, Minus } from "lucide-react";
+// src/components/layout-and-navigation/TextImage.tsx
 import clsx26 from "clsx";
 import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
-var checkboxSizeMapping = {
-  small: "size-4",
-  medium: "size-6",
-  large: "size-8"
-};
-var checkboxIconSizeMapping = {
-  small: "size-3",
-  medium: "size-5",
-  large: "size-7"
-};
-var Checkbox = ({
-  id,
-  label,
-  checked,
-  disabled,
-  onChange,
-  onChangeTristate,
-  size = "medium",
-  className = "",
-  containerClassName
+var TextImage = ({
+  overwriteTranslation,
+  title,
+  description,
+  imageUrl,
+  onShowMoreClicked,
+  color = "primary",
+  badge,
+  contentClassName = "",
+  className = ""
 }) => {
-  const usedSizeClass = checkboxSizeMapping[size];
-  const innerIconSize = checkboxIconSizeMapping[size];
-  const propagateChange = (checked2) => {
-    if (onChangeTristate) {
-      onChangeTristate(checked2);
-    }
-    if (onChange) {
-      onChange(checked2 === "indeterminate" ? false : checked2);
-    }
-  };
-  const changeValue = () => {
-    const newValue = checked === "indeterminate" ? false : !checked;
-    propagateChange(newValue);
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  const chipColorMapping = {
+    primary: "text-text-image-primary-background bg-text-image-primary-text",
+    secondary: "text-text-image-secondary-background bg-text-image-secondary-text",
+    dark: "text-text-image-dark-background bg-text-image-dark-text"
   };
-  return /* @__PURE__ */ jsxs20("div", { className: clsx26("row justify-center items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx30(
-      CheckboxPrimitive.Root,
-      {
-        onCheckedChange: propagateChange,
-        checked,
-        disabled,
-        id,
-        className: clsx26(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
-          "text-disabled-text border-disabled-text bg-disabled-background": disabled,
-          "bg-surface": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
-          "hover:border-primary focus:hover:border-primary": !checked
-        }, className),
-        children: /* @__PURE__ */ jsxs20(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ jsx30(Check3, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ jsx30(Minus, { className: innerIconSize })
-        ] })
-      }
-    ),
-    label && /* @__PURE__ */ jsx30(
-      Label,
-      {
-        ...label,
-        className: clsx26("cursor-pointer", label.className),
-        htmlFor: id,
-        onClick: changeValue
-      }
-    )
-  ] });
-};
-var CheckboxUncontrolled = ({
-  onChange,
-  onChangeTristate,
-  defaultValue = false,
-  ...props
-}) => {
-  const [checked, setChecked] = useState16(defaultValue);
-  const handleChange = (checked2) => {
-    if (onChangeTristate) {
-      onChangeTristate(checked2);
-    }
-    if (onChange) {
-      onChange(checked2 === "indeterminate" ? false : checked2);
-    }
-    setChecked(checked2);
+  const colorMapping = {
+    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
+    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__ */ jsx30(
-    Checkbox,
+    "div",
     {
-      ...props,
-      checked,
-      onChangeTristate: handleChange
+      className: clsx26("rounded-2xl w-full", className),
+      style: {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover"
+      },
+      children: /* @__PURE__ */ jsxs20(
+        "div",
+        {
+          className: clsx26(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          children: [
+            badge && /* @__PURE__ */ jsx30("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx30("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ jsxs20("div", { className: "col gap-y-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx30("span", { className: "textstyle-title-xl", children: title }),
+              /* @__PURE__ */ jsx30("span", { className: "text-ellipsis overflow-hidden", children: description })
+            ] }),
+            onShowMoreClicked && /* @__PURE__ */ jsx30("div", { className: "row mt-2 underline", children: /* @__PURE__ */ jsx30("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+          ]
+        }
+      )
     }
   );
 };
 
-// src/components/layout-and-navigation/Table.tsx
-import clsx27 from "clsx";
-import { ChevronDown as ChevronDown4, ChevronsUpDown, ChevronUp as ChevronUp3 } from "lucide-react";
+// src/components/layout-and-navigation/VerticalDivider.tsx
 import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
-var defaultTableStatePagination = {
-  currentPage: 0,
-  entriesPerPage: 5
-};
-var defaultTableStateSelection = {
-  currentSelection: [],
-  hasSelectedAll: false,
-  hasSelectedSome: false,
-  hasSelectedNone: true
-};
-var isDataObjectSelected = (tableState, dataObject, identifierMapping) => {
-  if (!tableState.selection) {
-    return false;
-  }
-  return !!tableState.selection.currentSelection.find((value) => value.localeCompare(identifierMapping(dataObject)) === 0);
-};
-var pageForItem = (data, item, entriesPerPage, identifierMapping) => {
-  const index = data.findIndex((value) => identifierMapping(value) === identifierMapping(item));
-  if (index !== -1) {
-    return Math.floor(index / entriesPerPage);
-  }
-  console.warn("item doesn't exist on data", item, data);
-  return 0;
-};
-var updatePagination = (pagination, dataLength) => ({
-  ...pagination,
-  currentPage: Math.min(Math.max(Math.ceil(dataLength / pagination.entriesPerPage) - 1, 0), pagination.currentPage)
-});
-var addElementToTable = (tableState, data, dataObject, identifierMapping) => {
-  return {
-    ...tableState,
-    pagination: tableState.pagination ? {
-      ...tableState.pagination,
-      currentPage: pageForItem(data, dataObject, tableState.pagination.entriesPerPage, identifierMapping)
-    } : void 0,
-    selection: tableState.selection ? {
-      ...tableState.selection,
-      hasSelectedAll: false,
-      hasSelectedSome: tableState.selection.hasSelectedAll || tableState.selection.hasSelectedSome
-    } : void 0
-  };
-};
-var removeFromTableSelection = (tableState, deletedObjects, dataLength, identifierMapping) => {
-  if (!tableState.selection) {
-    return tableState;
-  }
-  const deletedObjectIds = deletedObjects.map(identifierMapping);
-  const elementsBefore = tableState.selection.currentSelection.length;
-  const currentSelection = tableState.selection.currentSelection.filter((value) => !deletedObjectIds.includes(value));
-  dataLength -= elementsBefore - currentSelection.length;
-  return {
-    ...tableState,
-    selection: {
-      currentSelection,
-      hasSelectedAll: currentSelection.length === dataLength && dataLength !== 0,
-      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,
-      hasSelectedNone: currentSelection.length === 0
-    },
-    pagination: tableState.pagination ? updatePagination(tableState.pagination, dataLength) : void 0
-  };
-};
-var changeTableSelectionSingle = (tableState, dataObject, dataLength, identifierMapping) => {
-  if (!tableState.selection) {
-    return tableState;
-  }
-  const hasSelectedObject = isDataObjectSelected(tableState, dataObject, identifierMapping);
-  let currentSelection = [...tableState.selection.currentSelection, identifierMapping(dataObject)];
-  if (hasSelectedObject) {
-    currentSelection = tableState.selection.currentSelection.filter((value) => value.localeCompare(identifierMapping(dataObject)) !== 0);
-  }
-  return {
-    ...tableState,
-    selection: {
-      currentSelection,
-      hasSelectedAll: currentSelection.length === dataLength,
-      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,
-      hasSelectedNone: currentSelection.length === 0
-    }
-  };
-};
-var changeTableSelectionAll = (tableState, data, identifierMapping) => {
-  if (!tableState.selection) {
-    return tableState;
-  }
-  if (data.length === 0) {
-    return {
-      ...tableState,
-      selection: {
-        currentSelection: [],
-        hasSelectedAll: false,
-        hasSelectedSome: false,
-        hasSelectedNone: true
-      }
-    };
-  }
-  const hasSelectedAll = !(tableState.selection.hasSelectedSome || tableState.selection.hasSelectedAll);
-  return {
-    ...tableState,
-    selection: {
-      currentSelection: hasSelectedAll ? data.map(identifierMapping) : [],
-      hasSelectedAll,
-      hasSelectedSome: false,
-      hasSelectedNone: !hasSelectedAll
-    }
-  };
-};
-var Table = ({
-  data,
-  stateManagement = [{}, noop],
-  identifierMapping,
-  header,
-  rowMappingToCells,
-  sorting,
-  focusElement,
-  className
-}) => {
-  const sortedData = [...data];
-  if (sorting) {
-    const [sortingFunction, sortingType] = sorting;
-    sortedData.sort((a, b) => sortingFunction(a, b) * (sortingType === "ascending" ? 1 : -1));
-  }
-  let currentPage = 0;
-  let pageCount = 1;
-  let entriesPerPage = 5;
-  const [tableState, updateTableState] = stateManagement;
-  let shownElements = sortedData;
-  if (tableState?.pagination) {
-    if (tableState.pagination.entriesPerPage < 1) {
-      console.error("tableState.pagination.entriesPerPage must be >= 1", tableState.pagination.entriesPerPage);
-    }
-    entriesPerPage = Math.max(1, tableState.pagination.entriesPerPage);
-    pageCount = Math.ceil(sortedData.length / entriesPerPage);
-    if (tableState.pagination.currentPage < 0 || tableState.pagination.currentPage >= pageCount && pageCount !== 0) {
-      console.error(
-        "tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0) must be fullfilled",
-        [`pageCount: ${pageCount}`, `tableState.pagination.currentPage: ${tableState.pagination.currentPage}`]
-      );
-    } else {
-      currentPage = tableState.pagination.currentPage;
-    }
-    if (focusElement) {
-      currentPage = pageForItem(sortedData, focusElement, entriesPerPage, identifierMapping);
-    }
-    shownElements = sortedData.slice(currentPage * entriesPerPage, Math.min(sortedData.length, (currentPage + 1) * entriesPerPage));
-  } else {
-    currentPage = 0;
-  }
-  const headerRow = "border-b-2";
-  const headerPaddingHead = "pb-2";
-  const headerPaddingBody = "pt-2";
-  const cellPadding = "py-1 px-2";
-  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState17(0);
-  const tableRef = useRef6(null);
-  const calculateHeight = () => {
-    if (tableRef.current) {
-      const tableHeight = tableRef.current.offsetHeight;
-      const offset = 25;
-      setScrollbarsAutoHeightMin(tableHeight + offset);
-    }
-  };
-  useEffect16(() => {
-    calculateHeight();
-    const handleResize = () => {
-      calculateHeight();
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [data, currentPage]);
-  return /* @__PURE__ */ jsxs21("div", { className: clsx27("col gap-y-4 overflow-hidden", className), children: [
-    /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsx31(Scrollbars3, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ jsxs21("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
-      /* @__PURE__ */ jsx31("thead", { children: /* @__PURE__ */ jsxs21("tr", { className: headerRow, children: [
-        header && tableState.selection && /* @__PURE__ */ jsx31("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx31(
-          Checkbox,
-          {
-            checked: tableState.selection.hasSelectedSome ? "indeterminate" : tableState.selection.hasSelectedAll,
-            onChange: () => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))
-          }
-        ) }),
-        header && header.map((value, index) => /* @__PURE__ */ jsx31("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx31("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
-      ] }) }),
-      /* @__PURE__ */ jsx31("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ jsxs21("tr", { children: [
-        tableState.selection && /* @__PURE__ */ jsx31("td", { className: clsx27(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ jsx31(
-          Checkbox,
-          {
-            checked: isDataObjectSelected(tableState, value, identifierMapping),
-            onChange: () => {
-              updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping));
-            }
-          }
-        ) }),
-        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ jsx31(
-          "td",
-          {
-            className: clsx27(cellPadding, { [headerPaddingBody]: rowIndex === 0 }),
-            children: value1
-          },
-          index
-        ))
-      ] }, identifierMapping(value))) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx31("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ jsx31(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
-      ...tableState,
-      pagination: { entriesPerPage, currentPage: page }
-    }) }) })
-  ] });
-};
-var SortButton = ({
-  children,
-  ascending,
-  color,
-  onClick,
-  ...buttonProps
-}) => {
-  return /* @__PURE__ */ jsx31(
-    TextButton,
-    {
-      color,
-      onClick: () => onClick(ascending === "descending" ? "ascending" : "descending"),
-      ...buttonProps,
-      children: /* @__PURE__ */ jsxs21("div", { className: "row gap-x-2", children: [
-        children,
-        ascending === "ascending" ? /* @__PURE__ */ jsx31(ChevronUp3, {}) : !ascending ? /* @__PURE__ */ jsx31(ChevronsUpDown, {}) : /* @__PURE__ */ jsx31(ChevronDown4, {})
-      ] })
-    }
-  );
-};
-
-// src/components/layout-and-navigation/TextImage.tsx
-import clsx28 from "clsx";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
-var TextImage = ({
-  overwriteTranslation,
-  title,
-  description,
-  imageUrl,
-  onShowMoreClicked,
-  color = "primary",
-  badge,
-  contentClassName = "",
-  className = ""
-}) => {
-  const translation = useTranslation([formTranslation], overwriteTranslation);
-  const chipColorMapping = {
-    primary: "text-text-image-primary-background bg-text-image-primary-text",
-    secondary: "text-text-image-secondary-background bg-text-image-secondary-text",
-    dark: "text-text-image-dark-background bg-text-image-dark-text"
-  };
-  const colorMapping = {
-    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
-    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__ */ jsx32(
-    "div",
-    {
-      className: clsx28("rounded-2xl w-full", className),
-      style: {
-        backgroundImage: `url(${imageUrl})`,
-        backgroundSize: "cover"
-      },
-      children: /* @__PURE__ */ jsxs22(
-        "div",
-        {
-          className: clsx28(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
-          children: [
-            badge && /* @__PURE__ */ jsx32("div", { className: clsx28(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx32("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ jsxs22("div", { className: "col gap-y-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsx32("span", { className: "textstyle-title-xl", children: title }),
-              /* @__PURE__ */ jsx32("span", { className: "text-ellipsis overflow-hidden", children: description })
-            ] }),
-            onShowMoreClicked && /* @__PURE__ */ jsx32("div", { className: "row mt-2 underline", children: /* @__PURE__ */ jsx32("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/components/layout-and-navigation/VerticalDivider.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -6755,7 +6602,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ jsx33("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx31("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs21(
     "svg",
     {
       width,
@@ -6764,7 +6611,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx31(
           "line",
           {
             opacity: "0.5",
@@ -6778,7 +6625,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx31("defs", { children: /* @__PURE__ */ jsxs21(
           "linearGradient",
           {
             id: "paint_linear",
@@ -6788,9 +6635,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx33("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx33("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx33("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ jsx31("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx31("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx31("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -6801,8 +6648,8 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
-import clsx29 from "clsx";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import clsx27 from "clsx";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var defaultErrorComponentTranslation = {
   en: {
     errorOccurred: "An error occurred"
@@ -6817,32 +6664,32 @@ var ErrorComponent = ({
   classname
 }) => {
   const translation = useTranslation([defaultErrorComponentTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsxs24("div", { className: clsx29("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx34(AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ jsxs22("div", { className: clsx27("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx32(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { useState as useState18 } from "react";
+import { useState as useState17 } from "react";
 
 // src/components/loading-states/LoadingAnimation.tsx
-import clsx30 from "clsx";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import clsx28 from "clsx";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   overwriteTranslation,
   loadingText,
   classname
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsxs25("div", { className: clsx30("col items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx35(Helpwave, { animate: "loading" }),
+  return /* @__PURE__ */ jsxs23("div", { className: clsx28("col items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx33(Helpwave, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -6851,8 +6698,8 @@ var LoadingAndErrorComponent = ({
   loadingProps,
   minimumLoadingDuration
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState18(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState18(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState17(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState17(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -6861,27 +6708,27 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx36(LoadingAnimation, { ...loadingProps });
+    return /* @__PURE__ */ jsx34(LoadingAnimation, { ...loadingProps });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx36(ErrorComponent, { ...errorProps });
+    return /* @__PURE__ */ jsx34(ErrorComponent, { ...errorProps });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingButton.tsx
-import clsx31 from "clsx";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import clsx29 from "clsx";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ jsxs26("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx37("div", { className: clsx31("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx37(Helpwave, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ jsx37(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
+  return /* @__PURE__ */ jsxs24("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ jsx35("div", { className: clsx29("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx35(Helpwave, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ jsx35(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -6898,7 +6745,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs25(
     "svg",
     {
       style: {
@@ -6907,7 +6754,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx36(
           "circle",
           {
             cx: center,
@@ -6918,7 +6765,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx36(
           "circle",
           {
             cx: center,
@@ -6937,8 +6784,8 @@ var ProgressIndicator = ({
 };
 
 // src/components/modals/ConfirmModal.tsx
-import clsx32 from "clsx";
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import clsx30 from "clsx";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var ConfirmModal = ({
   overwriteTranslation,
   children,
@@ -6957,10 +6804,10 @@ var ConfirmModal = ({
     positive: "positive",
     primary: "primary"
   };
-  return /* @__PURE__ */ jsxs28(Modal, { ...restProps, onClose: onCancel, className: clsx32("justify-between", className), children: [
-    /* @__PURE__ */ jsx39("div", { className: "col grow", children }),
-    /* @__PURE__ */ jsxs28("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-      onCancel && /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs26(Modal, { ...restProps, onClose: onCancel, className: clsx30("justify-between", className), children: [
+    /* @__PURE__ */ jsx37("div", { className: "col grow", children }),
+    /* @__PURE__ */ jsxs26("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+      onCancel && /* @__PURE__ */ jsx37(
         SolidButton,
         {
           color: buttonOverwrites?.[0].color ?? "neutral",
@@ -6969,7 +6816,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[0].text ?? translation("cancel")
         }
       ),
-      onDecline && /* @__PURE__ */ jsx39(
+      onDecline && /* @__PURE__ */ jsx37(
         SolidButton,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
@@ -6978,7 +6825,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[1].text ?? translation("decline")
         }
       ),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx37(
         SolidButton,
         {
           autoFocus: true,
@@ -6993,7 +6840,7 @@ var ConfirmModal = ({
 };
 
 // src/components/modals/DiscardChangesModal.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var DiscardChangesModal = ({
   overwriteTranslation,
   children,
@@ -7004,7 +6851,7 @@ var DiscardChangesModal = ({
   ...modalProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx38(
     ConfirmModal,
     {
       headerProps: {
@@ -7023,31 +6870,31 @@ var DiscardChangesModal = ({
 };
 
 // src/components/modals/InputModal.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var InputModal = ({
   inputs,
   buttonOverwrites,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx39(
     ConfirmModal,
     {
       buttonOverwrites,
       ...restProps,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx41(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx39(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
 
 // src/components/user-action/Select.tsx
-import { ChevronDown as ChevronDown5, ChevronUp as ChevronUp4 } from "lucide-react";
-import { useEffect as useEffect18, useRef as useRef7, useState as useState19 } from "react";
-import clsx33 from "clsx";
+import { ChevronDown as ChevronDown4, ChevronUp as ChevronUp3 } from "lucide-react";
+import { useEffect as useEffect19, useRef as useRef6, useState as useState18 } from "react";
+import clsx31 from "clsx";
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect17(() => {
+  useEffect18(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -7065,7 +6912,7 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Select.tsx
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 var Select = ({
   value,
   label,
@@ -7077,23 +6924,23 @@ var Select = ({
   className,
   selectedDisplayOverwrite
 }) => {
-  const triggerRef = useRef7(null);
-  const menuRef = useRef7(null);
-  const [isOpen, setIsOpen] = useState19(false);
+  const triggerRef = useRef6(null);
+  const menuRef = useRef6(null);
+  const [isOpen, setIsOpen] = useState18(false);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const selectedOption = options.find((option) => option.value === value);
   if (value !== void 0 && selectedOption === void 0 && selectedDisplayOverwrite === void 0) {
     console.warn("The selected value is not found in the options list. This might be an error on your part or default behavior if it is complex data type on which === does not work. In case of the latter use selectedDisplayOverwrite to set your selected text or component");
   }
   const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label;
-  return /* @__PURE__ */ jsxs29("div", { className: clsx33(className), children: [
-    label && /* @__PURE__ */ jsx42(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx33("mb-1", label.className) }),
-    /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs27("div", { className: clsx31(className), children: [
+    label && /* @__PURE__ */ jsx40(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx31("mb-1", label.className) }),
+    /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs27(
         "button",
         {
           ref: triggerRef,
-          className: clsx33(
+          className: clsx31(
             "btn-md justify-between w-full border-2",
             {
               "rounded-b-lg": !open,
@@ -7104,24 +6951,24 @@ var Select = ({
           onClick: () => setIsOpen(!isOpen),
           disabled: isDisabled,
           children: [
-            !isShowingHint && /* @__PURE__ */ jsx42("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
-            isShowingHint && /* @__PURE__ */ jsx42("span", { className: "textstyle-description", children: hintText }),
-            isOpen ? /* @__PURE__ */ jsx42(ChevronUp4, {}) : /* @__PURE__ */ jsx42(ChevronDown5, {})
+            !isShowingHint && /* @__PURE__ */ jsx40("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
+            isShowingHint && /* @__PURE__ */ jsx40("span", { className: "textstyle-description", children: hintText }),
+            isOpen ? /* @__PURE__ */ jsx40(ChevronUp3, {}) : /* @__PURE__ */ jsx40(ChevronDown4, {})
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx42(
+      isOpen && /* @__PURE__ */ jsx40(
         "div",
         {
           ref: menuRef,
           className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
-          children: /* @__PURE__ */ jsx42(
+          children: /* @__PURE__ */ jsx40(
             SearchableList,
             {
               list: options,
               minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
               searchMapping: (item) => item.searchTags,
-              itemMapper: (option, index) => /* @__PURE__ */ jsx42(
+              itemMapper: (option, index) => /* @__PURE__ */ jsx40(
                 Tile,
                 {
                   isSelected: selectedOption?.value === option.value,
@@ -7150,13 +6997,13 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = useState19(value);
-  useEffect18(() => {
+  const [selected, setSelected] = useState18(value);
+  useEffect19(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx40(
     Select,
     {
       value: selected,
@@ -7172,7 +7019,7 @@ var SelectUncontrolled = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var defaultLanguageModalTranslation = {
   en: {
     language: "Language",
@@ -7195,7 +7042,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation([defaultLanguageModalTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx41(
     Modal,
     {
       headerProps: {
@@ -7205,8 +7052,8 @@ var LanguageModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ jsxs30("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsxs28("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx41(
           Select,
           {
             className: "mt-2",
@@ -7215,15 +7062,15 @@ var LanguageModal = ({
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ jsx43("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx43(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx41("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx41(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/theming/useTheme.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect19, useState as useState20 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect20, useState as useState19 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -7252,22 +7099,22 @@ var ThemeContext = createContext2({
   setTheme: noop
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = useState20(initialTheme);
-  useEffect19(() => {
+  const [theme, setTheme] = useState19(initialTheme);
+  useEffect20(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  useEffect19(() => {
+  useEffect20(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ jsx44(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ jsx42(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
 var useTheme = () => useContext2(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var defaultConfirmDialogTranslation = {
   en: {
     chooseTheme: "Choose your preferred theme"
@@ -7284,7 +7131,7 @@ var ThemeModal = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useTranslation([defaultConfirmDialogTranslation, formTranslation, ThemeUtil.translation], overwriteTranslation);
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx43(
     Modal,
     {
       headerProps: {
@@ -7294,8 +7141,8 @@ var ThemeModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ jsxs31("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsxs29("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx43(
           Select,
           {
             className: "mt-2",
@@ -7304,7 +7151,7 @@ var ThemeModal = ({
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ jsx45("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx45(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx43("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx43(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -7313,10 +7160,109 @@ var ThemeModal = ({
 // src/components/properties/CheckboxProperty.tsx
 import { Check as Check4 } from "lucide-react";
 
+// src/components/user-action/Checkbox.tsx
+import { useState as useState20 } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check as Check3, Minus } from "lucide-react";
+import clsx32 from "clsx";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+var checkboxSizeMapping = {
+  small: "size-4",
+  medium: "size-6",
+  large: "size-8"
+};
+var checkboxIconSizeMapping = {
+  small: "size-3",
+  medium: "size-5",
+  large: "size-7"
+};
+var Checkbox = ({
+  id,
+  label,
+  checked,
+  disabled,
+  onChange,
+  onChangeTristate,
+  size = "medium",
+  className = "",
+  containerClassName
+}) => {
+  const usedSizeClass = checkboxSizeMapping[size];
+  const innerIconSize = checkboxIconSizeMapping[size];
+  const propagateChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
+    }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+  };
+  const changeValue = () => {
+    const newValue = checked === "indeterminate" ? false : !checked;
+    propagateChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: clsx32("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ jsx44(
+      CheckboxPrimitive.Root,
+      {
+        onCheckedChange: propagateChange,
+        checked,
+        disabled,
+        id,
+        className: clsx32(usedSizeClass, `items-center border-2 rounded outline-none `, {
+          "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
+          "focus:border-primary": !disabled,
+          "bg-surface": !disabled && !checked,
+          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate",
+          "hover:border-primary focus:hover:border-primary": !disabled && !checked
+        }, className),
+        children: /* @__PURE__ */ jsxs30(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ jsx44(Check3, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ jsx44(Minus, { className: innerIconSize })
+        ] })
+      }
+    ),
+    label && /* @__PURE__ */ jsx44(
+      Label,
+      {
+        ...label,
+        className: clsx32("cursor-pointer", label.className),
+        htmlFor: id,
+        onClick: changeValue
+      }
+    )
+  ] });
+};
+var CheckboxUncontrolled = ({
+  onChange,
+  onChangeTristate,
+  defaultValue = false,
+  ...props
+}) => {
+  const [checked, setChecked] = useState20(defaultValue);
+  const handleChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
+    }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+    setChecked(checked2);
+  };
+  return /* @__PURE__ */ jsx44(
+    Checkbox,
+    {
+      ...props,
+      checked,
+      onChangeTristate: handleChange
+    }
+  );
+};
+
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
-import clsx34 from "clsx";
-import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import clsx33 from "clsx";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 var PropertyBase = ({
   overwriteTranslation,
   name,
@@ -7330,11 +7276,11 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ jsxs32("div", { className: clsx34("row gap-x-0 group", className), children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31("div", { className: clsx33("row gap-x-0 group", className), children: [
+    /* @__PURE__ */ jsxs31(
       "div",
       {
-        className: clsx34("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
+        className: clsx33("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
           "bg-property-title-background property-title-text group-hover:border-primary": !requiredAndNoValue,
           "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
         }, className),
@@ -7344,22 +7290,22 @@ var PropertyBase = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsxs31(
       "div",
       {
-        className: clsx34("row gap-x-0 grow justify-between items-center rounded-r-xl border-2 border-l-0", {
+        className: clsx33("row gap-x-0 grow justify-between items-center rounded-r-xl border-2 border-l-0", {
           "bg-surface group-hover:border-primary": !requiredAndNoValue,
           "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
         }, className),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ jsx46("div", { className: "text-warning pr-4", children: /* @__PURE__ */ jsx46(AlertTriangle, { size: 24 }) }),
-          onRemove && /* @__PURE__ */ jsx46(
+          requiredAndNoValue && /* @__PURE__ */ jsx45("div", { className: "text-warning pr-4", children: /* @__PURE__ */ jsx45(AlertTriangle, { size: 24 }) }),
+          onRemove && /* @__PURE__ */ jsx45(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: clsx34("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              className: clsx33("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
               children: translation("remove")
             }
@@ -7371,7 +7317,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   overwriteTranslation,
   value,
@@ -7380,14 +7326,14 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx46(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ jsx47(Check4, { size: 16 }),
-      input: () => /* @__PURE__ */ jsx47("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ jsx47(
+      icon: /* @__PURE__ */ jsx46(Check4, { size: 16 }),
+      input: () => /* @__PURE__ */ jsx46("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ jsx46(
         Checkbox,
         {
           checked: value ?? true,
@@ -7402,8 +7348,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import clsx35 from "clsx";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import clsx34 from "clsx";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onChange = noop,
@@ -7414,20 +7360,20 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx48(CalendarDays, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx48(
+      icon: /* @__PURE__ */ jsx47(CalendarDays, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx47(
         "div",
         {
-          className: clsx35("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ jsx48(
+          className: clsx34("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ jsx47(
             Input,
             {
-              className: clsx35("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+              className: clsx34("!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,
@@ -7451,13 +7397,13 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import clsx37 from "clsx";
+import clsx36 from "clsx";
 
 // src/components/user-action/MultiSelect.tsx
-import { useEffect as useEffect20, useRef as useRef8, useState as useState21 } from "react";
-import { ChevronDown as ChevronDown6, ChevronUp as ChevronUp5 } from "lucide-react";
-import clsx36 from "clsx";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useRef as useRef7, useState as useState21 } from "react";
+import { ChevronDown as ChevronDown5, ChevronUp as ChevronUp4 } from "lucide-react";
+import clsx35 from "clsx";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 var defaultMultiSelectTranslation = {
   en: {
     selected: `{{amount}} selected`
@@ -7479,28 +7425,28 @@ var MultiSelect = ({
   className = ""
 }) => {
   const translation = useTranslation([formTranslation, defaultMultiSelectTranslation], overwriteTranslation);
-  const triggerRef = useRef8(null);
-  const menuRef = useRef8(null);
+  const triggerRef = useRef7(null);
+  const menuRef = useRef7(null);
   const [isOpen, setIsOpen] = useState21(false);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const selectedItems = options.filter((value) => value.selected);
   const isShowingHint = !selectedDisplayOverwrite && selectedItems.length === 0;
-  return /* @__PURE__ */ jsxs33("div", { className: clsx36(className), children: [
-    label && /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs32("div", { className: clsx35(className), children: [
+    label && /* @__PURE__ */ jsx48(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: clsx36(" mb-1", label.className),
+        className: clsx35(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
-    /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs33(
+    /* @__PURE__ */ jsxs32("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs32(
         "button",
         {
           ref: triggerRef,
-          className: clsx36(
+          className: clsx35(
             "btn-md justify-between w-full border-2 h-auto",
             {
               "rounded-b-lg": !open,
@@ -7511,25 +7457,25 @@ var MultiSelect = ({
           onClick: () => setIsOpen(!isOpen),
           disabled: isDisabled,
           children: [
-            !isShowingHint && /* @__PURE__ */ jsx49("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ jsx49(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
-            isShowingHint && /* @__PURE__ */ jsx49("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
-            isOpen ? /* @__PURE__ */ jsx49(ChevronUp5, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ jsx49(ChevronDown6, { className: "min-w-6" })
+            !isShowingHint && /* @__PURE__ */ jsx48("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ jsx48(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
+            isShowingHint && /* @__PURE__ */ jsx48("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
+            isOpen ? /* @__PURE__ */ jsx48(ChevronUp4, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ jsx48(ChevronDown5, { className: "min-w-6" })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsxs33(
+      isOpen && /* @__PURE__ */ jsxs32(
         "div",
         {
           ref: menuRef,
           className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
           children: [
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx48(
               SearchableList,
               {
                 list: options,
                 minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
                 searchMapping: (item) => item.searchTags,
-                itemMapper: (option, index) => /* @__PURE__ */ jsx49(
+                itemMapper: (option, index) => /* @__PURE__ */ jsx48(
                   Tile,
                   {
                     isSelected: option.selected,
@@ -7548,9 +7494,9 @@ var MultiSelect = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsxs33("div", { className: "row justify-between mt-2", children: [
-              /* @__PURE__ */ jsxs33("div", { className: "row gap-x-2", children: [
-                /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsxs32("div", { className: "row justify-between mt-2", children: [
+              /* @__PURE__ */ jsxs32("div", { className: "row gap-x-2", children: [
+                /* @__PURE__ */ jsx48(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7565,7 +7511,7 @@ var MultiSelect = ({
                     children: translation("all")
                   }
                 ),
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx48(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7580,7 +7526,7 @@ var MultiSelect = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx49(SolidButton, { size: "small", onClick: () => setIsOpen(false), children: "Done" })
+              /* @__PURE__ */ jsx48(SolidButton, { size: "small", onClick: () => setIsOpen(false), children: "Done" })
             ] })
           ]
         }
@@ -7594,10 +7540,10 @@ var MultiSelectUncontrolled = ({
   ...props
 }) => {
   const [usedOptions, setUsedOptions] = useState21(options);
-  useEffect20(() => {
+  useEffect21(() => {
     setUsedOptions(options);
   }, [options]);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(
     MultiSelect,
     {
       ...props,
@@ -7611,7 +7557,7 @@ var MultiSelectUncontrolled = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   overwriteTranslation,
   options,
@@ -7623,7 +7569,7 @@ var MultiSelectProperty = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = options.some((value) => value.selected);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     PropertyBase,
     {
       name,
@@ -7631,16 +7577,16 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ jsx50(List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx50(
+      icon: /* @__PURE__ */ jsx49(List, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx49(
         "div",
         {
-          className: clsx37("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ jsx50(
+          className: clsx36("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ jsx49(
             MultiSelect,
             {
               ...multiSelectProps,
-              className: clsx37("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: clsx36("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               options,
               isDisabled: readOnly,
               useChipDisplay: true,
@@ -7655,8 +7601,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import clsx38 from "clsx";
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import clsx37 from "clsx";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -7677,23 +7623,23 @@ var NumberProperty = ({
 }) => {
   const translation = useTranslation([defaultNumberPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx50(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx51(Binary, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsxs34(
+      icon: /* @__PURE__ */ jsx50(Binary, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsxs33(
         "div",
         {
-          className: clsx38("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          className: clsx37("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx50(
               Input,
               {
                 expanded: false,
-                className: clsx38("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: clsx37("!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,
@@ -7716,7 +7662,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx51("span", { className: clsx38("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ jsx50("span", { className: clsx37("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -7726,8 +7672,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import clsx39 from "clsx";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import clsx38 from "clsx";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   overwriteTranslation,
   value,
@@ -7740,7 +7686,7 @@ var SingleSelectProperty = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     PropertyBase,
     {
       name,
@@ -7748,19 +7694,19 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ jsx52(List2, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx52(
+      icon: /* @__PURE__ */ jsx51(List2, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx51(
         "div",
         {
-          className: clsx39("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ jsx52(
+          className: clsx38("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ jsx51(
             Select,
             {
               ...selectProps,
               value,
               options,
               isDisabled: readOnly,
-              className: clsx39("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: clsx38("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               hintText: `${translation("select")}...`
             }
           )
@@ -7772,12 +7718,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import clsx41 from "clsx";
+import clsx40 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { useEffect as useEffect21, useState as useState22 } from "react";
-import clsx40 from "clsx";
-import { jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useEffect as useEffect22, useState as useState22 } from "react";
+import clsx39 from "clsx";
+import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
 var Textarea = ({
   label,
   headline,
@@ -7788,37 +7734,38 @@ var Textarea = ({
   disclaimer,
   onBlur = noop,
   onEditCompleted = noop,
+  saveDelayOptions,
   defaultStyle = true,
   className,
   ...props
 }) => {
   const [hasFocus, setHasFocus] = useState22(false);
-  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
+  const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
-    clearUpdateTimer();
+    clearTimer();
   };
-  return /* @__PURE__ */ jsxs35("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs34("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx52(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: clsx40("mb-1", label.className),
+        className: clsx39("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
-    /* @__PURE__ */ jsxs35(
+    /* @__PURE__ */ jsxs34(
       "div",
       {
-        className: `${clsx40(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: `${clsx39(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
         children: [
-          headline && /* @__PURE__ */ jsx53("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
-          /* @__PURE__ */ jsx53(
+          headline && /* @__PURE__ */ jsx52("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
+          /* @__PURE__ */ jsx52(
             "textarea",
             {
               id,
-              className: clsx40("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", {
+              className: clsx39("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", {
                 "resize-none": !resizable,
                 "h-32": defaultStyle,
                 "mt-3": !headline
@@ -7845,7 +7792,7 @@ var Textarea = ({
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ jsx53("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ jsx52("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -7854,10 +7801,10 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [text, setText] = useState22(value);
-  useEffect21(() => {
+  useEffect22(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx52(
     Textarea,
     {
       ...props,
@@ -7871,7 +7818,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var defaultTextPropertyTranslation = {
   en: {
     text: "Text"
@@ -7891,21 +7838,21 @@ var TextProperty = ({
 }) => {
   const translation = useTranslation([defaultTextPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx53(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx54(Text, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx54(
+      icon: /* @__PURE__ */ jsx53(Text, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx53(
         "div",
         {
-          className: clsx41("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ jsx54(
+          className: clsx40("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ jsx53(
             Textarea,
             {
-              className: clsx41("ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+              className: clsx40("ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
               rows: 5,
               defaultStyle: false,
               value: value ?? "",
@@ -7933,74 +7880,48 @@ var TextProperty = ({
   );
 };
 
-// src/components/user-action/DateAndTimePicker.tsx
-import clsx42 from "clsx";
-import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
-var DateTimePicker = ({
-  overwriteTranslation,
-  value = /* @__PURE__ */ new Date(),
-  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  mode = "dateTime",
-  onFinish = noop,
-  onChange = noop,
-  onRemove = noop,
-  timePickerProps,
-  datePickerProps
+// src/components/table/FillerRowElement.tsx
+import { clsx as clsx41 } from "clsx";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var FillerRowElement = ({
+  className
 }) => {
-  const translation = useTranslation([formTranslation, timeTranslation], overwriteTranslation);
-  const useDate = mode === "dateTime" || mode === "date";
-  const useTime = mode === "dateTime" || mode === "time";
-  let dateDisplay;
-  let timeDisplay;
-  if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx55(
-      DatePicker,
-      {
-        ...datePickerProps,
-        className: "min-w-[320px] min-h-[250px]",
-        yearMonthPickerProps: { maxHeight: 218 },
-        value,
-        start,
-        end,
-        onChange
-      }
-    );
-  }
-  if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx55(
-      TimePicker,
-      {
-        ...timePickerProps,
-        className: clsx42("h-full", { "justify-between w-full": mode === "time" }),
-        maxHeight: 250,
-        time: value,
-        onChange
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs36("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ jsxs36("div", { className: "row gap-x-4", children: [
-      dateDisplay,
-      timeDisplay
-    ] }),
-    /* @__PURE__ */ jsx55("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs36("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ jsx55(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx55(
-        SolidButton,
-        {
-          size: "medium",
-          onClick: () => onFinish(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsx54("div", { className: clsx41("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
 };
 
+// src/components/table/Filter.ts
+var dateRange = (row, columnId, filterValue) => {
+  const [min, max] = filterValue;
+  const value = row.getValue(columnId);
+  const date = value instanceof Date ? value : new Date(value);
+  if (isNaN(date.getTime())) return false;
+  if (min && date < min) return false;
+  if (max && date > max) return false;
+  return true;
+};
+var TableFilters = {
+  dateRange
+};
+
+// src/components/table/Table.tsx
+import { useCallback as useCallback5, useEffect as useEffect25, useMemo as useMemo3, useRef as useRef9, useState as useState24 } from "react";
+import clsx45 from "clsx";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
+
+// src/components/table/TableFilterButton.tsx
+import { FilterIcon } from "lucide-react";
+
 // src/components/user-action/Menu.tsx
-import { useRef as useRef9 } from "react";
-import clsx43 from "clsx";
+import { useRef as useRef8 } from "react";
+import clsx42 from "clsx";
 
 // src/util/PropsWithFunctionChildren.ts
 var resolve = (children, bag) => {
@@ -8014,17 +7935,17 @@ var BagFunctionUtil = {
 };
 
 // src/components/user-action/Menu.tsx
-import { jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx56(
+}) => /* @__PURE__ */ jsx55(
   "div",
   {
-    className: clsx43("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
+    className: clsx42("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled-text cursor-not-allowed": isDisabled,
@@ -8043,23 +7964,23 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
-  const triggerRef = useRef9(null);
-  const menuRef = useRef9(null);
+  const triggerRef = useRef8(null);
+  const menuRef = useRef8(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: "relative",
       ...handlers,
       children: [
         trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx55(
           "div",
           {
             ref: menuRef,
             onClick: (e) => e.stopPropagation(),
-            className: clsx43(
+            className: clsx42(
               "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
               {
                 "top-0": alignment[0] === "t",
@@ -8078,10 +7999,644 @@ var Menu = ({
   );
 };
 
+// src/components/table/TableFilterButton.tsx
+import { useEffect as useEffect23, useState as useState23 } from "react";
+import { Fragment as Fragment3, jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
+var defaultTableFilterTranslation = {
+  en: {
+    filter: "Filter",
+    min: "Min",
+    max: "Max",
+    startDate: "Start",
+    endDate: "End",
+    text: "Text..."
+  },
+  de: {
+    filter: "Filter",
+    min: "Min",
+    max: "Max",
+    startDate: "Start",
+    endDate: "Ende",
+    text: "Text..."
+  }
+};
+var TableFilterButton = ({
+  filterType,
+  column
+}) => {
+  const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
+  const columnFilterValue = column.getFilterValue();
+  const [filterValue, setFilterValue] = useState23(columnFilterValue);
+  const hasFilter = !!filterValue;
+  useEffect23(() => {
+    setFilterValue(columnFilterValue);
+  }, [columnFilterValue]);
+  return /* @__PURE__ */ jsx56(
+    Menu,
+    {
+      trigger: (onClick, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx56(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ jsx56(FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ jsx56(
+          "div",
+          {
+            className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
+            "aria-hidden": true
+          }
+        )
+      ] }),
+      children: ({ close }) => /* @__PURE__ */ jsxs36("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx56("h4", { className: "textstyle-title-sm", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx56(
+          Input,
+          {
+            value: filterValue ?? "",
+            autoFocus: true,
+            placeholder: translation("text"),
+            onChangeText: setFilterValue,
+            className: "h-10"
+          }
+        ),
+        filterType === "range" && /* @__PURE__ */ jsxs36("div", { className: "row gap-x-2 items-center", children: [
+          /* @__PURE__ */ jsx56(
+            Input,
+            {
+              value: filterValue?.[0] ?? "",
+              type: "number",
+              placeholder: translation("min"),
+              onChangeText: (text) => {
+                const num = Number(text);
+                setFilterValue((old) => [num, old?.[1]]);
+              },
+              className: "h-10 input-indicator-hidden w-40"
+            }
+          ),
+          /* @__PURE__ */ jsx56("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx56(
+            Input,
+            {
+              value: filterValue?.[1] ?? "",
+              type: "number",
+              placeholder: translation("max"),
+              onChangeText: (text) => {
+                const num = Number(text);
+                setFilterValue((old) => [old?.[0], num]);
+              },
+              className: "h-10 input-indicator-hidden w-40"
+            }
+          )
+        ] }),
+        filterType === "dateRange" && /* @__PURE__ */ jsxs36(Fragment3, { children: [
+          /* @__PURE__ */ jsx56(
+            Input,
+            {
+              value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
+              type: "datetime-local",
+              placeholder: translation("startDate"),
+              onChangeText: (text) => {
+                const value = new Date(text);
+                setFilterValue((old) => [value, old?.[1]]);
+              },
+              className: "h-10 w-50"
+            }
+          ),
+          /* @__PURE__ */ jsx56(
+            Input,
+            {
+              value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
+              type: "datetime-local",
+              placeholder: translation("endDate"),
+              onChangeText: (text) => {
+                const value = new Date(text);
+                setFilterValue((old) => [old?.[0], value]);
+              },
+              className: "h-10 w-50"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs36("div", { className: "row justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx56(SolidButton, { color: "negative", size: "small", onClick: () => {
+            column.setFilterValue(void 0);
+            close();
+          }, children: translation("remove") }),
+          /* @__PURE__ */ jsx56(SolidButton, { size: "small", onClick: () => {
+            column.setFilterValue(filterValue);
+            close();
+          }, children: translation("apply") })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/components/table/TableSortButton.tsx
+import { ChevronDown as ChevronDown6, ChevronsUpDown, ChevronUp as ChevronUp5 } from "lucide-react";
+import clsx43 from "clsx";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var TableSortButton = ({
+  sortDirection,
+  invert = false,
+  color = "neutral",
+  className,
+  ...buttonProps
+}) => {
+  let icon = /* @__PURE__ */ jsx57(ChevronsUpDown, { className: "w-full h-full" });
+  if (sortDirection) {
+    let usedSortDirection = sortDirection;
+    if (invert) {
+      usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
+    }
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx57(ChevronUp5, { className: "w-full h-full" }) : /* @__PURE__ */ jsx57(ChevronDown6, { className: "w-full h-full" });
+  }
+  return /* @__PURE__ */ jsx57(
+    IconButton,
+    {
+      size: "tiny",
+      color,
+      className: clsx43(className),
+      ...buttonProps,
+      children: icon
+    }
+  );
+};
+
+// src/hooks/useResizeCallbackWrapper.ts
+import { useEffect as useEffect24 } from "react";
+var useResizeCallbackWrapper = (callback) => {
+  useEffect24(() => {
+    window.addEventListener("resize", callback);
+    return () => {
+      window.removeEventListener("resize", callback);
+    };
+  }, [callback]);
+};
+
+// src/components/table/TableCell.tsx
+import { clsx as clsx44 } from "clsx";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var TableCell = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx58("span", { className: clsx44("block max-w-full overflow-ellipsis truncate", className), children });
+};
+
+// src/components/table/Table.tsx
+import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
+var Table = ({
+  data,
+  fillerRow,
+  initialState,
+  onRowClick = noop,
+  className,
+  tableClassName,
+  defaultColumn,
+  state,
+  columns,
+  ...tableOptions
+}) => {
+  const ref = useRef9(null);
+  const tableRef = useRef9(null);
+  const [columnSizing, setColumnSizing] = useState24(columns.reduce((previousValue, currentValue) => {
+    return {
+      ...previousValue,
+      [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
+    };
+  }, {}));
+  const [columnSizingInfo, setColumnSizingInfo] = useState24();
+  const [pagination, setPagination] = useState24({
+    pageSize: 10,
+    pageIndex: 0,
+    ...initialState?.pagination
+  });
+  const [columnFilters, setColumnFilters] = useState24(initialState?.columnFilters);
+  const computedColumnMinWidths = useMemo3(() => {
+    return columns.reduce((previousValue, column) => {
+      return {
+        ...previousValue,
+        // every column is at least 12px wide
+        [column.id]: column.minSize ?? defaultColumn?.minSize ?? 12
+      };
+    }, {});
+  }, [columns, defaultColumn]);
+  const computedColumnMaxWidths = useMemo3(() => {
+    return columns.reduce((previousValue, column) => {
+      return {
+        ...previousValue,
+        [column.id]: column.maxSize ?? defaultColumn?.maxSize
+      };
+    }, {});
+  }, [columns, defaultColumn]);
+  const tableMinWidth = useMemo3(() => {
+    return columns.reduce((sum, column) => {
+      return sum + computedColumnMinWidths[column.id];
+    }, 0);
+  }, [columns, computedColumnMinWidths]);
+  const updateColumnSizes = useMemo3(() => {
+    return (previous) => {
+      const updateSizing = {
+        ...columnSizing,
+        ...previous
+      };
+      const containerWidth = ref.current.offsetWidth;
+      columns.forEach((column) => {
+        updateSizing[column.id] = clamp(updateSizing[column.id], computedColumnMinWidths[column.id], computedColumnMaxWidths[column.id] ?? containerWidth);
+      });
+      const width = columns.reduce((previousValue, currentValue) => previousValue + updateSizing[currentValue.id], 0);
+      if (width > containerWidth) {
+        if (tableMinWidth >= containerWidth) {
+          return columns.reduce((previousValue, currentValue) => ({
+            ...previousValue,
+            [currentValue.id]: computedColumnMinWidths[currentValue.id]
+          }), {});
+        }
+        let reduceableColumns = columns.map((value) => value.id).filter((id) => updateSizing[id] - computedColumnMinWidths[id] > 0);
+        let spaceToReduce = width - containerWidth;
+        while (spaceToReduce > 0 && reduceableColumns.length > 0) {
+          let maxReduceAmount = reduceableColumns.reduce((previousValue, id) => Math.max(previousValue, updateSizing[id] - computedColumnMinWidths[id]), 0);
+          if (maxReduceAmount * reduceableColumns.length > spaceToReduce) {
+            maxReduceAmount = spaceToReduce / reduceableColumns.length;
+          }
+          reduceableColumns.forEach((id) => {
+            updateSizing[id] -= maxReduceAmount;
+          });
+          spaceToReduce -= maxReduceAmount * reduceableColumns.length;
+          reduceableColumns = reduceableColumns.filter((id) => updateSizing[id] - computedColumnMinWidths[id] > 0);
+        }
+      } else if (width <= containerWidth) {
+        let distributableWidth = containerWidth - width;
+        const violatingColumns = columns.filter((value) => computedColumnMaxWidths[value.id] && updateSizing[value.id] > computedColumnMaxWidths[value.id]);
+        const violationColumnsAmount = violatingColumns.reduce(
+          (previousValue, column) => previousValue + updateSizing[column.id] - computedColumnMaxWidths[column.id],
+          0
+        );
+        distributableWidth += violationColumnsAmount;
+        let enlargeableColumns = columns.filter((col) => !computedColumnMaxWidths[col.id] || updateSizing[col.id] < computedColumnMaxWidths[col.id]).map((value) => value.id);
+        while (distributableWidth > 0 && enlargeableColumns.length > 0) {
+          let minEnlargeableAmount = enlargeableColumns.reduce((previousValue, id) => Math.min(previousValue, computedColumnMaxWidths[id] ? computedColumnMaxWidths[id] - updateSizing[id] : distributableWidth), distributableWidth);
+          if (minEnlargeableAmount * enlargeableColumns.length > distributableWidth) {
+            minEnlargeableAmount = distributableWidth / enlargeableColumns.length;
+          }
+          enlargeableColumns.forEach((id) => {
+            updateSizing[id] += minEnlargeableAmount;
+          });
+          distributableWidth -= minEnlargeableAmount * enlargeableColumns.length;
+          enlargeableColumns = enlargeableColumns.filter((id) => !computedColumnMaxWidths[id] || updateSizing[id] < computedColumnMaxWidths[id]);
+        }
+        if (distributableWidth > 0) {
+          updateSizing[columns[columns.length - 1].id] += distributableWidth;
+        }
+      }
+      return updateSizing;
+    };
+  }, [columns, computedColumnMaxWidths, computedColumnMinWidths, tableMinWidth]);
+  const table = useReactTable({
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState,
+    defaultColumn: {
+      minSize: 60,
+      maxSize: 700,
+      cell: ({ cell }) => {
+        return /* @__PURE__ */ jsx59(TableCell, { children: cell.getValue() });
+      },
+      ...defaultColumn
+    },
+    columns,
+    state: {
+      columnSizing,
+      columnSizingInfo,
+      pagination,
+      columnFilters,
+      ...state
+    },
+    filterFns: {
+      ...tableOptions?.filterFns,
+      dateRange: TableFilters.dateRange
+    },
+    onColumnSizingInfoChange: (updaterOrValue) => {
+      setColumnSizingInfo(updaterOrValue);
+      if (tableOptions.onColumnSizingInfoChange) {
+        tableOptions?.onColumnSizingInfoChange(updaterOrValue);
+      }
+    },
+    onColumnSizingChange: (updaterOrValue) => {
+      setColumnSizing((previous) => {
+        const newSizing = typeof updaterOrValue === "function" ? updaterOrValue(previous) : updaterOrValue;
+        return updateColumnSizes(newSizing);
+      });
+      if (tableOptions.onColumnSizingChange) {
+        tableOptions.onColumnSizingChange(updaterOrValue);
+      }
+    },
+    onPaginationChange: (updaterOrValue) => {
+      setPagination(updaterOrValue);
+      if (tableOptions.onPaginationChange) {
+        tableOptions.onPaginationChange(updaterOrValue);
+      }
+    },
+    onColumnFiltersChange: (updaterOrValue) => {
+      setColumnFilters(updaterOrValue);
+      table.toggleAllRowsSelected(false);
+      if (tableOptions.onColumnFiltersChange) {
+        tableOptions.onColumnFiltersChange(updaterOrValue);
+      }
+    },
+    autoResetPageIndex: false,
+    columnResizeMode: "onChange",
+    ...tableOptions
+  });
+  const [hasInitializedSizing, setHasInitializedSizing] = useState24(false);
+  useEffect25(() => {
+    if (!hasInitializedSizing && ref.current) {
+      setHasInitializedSizing(true);
+      table.setColumnSizing(updateColumnSizes(columnSizing));
+    }
+  }, [columnSizing, hasInitializedSizing]);
+  useResizeCallbackWrapper(useCallback5(() => {
+    table.setColumnSizing(updateColumnSizes);
+  }, [updateColumnSizes]));
+  const pageCount = table.getPageCount();
+  useEffect25(() => {
+    const totalPages = pageCount;
+    if (totalPages === 0) {
+      if (pagination.pageIndex !== 0) {
+        table.setPagination((prevState) => ({
+          ...prevState,
+          pageIndex: 0
+        }));
+      }
+    } else if (pagination.pageIndex >= totalPages) {
+      table.setPagination((prev) => ({
+        ...prev,
+        pageIndex: totalPages - 1
+      }));
+    }
+  }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
+  const columnSizeVars = useMemo3(() => {
+    const headers = table.getFlatHeaders();
+    const colSizes = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx45("col gap-y-4", className), children: [
+    /* @__PURE__ */ jsx59(Scrollbars3, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ jsxs37(
+      "table",
+      {
+        ref: tableRef,
+        className: clsx45(tableClassName),
+        style: {
+          ...columnSizeVars,
+          width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
+        },
+        children: [
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx59(
+            "col",
+            {
+              style: {
+                width: `calc(var(--header-${header?.id}-size) * 1px)`,
+                minWidth: header.column.columnDef.minSize,
+                maxWidth: header.column.columnDef.maxSize
+              }
+            },
+            header.id
+          )) }, headerGroup.id)),
+          /* @__PURE__ */ jsx59("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsxs37(
+              "th",
+              {
+                colSpan: header.colSpan,
+                className: clsx45("relative group", header.column.columnDef.meta?.className),
+                children: [
+                  /* @__PURE__ */ jsx59("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "row gap-x-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ jsx59(
+                      TableSortButton,
+                      {
+                        sortDirection: header.column.getIsSorted(),
+                        onClick: () => header.column.toggleSorting()
+                      }
+                    ),
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx59(
+                      TableFilterButton,
+                      {
+                        column: header.column,
+                        filterType: header.column.columnDef.meta.filterType
+                      }
+                    ) : null,
+                    flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  ] }) }),
+                  header.column.getCanResize() && /* @__PURE__ */ jsx59(
+                    "div",
+                    {
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler(),
+                      onDoubleClick: () => {
+                        header.column.resetSize();
+                      },
+                      className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
+                      style: {
+                        opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                      }
+                    }
+                  )
+                ]
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsxs37("tbody", { children: [
+            table.getRowModel().rows.map((row) => {
+              return /* @__PURE__ */ jsx59("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                return /* @__PURE__ */ jsx59("td", { children: flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                ) }, cell.id);
+              }) }, row.id);
+            }),
+            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+              return /* @__PURE__ */ jsx59("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx59("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx59(FillerRowElement, {}) }, column.id);
+              }) }, "filler-row-" + index);
+            })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx59("div", { className: "row justify-center", children: /* @__PURE__ */ jsx59(
+      Pagination,
+      {
+        pageIndex: table.getState().pagination.pageIndex,
+        pageCount: table.getPageCount(),
+        onPageChanged: (page) => table.setPageIndex(page)
+      }
+    ) })
+  ] });
+};
+var TableUncontrolled = ({ data, ...props }) => {
+  const [usedDate, setUsedData] = useState24(data);
+  useEffect25(() => {
+    setUsedData(data);
+  }, [data]);
+  return /* @__PURE__ */ jsx59(
+    Table,
+    {
+      ...props,
+      data: usedDate
+    }
+  );
+};
+var TableWithSelection = ({
+  columns,
+  state,
+  fillerRow,
+  rowSelection,
+  selectionRowId = "selection",
+  onRowClick = noop,
+  meta,
+  ...props
+}) => {
+  const columnsWithSelection = useMemo3(() => {
+    return [
+      {
+        id: selectionRowId,
+        header: ({ table }) => {
+          return /* @__PURE__ */ jsx59(
+            Checkbox,
+            {
+              checked: table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected(),
+              onChangeTristate: (value) => {
+                const newValue = !!value;
+                table.toggleAllRowsSelected(newValue);
+              },
+              containerClassName: "max-w-6"
+            }
+          );
+        },
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx59(
+            Checkbox,
+            {
+              disabled: !row.getCanSelect(),
+              checked: row.getIsSelected(),
+              onChange: row.getToggleSelectedHandler(),
+              containerClassName: "max-w-6"
+            }
+          );
+        },
+        size: 60,
+        minSize: 60,
+        maxSize: 60,
+        enableResizing: false,
+        enableSorting: false
+      },
+      ...columns
+    ];
+  }, [columns, selectionRowId]);
+  return /* @__PURE__ */ jsx59(
+    Table,
+    {
+      columns: columnsWithSelection,
+      fillerRow: (columnId, table) => {
+        if (columnId === selectionRowId) {
+          return /* @__PURE__ */ jsx59(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
+        }
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx59(FillerRowElement, {});
+      },
+      state: {
+        rowSelection,
+        ...state
+      },
+      onRowClick: (row, table) => {
+        row.toggleSelected();
+        onRowClick(row, table);
+      },
+      meta: {
+        bodyRowClassName: "cursor-pointer",
+        ...meta
+      },
+      ...props
+    }
+  );
+};
+
+// src/components/user-action/DateAndTimePicker.tsx
+import clsx46 from "clsx";
+import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
+var DateTimePicker = ({
+  overwriteTranslation,
+  value = /* @__PURE__ */ new Date(),
+  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  mode = "dateTime",
+  onFinish = noop,
+  onChange = noop,
+  onRemove = noop,
+  timePickerProps,
+  datePickerProps
+}) => {
+  const translation = useTranslation([formTranslation, timeTranslation], overwriteTranslation);
+  const useDate = mode === "dateTime" || mode === "date";
+  const useTime = mode === "dateTime" || mode === "time";
+  let dateDisplay;
+  let timeDisplay;
+  if (useDate) {
+    dateDisplay = /* @__PURE__ */ jsx60(
+      DatePicker,
+      {
+        ...datePickerProps,
+        className: "min-w-[320px] min-h-[250px]",
+        yearMonthPickerProps: { maxHeight: 218 },
+        value,
+        start,
+        end,
+        onChange
+      }
+    );
+  }
+  if (useTime) {
+    timeDisplay = /* @__PURE__ */ jsx60(
+      TimePicker,
+      {
+        ...timePickerProps,
+        className: clsx46("h-full", { "justify-between w-full": mode === "time" }),
+        maxHeight: 250,
+        time: value,
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs38("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ jsxs38("div", { className: "row gap-x-4", children: [
+      dateDisplay,
+      timeDisplay
+    ] }),
+    /* @__PURE__ */ jsx60("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs38("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ jsx60(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ jsx60(
+        SolidButton,
+        {
+          size: "medium",
+          onClick: () => onFinish(value),
+          children: translation("change")
+        }
+      )
+    ] }) })
+  ] });
+};
+
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback4, useEffect as useEffect22, useState as useState23 } from "react";
-import clsx44 from "clsx";
-import { jsx as jsx57, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect26, useState as useState25 } from "react";
+import clsx47 from "clsx";
+import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8100,7 +8655,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState23({
+  }, setAnimation] = useState25({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -8109,14 +8664,14 @@ var ScrollPicker = ({
     items: options
   });
   const itemsShownCount = 5;
-  const shownItems = getNeighbours(range(0, items.length - 1), currentIndex).map((index) => ({
+  const shownItems = getNeighbours(range(items.length), currentIndex).map((index) => ({
     name: mapping(items[index]),
     index
   }));
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = useCallback4((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = useCallback6((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -8126,7 +8681,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = useCallback4((timestamp, startTime) => {
+  const animate = useCallback6((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -8199,7 +8754,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect22(() => {
+  useEffect26(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -8220,7 +8775,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       className: "relative overflow-hidden",
@@ -8230,15 +8785,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs38("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx57(
+      children: /* @__PURE__ */ jsxs39("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx61(
           "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__ */ jsx57(
+        /* @__PURE__ */ jsx61(
           "div",
           {
             className: "col select-none",
@@ -8246,10 +8801,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx57(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx61(
               "div",
               {
-                className: clsx44(
+                className: clsx47(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -8276,10 +8831,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-import { useEffect as useEffect23, useRef as useRef10, useState as useState24 } from "react";
+import { useEffect as useEffect27, useRef as useRef10, useState as useState26 } from "react";
 import { Pencil } from "lucide-react";
-import clsx45 from "clsx";
-import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
+import clsx48 from "clsx";
+import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 var ToggleableInput = ({
   type = "text",
   value,
@@ -8291,28 +8846,29 @@ var ToggleableInput = ({
   size = 16,
   disclaimer,
   onBlur,
+  saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = useState24(initialState !== "display");
-  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
+  const [isEditing, setIsEditing] = useState26(initialState !== "display");
+  const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const ref = useRef10(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
-    clearUpdateTimer();
+    clearTimer();
   };
-  useEffect23(() => {
+  useEffect27(() => {
     if (isEditing) {
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs39("div", { children: [
-    /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40("div", { children: [
+    /* @__PURE__ */ jsxs40(
       "div",
       {
-        className: clsx45("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: clsx48("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ jsx58("div", { className: clsx45("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx62("div", { className: clsx48("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx62(
             "input",
             {
               ref,
@@ -8340,16 +8896,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: clsx45(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: clsx48(`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__ */ jsx58("span", { className: clsx45("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ jsx58(
+          ) : /* @__PURE__ */ jsx62("span", { className: clsx48("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ jsx62(
             Pencil,
             {
-              className: clsx45(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: clsx48(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -8357,7 +8913,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ jsx58("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ jsx62("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -8365,11 +8921,11 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = useState24(initialValue);
-  useEffect23(() => {
+  const [value, setValue] = useState26(initialValue);
+  useEffect27(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx62(
     ToggleableInput,
     {
       value,
@@ -8382,6 +8938,12 @@ var ToggleableInputUncontrolled = ({
   );
 };
 
+// src/hooks/useRerender.ts
+import { useReducer } from "react";
+var useRerender = () => {
+  return useReducer(() => ({}), {})[1];
+};
+
 // src/util/builder.ts
 var builder = (value, update) => {
   update(value);
@@ -8420,6 +8982,11 @@ var localizedNewsSchema = z.record(z.enum(LanguageUtil.languages), newsListSchem
 var filterNews = (localizedNews, requiredKeys) => {
   return localizedNews.filter((news) => requiredKeys.every((value) => news.keys.includes(value)));
 };
+
+// src/util/resolveSetState.ts
+function resolveSetState(action, prev) {
+  return typeof action === "function" ? action(prev) : action;
+}
 export {
   ASTNodeInterpreter,
   AnimatedRing,
@@ -8453,10 +9020,12 @@ export {
   Expandable,
   ExpandableUncontrolled,
   FAQSection,
+  FillerRowElement,
   FormInput,
   Helpwave,
   HelpwaveBadge,
   IconButton,
+  IconButtonUtil,
   Input,
   InputModal,
   InputUncontrolled,
@@ -8498,10 +9067,15 @@ export {
   SimpleSearchWithMapping,
   SingleSelectProperty,
   SolidButton,
-  SortButton,
   StepperBar,
   StepperBarUncontrolled,
   Table,
+  TableCell,
+  TableFilterButton,
+  TableFilters,
+  TableSortButton,
+  TableUncontrolled,
+  TableWithSelection,
   TagIcon,
   TextButton,
   TextImage,
@@ -8524,18 +9098,14 @@ export {
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
-  addElementToTable,
   avatarSizeMapping,
   avtarSizeList,
   builder,
   changeDuration,
-  changeTableSelectionSingle,
   clamp,
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
-  defaultTableStatePagination,
-  defaultTableStateSelection,
   equalDate,
   equalSizeGroups,
   filterNews,
@@ -8547,7 +9117,6 @@ export {
   getDaysInMonth,
   getNeighbours,
   getWeeksForCalenderMonth,
-  isDataObjectSelected,
   isInTimeSpan,
   localizedNewsSchema,
   monthTranslation,
@@ -8555,19 +9124,21 @@ export {
   newsListSchema,
   newsSchema,
   noop,
-  pageForItem,
   range,
-  removeFromTableSelection,
+  resolveSetState,
   shadingColorValues,
   subtractDuration,
   timeTranslation,
-  updatePagination,
+  useDelay,
+  useFocusManagement,
+  useFocusOnceVisible,
   useHoverState,
   useLanguage,
   useLocalStorage,
   useLocale,
   useOutsideClick,
-  useSaveDelay,
+  useRerender,
+  useResizeCallbackWrapper,
   useSearch,
   useTheme,
   useTranslation,