@helpwave/hightide 0.1.10 → 0.1.12

package/dist/index.js

@@ -2872,10 +2872,12 @@ __export(index_exports, {
   Expandable: () => Expandable,
   ExpandableUncontrolled: () => ExpandableUncontrolled,
   FAQSection: () => FAQSection,
+  FillerRowElement: () => FillerRowElement,
   FormInput: () => FormInput,
   Helpwave: () => Helpwave,
   HelpwaveBadge: () => HelpwaveBadge,
   IconButton: () => IconButton,
+  IconButtonUtil: () => IconButtonUtil,
   Input: () => Input,
   InputModal: () => InputModal,
   InputUncontrolled: () => InputUncontrolled,
@@ -2917,10 +2919,14 @@ __export(index_exports, {
   SimpleSearchWithMapping: () => SimpleSearchWithMapping,
   SingleSelectProperty: () => SingleSelectProperty,
   SolidButton: () => SolidButton,
-  SortButton: () => SortButton,
   StepperBar: () => StepperBar,
   StepperBarUncontrolled: () => StepperBarUncontrolled,
   Table: () => Table,
+  TableFilterButton: () => TableFilterButton,
+  TableFilters: () => TableFilters,
+  TableSortButton: () => TableSortButton,
+  TableUncontrolled: () => TableUncontrolled,
+  TableWithSelection: () => TableWithSelection,
   TagIcon: () => TagIcon,
   TextButton: () => TextButton,
   TextImage: () => TextImage,
@@ -2943,18 +2949,14 @@ __export(index_exports, {
   YearMonthPicker: () => YearMonthPicker,
   YearMonthPickerUncontrolled: () => YearMonthPickerUncontrolled,
   addDuration: () => addDuration,
-  addElementToTable: () => addElementToTable,
   avatarSizeMapping: () => avatarSizeMapping,
   avtarSizeList: () => avtarSizeList,
   builder: () => builder,
   changeDuration: () => changeDuration,
-  changeTableSelectionSingle: () => changeTableSelectionSingle,
   clamp: () => clamp,
   closestMatch: () => closestMatch,
   createLoopingList: () => createLoopingList,
   createLoopingListWithIndex: () => createLoopingListWithIndex,
-  defaultTableStatePagination: () => defaultTableStatePagination,
-  defaultTableStateSelection: () => defaultTableStateSelection,
   equalDate: () => equalDate,
   equalSizeGroups: () => equalSizeGroups,
   filterNews: () => filterNews,
@@ -2966,7 +2968,6 @@ __export(index_exports, {
   getDaysInMonth: () => getDaysInMonth,
   getNeighbours: () => getNeighbours,
   getWeeksForCalenderMonth: () => getWeeksForCalenderMonth,
-  isDataObjectSelected: () => isDataObjectSelected,
   isInTimeSpan: () => isInTimeSpan,
   localizedNewsSchema: () => localizedNewsSchema,
   monthTranslation: () => monthTranslation,
@@ -2974,19 +2975,21 @@ __export(index_exports, {
   newsListSchema: () => newsListSchema,
   newsSchema: () => newsSchema,
   noop: () => noop,
-  pageForItem: () => pageForItem,
   range: () => range,
-  removeFromTableSelection: () => removeFromTableSelection,
+  resolveSetState: () => resolveSetState,
   shadingColorValues: () => shadingColorValues,
   subtractDuration: () => subtractDuration,
   timeTranslation: () => timeTranslation,
-  updatePagination: () => updatePagination,
+  useDelay: () => useDelay,
+  useFocusManagement: () => useFocusManagement,
+  useFocusOnceVisible: () => useFocusOnceVisible,
   useHoverState: () => useHoverState,
   useLanguage: () => useLanguage,
   useLocalStorage: () => useLocalStorage,
   useLocale: () => useLocale,
   useOutsideClick: () => useOutsideClick,
-  useSaveDelay: () => useSaveDelay,
+  useRerender: () => useRerender,
+  useResizeCallbackWrapper: () => useResizeCallbackWrapper,
   useSearch: () => useSearch,
   useTheme: () => useTheme,
   useTranslation: () => useTranslation,
@@ -3073,12 +3076,12 @@ var Tile = ({
       ),
       onClick: isDisabled ? void 0 : onClick,
       children: [
-        prefix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 24 }) : void 0),
+        prefix,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col gap-y-0 w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_clsx.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
           !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(description.className ?? "textstyle-description"), children: description.value })
         ] }),
-        suffix
+        suffix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 24 }) : void 0)
       ]
     }
   );
@@ -3379,14 +3382,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) => {
@@ -3597,12 +3621,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"
@@ -3766,7 +3794,7 @@ var TextButton = ({
       className: (0, import_clsx4.default)(
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [(0, import_clsx4.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+          [(0, import_clsx4.default)(colorClasses, "hover:bg-button-text-hover-background")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
@@ -3814,7 +3842,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__ */ (0, import_jsx_runtime5.jsx)(
     "button",
@@ -3823,7 +3852,9 @@ var IconButton = ({
       disabled: disabled || onClick === void 0,
       className: (0, import_clsx4.default)(
         {
-          "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",
           [(0, import_clsx4.default)(colorClasses, "hover:brightness-90")]: !disabled
         },
         ButtonUtil.iconPaddingMapping[size],
@@ -3845,7 +3876,7 @@ var import_react3 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronDown, { size: 16, className: "min-w-[16px]" });
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronDown, { className: "min-w-4 w-4" });
 var Expandable = (0, import_react3.forwardRef)(function Expandable2({
   children,
   label,
@@ -3941,7 +3972,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__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx6.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4340,8 +4371,8 @@ var TimePicker = ({
   const minuteRef = (0, import_react7.useRef)(null);
   const hourRef = (0, import_react7.useRef)(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);
   (0, import_react7.useEffect)(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
@@ -4588,6 +4619,7 @@ var import_lucide_react4 = require("lucide-react");
 var formTranslation = {
   en: {
     all: "All",
+    apply: "Apply",
     back: "Back",
     cancel: "Cancel",
     change: "Change",
@@ -4636,6 +4668,7 @@ var formTranslation = {
   },
   de: {
     all: "Alle",
+    apply: "Anwenden",
     back: "Zur\xFCck",
     cancel: "Abbrechen",
     change: "\xC4ndern",
@@ -5457,7 +5490,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) {
@@ -5740,10 +5773,10 @@ var Carousel = ({
       "div",
       {
         className: "row items-center justify-center w-full my-2",
-        children: range(0, length - 1).map((index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: range(length).map((index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
-            className: (0, import_clsx17.default)("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] first:rounded-l-md last:rounded-r-md", {
+            className: (0, import_clsx17.default)("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
             }),
@@ -6101,85 +6134,52 @@ var FAQSection = ({
 
 // src/components/layout-and-navigation/Pagination.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_clsx21 = __toESM(require("clsx"));
-var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime25.jsxs)("div", { className: (0, import_clsx21.default)("row", { "opacity-30": noPages }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.ChevronFirst, { className: (0, import_clsx21.default)({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.ChevronLeft, { className: (0, import_clsx21.default)({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-[80px] justify-center mx-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "select-none mx-2", children: translation("of") }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "select-none text-left flex-1", children: numberOfPages })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.ChevronRight, { className: (0, import_clsx21.default)({ "opacity-30": onLastPage }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.ChevronLast, { className: (0, import_clsx21.default)({ "opacity-30": onLastPage }) }) })
-  ] });
-};
-
-// src/components/layout-and-navigation/SearchableList.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_clsx24 = __toESM(require("clsx"));
+var import_clsx23 = __toESM(require("clsx"));
 
 // src/components/user-action/Input.tsx
-var import_react13 = require("react");
-var import_clsx23 = __toESM(require("clsx"));
+var import_react15 = require("react");
+var import_clsx22 = __toESM(require("clsx"));
 
-// src/hooks/useSaveDelay.ts
+// src/hooks/useDelay.ts
 var import_react12 = require("react");
-function useSaveDelay(setNotificationStatus, delay) {
-  const [updateTimer, setUpdateTimer] = (0, import_react12.useState)(void 0);
-  const [notificationTimer, setNotificationTimer] = (0, import_react12.useState)(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] = (0, import_react12.useState)(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);
   };
   (0, import_react12.useEffect)(() => {
     return () => {
-      clearTimeout(updateTimer);
-      clearTimeout(notificationTimer);
+      clearTimeout(timer);
     };
-  }, []);
-  return { restartTimer, clearUpdateTimer };
+  }, [timer]);
+  (0, import_react12.useEffect)(() => {
+    if (disabled) {
+      clearTimeout(timer);
+    }
+  }, [disabled, timer]);
+  return { restartTimer, clearTimer };
 }
 
 // src/components/user-action/Label.tsx
-var import_clsx22 = __toESM(require("clsx"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_clsx21 = __toESM(require("clsx"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var styleMapping = {
   labelSmall: "textstyle-label-sm",
   labelMedium: "textstyle-label-md",
@@ -6192,12 +6192,107 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { ...props, className: (0, import_clsx22.default)(styleMapping[labelType], className), children: children ? children : name });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { ...props, className: (0, import_clsx21.default)(styleMapping[labelType], className), children: children ? children : name });
+};
+
+// src/hooks/useFocusManagement.ts
+var import_react13 = require("react");
+function useFocusManagement() {
+  const getFocusableElements = (0, import_react13.useCallback)(() => {
+    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 = (0, import_react13.useCallback)(() => {
+    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 = (0, import_react13.useCallback)(() => {
+    const nextElement = getNextFocusElement();
+    nextElement?.focus();
+  }, [getNextFocusElement]);
+  const getPreviousFocusElement = (0, import_react13.useCallback)(() => {
+    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 = (0, import_react13.useCallback)(() => {
+    const previousElement = getPreviousFocusElement();
+    if (previousElement) previousElement.focus();
+  }, [getPreviousFocusElement]);
+  return {
+    getFocusableElements,
+    getNextFocusElement,
+    getPreviousFocusElement,
+    focusNext,
+    focusPrevious
+  };
+}
+
+// src/hooks/useFocusOnceVisible.ts
+var import_react14 = __toESM(require("react"));
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react14.default.useState(false);
+  (0, import_react14.useEffect)(() => {
+    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
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Input = ({
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var getInputClassName = ({ disabled = false, hasError = false }) => {
+  return (0, import_clsx22.default)(
+    "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 = (0, import_react15.forwardRef)(function Input2({
   id,
   type = "text",
   value,
@@ -6206,76 +6301,94 @@ 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 = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
-    if (autoFocus) {
-      ref.current?.focus();
+    clearTimer
+  } = useDelay({ delay, disabled: !afterDelay });
+  const innerRef = (0, import_react15.useRef)(null);
+  const { focusNext } = useFocusManagement();
+  useFocusOnceVisible(innerRef, !autoFocus);
+  (0, import_react15.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      innerRef.current?.blur();
+      focusNext();
     }
-  }, [autoFocus]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_clsx23.default)({ "w-full": expanded }, containerClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx23.default)("mb-1", label.className) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: (0, import_clsx22.default)({ "w-full": expanded }, containerClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx22.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "input",
       {
-        ref,
+        ...restProps,
+        ref: innerRef,
         value,
         id,
         type,
-        className,
+        disabled,
+        className: (0, import_clsx22.default)(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] = (0, import_react13.useState)(defaultValue);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [usedValue, setUsedValue] = (0, import_react15.useState)(value);
+  (0, import_react15.useEffect)(() => {
+    setUsedValue(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Input,
     {
       ...props,
-      value,
+      value: usedValue,
       onChangeText: (text) => {
-        setValue(text);
+        setUsedValue(text);
         onChangeText(text);
       }
     }
   );
 };
-var FormInput = (0, import_react13.forwardRef)(function FormInput2({
+var FormInput = (0, import_react15.forwardRef)(function FormInput2({
   id,
   labelText,
   errorText,
@@ -6284,35 +6397,107 @@ var FormInput = (0, import_react13.forwardRef)(function FormInput2({
   errorClassName,
   containerClassName,
   required,
+  disabled,
   ...restProps
 }, ref) {
-  const input = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const input = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "input",
     {
+      ...restProps,
       ref,
       id,
-      ...restProps,
-      className: (0, import_clsx23.default)(
-        {
-          "focus:border-primary focus:ring-primary": !errorText,
-          "focus:border-negative focus:ring-negative text-negative": !!errorText
-        },
+      disabled,
+      className: (0, import_clsx22.default)(
+        getInputClassName({ disabled, hasError: !!errorText }),
         className
       )
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_clsx23.default)("flex flex-col gap-y-1", containerClassName), children: [
-    labelText && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { htmlFor: id, className: (0, import_clsx23.default)("textstyle-label-md", labelClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: (0, import_clsx22.default)("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: id, className: (0, import_clsx22.default)("textstyle-label-md", labelClassName), children: [
       labelText,
-      required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-primary font-bold", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-primary font-bold", children: "*" })
     ] }),
     input,
-    errorText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { htmlFor: id, className: (0, import_clsx23.default)("text-negative", errorClassName), children: errorText })
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: id, className: (0, import_clsx22.default)("text-negative", errorClassName), children: errorText })
   ] });
 });
 
+// src/components/layout-and-navigation/Pagination.tsx
+var import_react16 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Pagination = ({
+  overwriteTranslation,
+  pageIndex,
+  pageCount,
+  onPageChanged,
+  className,
+  style
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  const [value, setValue] = (0, import_react16.useState)((pageIndex + 1).toString());
+  const noPages = pageCount === 0;
+  const onFirstPage = pageIndex === 0 && !noPages;
+  const onLastPage = pageIndex === pageCount - 1;
+  (0, import_react16.useEffect)(() => {
+    if (noPages) {
+      setValue("0");
+    } else {
+      setValue((pageIndex + 1).toString());
+    }
+  }, [pageIndex, noPages]);
+  const changePage = (page) => {
+    onPageChanged(page);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_clsx23.default)("row gap-x-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronFirst, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLeft, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "row min-w-56 gap-x-2 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        Input,
+        {
+          value,
+          containerClassName: "flex flex-1 h-10",
+          className: (0, import_clsx23.default)(
+            "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__ */ (0, import_jsx_runtime27.jsx)("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "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__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronRight, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLast, {}) })
+  ] });
+};
+
+// src/components/layout-and-navigation/SearchableList.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_clsx24 = __toESM(require("clsx"));
+
 // src/hooks/useSearch.ts
-var import_react14 = require("react");
+var import_react17 = require("react");
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -6343,12 +6528,12 @@ var useSearch = ({
   initialSearch,
   searchMapping
 }) => {
-  const [items, setItems] = (0, import_react14.useState)(list);
-  const [search, setSearch] = (0, import_react14.useState)(initialSearch);
-  (0, import_react14.useEffect)(() => {
+  const [items, setItems] = (0, import_react17.useState)(list);
+  const [search, setSearch] = (0, import_react17.useState)(initialSearch);
+  (0, import_react17.useEffect)(() => {
     setItems(list);
   }, [list]);
-  const result = (0, import_react14.useMemo)(
+  const result = (0, import_react17.useMemo)(
     () => MultiSearchWithMapping(search, items, searchMapping),
     [search, items, searchMapping]
   );
@@ -6406,7 +6591,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 var import_lucide_react9 = require("lucide-react");
 var import_clsx25 = __toESM(require("clsx"));
-var import_react15 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -6424,7 +6609,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);
@@ -6500,8 +6685,8 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = (0, import_react15.useState)(state ?? defaultState);
-  (0, import_react15.useEffect)(() => {
+  const [usedState, setUsedState] = (0, import_react18.useState)(state ?? defaultState);
+  (0, import_react18.useEffect)(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -6517,394 +6702,59 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   );
 };
 
-// src/components/layout-and-navigation/Table.tsx
-var import_react17 = require("react");
-var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
-
-// src/components/user-action/Checkbox.tsx
-var import_react16 = require("react");
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
-var import_lucide_react10 = require("lucide-react");
+// src/components/layout-and-navigation/TextImage.tsx
 var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime30 = require("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__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_clsx26.default)("row justify-center items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      CheckboxPrimitive.Root,
-      {
-        onCheckedChange: propagateChange,
-        checked,
-        disabled,
-        id,
-        className: (0, import_clsx26.default)(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__ */ (0, import_jsx_runtime30.jsxs)(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react10.Check, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react10.Minus, { className: innerIconSize })
-        ] })
-      }
-    ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Label,
-      {
-        ...label,
-        className: (0, import_clsx26.default)("cursor-pointer", label.className),
-        htmlFor: id,
-        onClick: changeValue
-      }
-    )
-  ] });
-};
-var CheckboxUncontrolled = ({
-  onChange,
-  onChangeTristate,
-  defaultValue = false,
-  ...props
-}) => {
-  const [checked, setChecked] = (0, import_react16.useState)(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__ */ (0, import_jsx_runtime30.jsx)(
-    Checkbox,
+    "div",
     {
-      ...props,
-      checked,
-      onChangeTristate: handleChange
+      className: (0, import_clsx26.default)("rounded-2xl w-full", className),
+      style: {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx26.default)(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          children: [
+            badge && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "col gap-y-1 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "textstyle-title-xl", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
+            ] }),
+            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "row mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+          ]
+        }
+      )
     }
   );
 };
 
-// src/components/layout-and-navigation/Table.tsx
-var import_clsx27 = __toESM(require("clsx"));
-var import_lucide_react11 = require("lucide-react");
+// src/components/layout-and-navigation/VerticalDivider.tsx
 var import_jsx_runtime31 = require("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] = (0, import_react17.useState)(0);
-  const tableRef = (0, import_react17.useRef)(null);
-  const calculateHeight = () => {
-    if (tableRef.current) {
-      const tableHeight = tableRef.current.offsetHeight;
-      const offset = 25;
-      setScrollbarsAutoHeightMin(tableHeight + offset);
-    }
-  };
-  (0, import_react17.useEffect)(() => {
-    calculateHeight();
-    const handleResize = () => {
-      calculateHeight();
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [data, currentPage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_clsx27.default)("col gap-y-4 overflow-hidden", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_custom_scrollbars_23.Scrollbars, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("tr", { className: headerRow, children: [
-        header && tableState.selection && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { className: headerPaddingHead, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          Checkbox,
-          {
-            checked: tableState.selection.hasSelectedSome ? "indeterminate" : tableState.selection.hasSelectedAll,
-            onChange: () => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))
-          }
-        ) }),
-        header && header.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { className: headerPaddingHead, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("tr", { children: [
-        tableState.selection && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { className: (0, import_clsx27.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          Checkbox,
-          {
-            checked: isDataObjectSelected(tableState, value, identifierMapping),
-            onChange: () => {
-              updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping));
-            }
-          }
-        ) }),
-        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "td",
-          {
-            className: (0, import_clsx27.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }),
-            children: value1
-          },
-          index
-        ))
-      ] }, identifierMapping(value))) })
-    ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
-      ...tableState,
-      pagination: { entriesPerPage, currentPage: page }
-    }) }) })
-  ] });
-};
-var SortButton = ({
-  children,
-  ascending,
-  color,
-  onClick,
-  ...buttonProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    TextButton,
-    {
-      color,
-      onClick: () => onClick(ascending === "descending" ? "ascending" : "descending"),
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "row gap-x-2", children: [
-        children,
-        ascending === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react11.ChevronUp, {}) : !ascending ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react11.ChevronsUpDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react11.ChevronDown, {})
-      ] })
-    }
-  );
-};
-
-// src/components/layout-and-navigation/TextImage.tsx
-var import_clsx28 = __toESM(require("clsx"));
-var import_jsx_runtime32 = require("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__ */ (0, import_jsx_runtime32.jsx)(
-    "div",
-    {
-      className: (0, import_clsx28.default)("rounded-2xl w-full", className),
-      style: {
-        backgroundImage: `url(${imageUrl})`,
-        backgroundSize: "cover"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-        "div",
-        {
-          className: (0, import_clsx28.default)(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
-          children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_clsx28.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "col gap-y-1 overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "textstyle-title-xl", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
-            ] }),
-            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "row mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/components/layout-and-navigation/VerticalDivider.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -6912,7 +6762,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "svg",
     {
       width,
@@ -6921,7 +6771,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "line",
           {
             opacity: "0.5",
@@ -6935,7 +6785,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "linearGradient",
           {
             id: "paint_linear",
@@ -6945,9 +6795,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -6957,9 +6807,9 @@ var VerticalDivider = ({
 };
 
 // src/components/loading-states/ErrorComponent.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_clsx29 = __toESM(require("clsx"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_clsx27 = __toESM(require("clsx"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var defaultErrorComponentTranslation = {
   en: {
     errorOccurred: "An error occurred"
@@ -6974,32 +6824,32 @@ var ErrorComponent = ({
   classname
 }) => {
   const translation = useTranslation([defaultErrorComponentTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_clsx29.default)("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_clsx27.default)("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react10.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_clsx28 = __toESM(require("clsx"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   overwriteTranslation,
   loadingText,
   classname
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: (0, import_clsx30.default)("col items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Helpwave, { animate: "loading" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx28.default)("col items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Helpwave, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -7008,8 +6858,8 @@ var LoadingAndErrorComponent = ({
   loadingProps,
   minimumLoadingDuration
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react18.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react18.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react19.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react19.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -7018,27 +6868,27 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LoadingAnimation, { ...loadingProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingAnimation, { ...loadingProps });
   }
   if (hasError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorComponent, { ...errorProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorComponent, { ...errorProps });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx31 = __toESM(require("clsx"));
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_clsx29 = __toESM(require("clsx"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx31.default)("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_clsx29.default)("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -7055,7 +6905,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "svg",
     {
       style: {
@@ -7064,7 +6914,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "circle",
           {
             cx: center,
@@ -7075,7 +6925,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "circle",
           {
             cx: center,
@@ -7094,8 +6944,8 @@ var ProgressIndicator = ({
 };
 
 // src/components/modals/ConfirmModal.tsx
-var import_clsx32 = __toESM(require("clsx"));
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_clsx30 = __toESM(require("clsx"));
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var ConfirmModal = ({
   overwriteTranslation,
   children,
@@ -7114,10 +6964,10 @@ var ConfirmModal = ({
     positive: "positive",
     primary: "primary"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Modal, { ...restProps, onClose: onCancel, className: (0, import_clsx32.default)("justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "col grow", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Modal, { ...restProps, onClose: onCancel, className: (0, import_clsx30.default)("justify-between", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "col grow", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         SolidButton,
         {
           color: buttonOverwrites?.[0].color ?? "neutral",
@@ -7126,7 +6976,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[0].text ?? translation("cancel")
         }
       ),
-      onDecline && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      onDecline && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         SolidButton,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
@@ -7135,7 +6985,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[1].text ?? translation("decline")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         SolidButton,
         {
           autoFocus: true,
@@ -7150,7 +7000,7 @@ var ConfirmModal = ({
 };
 
 // src/components/modals/DiscardChangesModal.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var DiscardChangesModal = ({
   overwriteTranslation,
   children,
@@ -7161,7 +7011,7 @@ var DiscardChangesModal = ({
   ...modalProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     ConfirmModal,
     {
       headerProps: {
@@ -7180,31 +7030,31 @@ var DiscardChangesModal = ({
 };
 
 // src/components/modals/InputModal.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var InputModal = ({
   inputs,
   buttonOverwrites,
   ...restProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     ConfirmModal,
     {
       buttonOverwrites,
       ...restProps,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
 
 // src/components/user-action/Select.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_react20 = require("react");
-var import_clsx33 = __toESM(require("clsx"));
+var import_lucide_react11 = require("lucide-react");
+var import_react21 = require("react");
+var import_clsx31 = __toESM(require("clsx"));
 
 // src/hooks/useOutsideClick.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -7222,7 +7072,7 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Select.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Select = ({
   value,
   label,
@@ -7234,23 +7084,23 @@ var Select = ({
   className,
   selectedDisplayOverwrite
 }) => {
-  const triggerRef = (0, import_react20.useRef)(null);
-  const menuRef = (0, import_react20.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const triggerRef = (0, import_react21.useRef)(null);
+  const menuRef = (0, import_react21.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(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__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx33.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx33.default)("mb-1", label.className) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: (0, import_clsx31.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx31.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "button",
         {
           ref: triggerRef,
-          className: (0, import_clsx33.default)(
+          className: (0, import_clsx31.default)(
             "btn-md justify-between w-full border-2",
             {
               "rounded-b-lg": !open,
@@ -7261,24 +7111,24 @@ var Select = ({
           onClick: () => setIsOpen(!isOpen),
           disabled: isDisabled,
           children: [
-            !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
-            isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "textstyle-description", children: hintText }),
-            isOpen ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.ChevronDown, {})
+            !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
+            isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "textstyle-description", children: hintText }),
+            isOpen ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react11.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react11.ChevronDown, {})
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "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__ */ (0, import_jsx_runtime42.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             SearchableList,
             {
               list: options,
               minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
               searchMapping: (item) => item.searchTags,
-              itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Tile,
                 {
                   isSelected: selectedOption?.value === option.value,
@@ -7307,13 +7157,13 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = (0, import_react20.useState)(value);
-  (0, import_react20.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react21.useState)(value);
+  (0, import_react21.useEffect)(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Select,
     {
       value: selected,
@@ -7329,7 +7179,7 @@ var SelectUncontrolled = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var defaultLanguageModalTranslation = {
   en: {
     language: "Language",
@@ -7352,7 +7202,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation([defaultLanguageModalTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Modal,
     {
       headerProps: {
@@ -7362,25 +7212,25 @@ var LanguageModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           Select,
           {
             className: "mt-2",
             value: language,
-            options: LanguageUtil.languages.map((language2) => ({ label: translation[language2], value: language2 })),
+            options: LanguageUtil.languages.map((language2) => ({ label: translation(language2), value: language2 })),
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/theming/useTheme.tsx
-var import_react21 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -7404,27 +7254,27 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react21.createContext)({
+var ThemeContext = (0, import_react22.createContext)({
   theme: "light",
   setTheme: noop
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = (0, import_react21.useState)(initialTheme);
-  (0, import_react21.useEffect)(() => {
+  const [theme, setTheme] = (0, import_react22.useState)(initialTheme);
+  (0, import_react22.useEffect)(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
-var useTheme = () => (0, import_react21.useContext)(ThemeContext);
+var useTheme = () => (0, import_react22.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultConfirmDialogTranslation = {
   en: {
     chooseTheme: "Choose your preferred theme"
@@ -7441,7 +7291,7 @@ var ThemeModal = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useTranslation([defaultConfirmDialogTranslation, formTranslation, ThemeUtil.translation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Modal,
     {
       headerProps: {
@@ -7451,74 +7301,173 @@ var ThemeModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Select,
           {
             className: "mt-2",
             value: theme,
-            options: ThemeUtil.themes.map((theme2) => ({ label: translation[theme2], value: theme2 })),
+            options: ThemeUtil.themes.map((theme2) => ({ label: translation(theme2), value: theme2 })),
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_lucide_react15 = require("lucide-react");
-
-// src/components/properties/PropertyBase.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var PropertyBase = ({
-  overwriteTranslation,
-  name,
-  input,
-  softRequired = false,
-  hasValue,
-  icon,
-  readOnly,
-  onRemove,
-  className = ""
+
+// src/components/user-action/Checkbox.tsx
+var import_react23 = require("react");
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+var import_lucide_react12 = require("lucide-react");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime44 = require("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 translation = useTranslation([formTranslation], overwriteTranslation);
-  const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx34.default)("row gap-x-0 group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-      "div",
+  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__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx32.default)("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      CheckboxPrimitive.Root,
       {
-        className: (0, import_clsx34.default)("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
+        onCheckedChange: propagateChange,
+        checked,
+        disabled,
+        id,
+        className: (0, import_clsx32.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
+          "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
+          "focus:border-primary": !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: [
-          icon,
-          name
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+        ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-      "div",
+    label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      Label,
       {
-        className: (0, import_clsx34.default)("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__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-warning pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react14.AlertTriangle, { size: 24 }) }),
-          onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            TextButton,
-            {
-              onClick: onRemove,
-              color: "negative",
-              className: (0, import_clsx34.default)("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
-              disabled: !hasValue || readOnly,
-              children: translation("remove")
+        ...label,
+        className: (0, import_clsx32.default)("cursor-pointer", label.className),
+        htmlFor: id,
+        onClick: changeValue
+      }
+    )
+  ] });
+};
+var CheckboxUncontrolled = ({
+  onChange,
+  onChangeTristate,
+  defaultValue = false,
+  ...props
+}) => {
+  const [checked, setChecked] = (0, import_react23.useState)(defaultValue);
+  const handleChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
+    }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+    setChecked(checked2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    Checkbox,
+    {
+      ...props,
+      checked,
+      onChangeTristate: handleChange
+    }
+  );
+};
+
+// src/components/properties/PropertyBase.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_clsx33 = __toESM(require("clsx"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var PropertyBase = ({
+  overwriteTranslation,
+  name,
+  input,
+  softRequired = false,
+  hasValue,
+  icon,
+  readOnly,
+  onRemove,
+  className = ""
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  const requiredAndNoValue = softRequired && !hasValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: (0, import_clsx33.default)("row gap-x-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx33.default)("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),
+        children: [
+          icon,
+          name
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx33.default)("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__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-warning pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
+          onRemove && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TextButton,
+            {
+              onClick: onRemove,
+              color: "negative",
+              className: (0, import_clsx33.default)("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              disabled: !hasValue || readOnly,
+              children: translation("remove")
             }
           )
         ]
@@ -7528,7 +7477,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   overwriteTranslation,
   value,
@@ -7537,14 +7486,14 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.Check, { size: 16 }),
-      input: () => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react14.Check, { size: 16 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Checkbox,
         {
           checked: value ?? true,
@@ -7558,9 +7507,9 @@ var CheckboxProperty = ({
 };
 
 // src/components/properties/DateProperty.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_clsx34 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onChange = noop,
@@ -7571,20 +7520,20 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.CalendarDays, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.CalendarDays, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "div",
         {
-          className: (0, import_clsx35.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          className: (0, import_clsx34.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Input,
             {
-              className: (0, import_clsx35.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+              className: (0, import_clsx34.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
               value: dateText,
               type: type === "dateTime" ? "datetime-local" : "date",
               readOnly,
@@ -7607,14 +7556,14 @@ var DateProperty = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
-
-// src/components/user-action/MultiSelect.tsx
-var import_react22 = require("react");
 var import_lucide_react17 = require("lucide-react");
 var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// src/components/user-action/MultiSelect.tsx
+var import_react24 = require("react");
+var import_lucide_react16 = require("lucide-react");
+var import_clsx35 = __toESM(require("clsx"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var defaultMultiSelectTranslation = {
   en: {
     selected: `{{amount}} selected`
@@ -7636,28 +7585,28 @@ var MultiSelect = ({
   className = ""
 }) => {
   const translation = useTranslation([formTranslation, defaultMultiSelectTranslation], overwriteTranslation);
-  const triggerRef = (0, import_react22.useRef)(null);
-  const menuRef = (0, import_react22.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const triggerRef = (0, import_react24.useRef)(null);
+  const menuRef = (0, import_react24.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const selectedItems = options.filter((value) => value.selected);
   const isShowingHint = !selectedDisplayOverwrite && selectedItems.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: (0, import_clsx36.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: (0, import_clsx35.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: (0, import_clsx36.default)(" mb-1", label.className),
+        className: (0, import_clsx35.default)(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         "button",
         {
           ref: triggerRef,
-          className: (0, import_clsx36.default)(
+          className: (0, import_clsx35.default)(
             "btn-md justify-between w-full border-2 h-auto",
             {
               "rounded-b-lg": !open,
@@ -7668,25 +7617,25 @@ var MultiSelect = ({
           onClick: () => setIsOpen(!isOpen),
           disabled: isDisabled,
           children: [
-            !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
-            isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
-            isOpen ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react17.ChevronUp, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react17.ChevronDown, { className: "min-w-6" })
+            !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
+            isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
+            isOpen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronUp, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronDown, { className: "min-w-6" })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         "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__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               SearchableList,
               {
                 list: options,
                 minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
                 searchMapping: (item) => item.searchTags,
-                itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   Tile,
                   {
                     isSelected: option.selected,
@@ -7705,9 +7654,9 @@ var MultiSelect = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "row justify-between mt-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "row gap-x-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "row justify-between mt-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "row gap-x-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7722,7 +7671,7 @@ var MultiSelect = ({
                     children: translation("all")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7737,7 +7686,7 @@ var MultiSelect = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SolidButton, { size: "small", onClick: () => setIsOpen(false), children: "Done" })
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SolidButton, { size: "small", onClick: () => setIsOpen(false), children: "Done" })
             ] })
           ]
         }
@@ -7750,11 +7699,11 @@ var MultiSelectUncontrolled = ({
   onChange,
   ...props
 }) => {
-  const [usedOptions, setUsedOptions] = (0, import_react22.useState)(options);
-  (0, import_react22.useEffect)(() => {
+  const [usedOptions, setUsedOptions] = (0, import_react24.useState)(options);
+  (0, import_react24.useEffect)(() => {
     setUsedOptions(options);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     MultiSelect,
     {
       ...props,
@@ -7768,7 +7717,7 @@ var MultiSelectUncontrolled = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   overwriteTranslation,
   options,
@@ -7780,7 +7729,7 @@ var MultiSelectProperty = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = options.some((value) => value.selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     PropertyBase,
     {
       name,
@@ -7788,16 +7737,16 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react18.List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react17.List, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "div",
         {
-          className: (0, import_clsx37.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          className: (0, import_clsx36.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             MultiSelect,
             {
               ...multiSelectProps,
-              className: (0, import_clsx37.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: (0, import_clsx36.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               options,
               isDisabled: readOnly,
               useChipDisplay: true,
@@ -7811,9 +7760,9 @@ var MultiSelectProperty = ({
 };
 
 // src/components/properties/NumberProperty.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_clsx37 = __toESM(require("clsx"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -7834,23 +7783,23 @@ var NumberProperty = ({
 }) => {
   const translation = useTranslation([defaultNumberPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react19.Binary, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react18.Binary, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "div",
         {
-          className: (0, import_clsx38.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          className: (0, import_clsx37.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Input,
               {
                 expanded: false,
-                className: (0, import_clsx38.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: (0, import_clsx37.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                 value: value?.toString() ?? "",
                 type: "number",
                 readOnly,
@@ -7873,7 +7822,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx38.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: (0, import_clsx37.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -7882,9 +7831,9 @@ var NumberProperty = ({
 };
 
 // src/components/properties/SelectProperty.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   overwriteTranslation,
   value,
@@ -7897,7 +7846,7 @@ var SingleSelectProperty = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     PropertyBase,
     {
       name,
@@ -7905,19 +7854,19 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react20.List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react19.List, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
-          className: (0, import_clsx39.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          className: (0, import_clsx38.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Select,
             {
               ...selectProps,
               value,
               options,
               isDisabled: readOnly,
-              className: (0, import_clsx39.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: (0, import_clsx38.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               hintText: `${translation("select")}...`
             }
           )
@@ -7928,13 +7877,13 @@ var SingleSelectProperty = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_lucide_react21 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
+var import_lucide_react20 = require("lucide-react");
+var import_clsx40 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
-var import_react23 = require("react");
-var import_clsx40 = __toESM(require("clsx"));
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_clsx39 = __toESM(require("clsx"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Textarea = ({
   label,
   headline,
@@ -7945,37 +7894,38 @@ var Textarea = ({
   disclaimer,
   onBlur = noop,
   onEditCompleted = noop,
+  saveDelayOptions,
   defaultStyle = true,
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = (0, import_react23.useState)(false);
-  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
+  const [hasFocus, setHasFocus] = (0, import_react25.useState)(false);
+  const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
-    clearUpdateTimer();
+    clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: (0, import_clsx40.default)("mb-1", label.className),
+        className: (0, import_clsx39.default)("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "div",
       {
-        className: `${(0, import_clsx40.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: `${(0, import_clsx39.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
         children: [
-          headline && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          headline && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "textarea",
             {
               id,
-              className: (0, import_clsx40.default)("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", {
+              className: (0, import_clsx39.default)("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
@@ -8002,7 +7952,7 @@ var Textarea = ({
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -8010,11 +7960,11 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = (0, import_react23.useState)(value);
-  (0, import_react23.useEffect)(() => {
+  const [text, setText] = (0, import_react25.useState)(value);
+  (0, import_react25.useEffect)(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     Textarea,
     {
       ...props,
@@ -8028,7 +7978,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var defaultTextPropertyTranslation = {
   en: {
     text: "Text"
@@ -8048,21 +7998,21 @@ var TextProperty = ({
 }) => {
   const translation = useTranslation([defaultTextPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react21.Text, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Text, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "div",
         {
-          className: (0, import_clsx41.default)("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          className: (0, import_clsx40.default)("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Textarea,
             {
-              className: (0, import_clsx41.default)("ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+              className: (0, import_clsx40.default)("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 ?? "",
@@ -8090,74 +8040,41 @@ var TextProperty = ({
   );
 };
 
-// src/components/user-action/DateAndTimePicker.tsx
-var import_clsx42 = __toESM(require("clsx"));
-var import_jsx_runtime55 = require("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
+var import_clsx41 = require("clsx");
+var import_jsx_runtime54 = require("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__ */ (0, import_jsx_runtime55.jsx)(
-      DatePicker,
-      {
-        ...datePickerProps,
-        className: "min-w-[320px] min-h-[250px]",
-        yearMonthPickerProps: { maxHeight: 218 },
-        value,
-        start,
-        end,
-        onChange
-      }
-    );
-  }
-  if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      TimePicker,
-      {
-        ...timePickerProps,
-        className: (0, import_clsx42.default)("h-full", { "justify-between w-full": mode === "time" }),
-        maxHeight: 250,
-        time: value,
-        onChange
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "row gap-x-4", children: [
-      dateDisplay,
-      timeDisplay
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-        SolidButton,
-        {
-          size: "medium",
-          onClick: () => onFinish(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: (0, import_clsx41.clsx)("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
+var import_react29 = require("react");
+var import_clsx44 = __toESM(require("clsx"));
+var import_react_table = require("@tanstack/react-table");
+var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
+
+// src/components/table/TableFilterButton.tsx
+var import_lucide_react21 = require("lucide-react");
+
 // src/components/user-action/Menu.tsx
-var import_react24 = require("react");
-var import_clsx43 = __toESM(require("clsx"));
+var import_react26 = require("react");
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/util/PropsWithFunctionChildren.ts
 var resolve = (children, bag) => {
@@ -8171,17 +8088,17 @@ var BagFunctionUtil = {
 };
 
 // src/components/user-action/Menu.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   "div",
   {
-    className: (0, import_clsx43.default)("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
+    className: (0, import_clsx42.default)("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,
@@ -8200,23 +8117,23 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
-  const triggerRef = (0, import_react24.useRef)(null);
-  const menuRef = (0, import_react24.useRef)(null);
+  const triggerRef = (0, import_react26.useRef)(null);
+  const menuRef = (0, import_react26.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       className: "relative",
       ...handlers,
       children: [
         trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             ref: menuRef,
             onClick: (e) => e.stopPropagation(),
-            className: (0, import_clsx43.default)(
+            className: (0, import_clsx42.default)(
               "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",
@@ -8235,10 +8152,631 @@ var Menu = ({
   );
 };
 
-// src/components/user-action/ScrollPicker.tsx
-var import_react25 = require("react");
-var import_clsx44 = __toESM(require("clsx"));
+// src/components/table/TableFilterButton.tsx
+var import_react27 = require("react");
+var import_jsx_runtime56 = require("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] = (0, import_react27.useState)(columnFilterValue);
+  const hasFilter = !!filterValue;
+  (0, import_react27.useEffect)(() => {
+    setFilterValue(columnFilterValue);
+  }, [columnFilterValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    Menu,
+    {
+      trigger: (onClick, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react21.FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          Input,
+          {
+            value: filterValue ?? "",
+            autoFocus: true,
+            placeholder: translation("text"),
+            onChangeText: setFilterValue,
+            className: "h-10"
+          }
+        ),
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "row gap-x-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            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__ */ (0, import_jsx_runtime56.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            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__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            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__ */ (0, import_jsx_runtime56.jsx)(
+            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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "row justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
+            column.setFilterValue(void 0);
+            close();
+          }, children: translation("remove") }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SolidButton, { size: "small", onClick: () => {
+            column.setFilterValue(filterValue);
+            close();
+          }, children: translation("apply") })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/components/table/TableSortButton.tsx
+var import_lucide_react22 = require("lucide-react");
+var import_clsx43 = __toESM(require("clsx"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
+var TableSortButton = ({
+  sortDirection,
+  invert = false,
+  color = "neutral",
+  className,
+  ...buttonProps
+}) => {
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.ChevronsUpDown, { className: "w-full h-full" });
+  if (sortDirection) {
+    let usedSortDirection = sortDirection;
+    if (invert) {
+      usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
+    }
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.ChevronDown, { className: "w-full h-full" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    IconButton,
+    {
+      size: "tiny",
+      color,
+      className: (0, import_clsx43.default)(className),
+      ...buttonProps,
+      children: icon
+    }
+  );
+};
+
+// src/hooks/useResizeCallbackWrapper.ts
+var import_react28 = require("react");
+var useResizeCallbackWrapper = (callback) => {
+  (0, import_react28.useEffect)(() => {
+    window.addEventListener("resize", callback);
+    return () => {
+      window.removeEventListener("resize", callback);
+    };
+  }, [callback]);
+};
+
+// src/components/table/Table.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Table = ({
+  data,
+  fillerRow,
+  initialState,
+  onRowClick = noop,
+  className,
+  tableClassName,
+  defaultColumn,
+  state,
+  columns,
+  ...tableOptions
+}) => {
+  const ref = (0, import_react29.useRef)(null);
+  const tableRef = (0, import_react29.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react29.useState)(columns.reduce((previousValue, currentValue) => {
+    return {
+      ...previousValue,
+      [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
+    };
+  }, {}));
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react29.useState)();
+  const [pagination, setPagination] = (0, import_react29.useState)({
+    pageSize: 10,
+    pageIndex: 0,
+    ...initialState?.pagination
+  });
+  const [columnFilters, setColumnFilters] = (0, import_react29.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react29.useMemo)(() => {
+    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 = (0, import_react29.useMemo)(() => {
+    return columns.reduce((previousValue, column) => {
+      return {
+        ...previousValue,
+        [column.id]: column.maxSize ?? defaultColumn?.maxSize
+      };
+    }, {});
+  }, [columns, defaultColumn]);
+  const tableMinWidth = (0, import_react29.useMemo)(() => {
+    return columns.reduce((sum, column) => {
+      return sum + computedColumnMinWidths[column.id];
+    }, 0);
+  }, [columns, computedColumnMinWidths]);
+  const updateColumnSizes = (0, import_react29.useMemo)(() => {
+    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 = (0, import_react_table.useReactTable)({
+    data,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
+    initialState,
+    defaultColumn: {
+      minSize: 60,
+      maxSize: 700,
+      ...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] = (0, import_react29.useState)(false);
+  (0, import_react29.useEffect)(() => {
+    if (!hasInitializedSizing && ref.current) {
+      setHasInitializedSizing(true);
+      table.setColumnSizing(updateColumnSizes(columnSizing));
+    }
+  }, [columnSizing, hasInitializedSizing]);
+  useResizeCallbackWrapper((0, import_react29.useCallback)(() => {
+    table.setColumnSizing(updateColumnSizes);
+  }, [updateColumnSizes]));
+  const pageCount = table.getPageCount();
+  (0, import_react29.useEffect)(() => {
+    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 = (0, import_react29.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime58.jsxs)("div", { ref, className: (0, import_clsx44.default)("col gap-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_custom_scrollbars_23.Scrollbars, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      "table",
+      {
+        ref: tableRef,
+        className: (0, import_clsx44.default)(tableClassName),
+        style: {
+          ...columnSizeVars,
+          width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
+        },
+        children: [
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            "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__ */ (0, import_jsx_runtime58.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+              "th",
+              {
+                colSpan: header.colSpan,
+                className: (0, import_clsx44.default)("relative group", header.column.columnDef.meta?.className),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "row gap-x-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                      TableSortButton,
+                      {
+                        sortDirection: header.column.getIsSorted(),
+                        onClick: () => header.column.toggleSorting()
+                      }
+                    ),
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                      TableFilterButton,
+                      {
+                        column: header.column,
+                        filterType: header.column.columnDef.meta.filterType
+                      }
+                    ) : null,
+                    (0, import_react_table.flexRender)(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  ] }) }),
+                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                    "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__ */ (0, import_jsx_runtime58.jsxs)("tbody", { children: [
+            table.getRowModel().rows.map((row) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("td", { children: (0, import_react_table.flexRender)(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                ) }, cell.id);
+              }) }, row.id);
+            }),
+            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FillerRowElement, {}) }, column.id);
+              }) }, "filler-row-" + index);
+            })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "row justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      Pagination,
+      {
+        pageIndex: table.getState().pagination.pageIndex,
+        pageCount: table.getPageCount(),
+        onPageChanged: (page) => table.setPageIndex(page)
+      }
+    ) })
+  ] });
+};
+var TableUncontrolled = ({ data, ...props }) => {
+  const [usedDate, setUsedData] = (0, import_react29.useState)(data);
+  (0, import_react29.useEffect)(() => {
+    setUsedData(data);
+  }, [data]);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    Table,
+    {
+      ...props,
+      data: usedDate
+    }
+  );
+};
+var TableWithSelection = ({
+  columns,
+  state,
+  fillerRow,
+  rowSelection,
+  selectionRowId = "selection",
+  onRowClick = noop,
+  meta,
+  ...props
+}) => {
+  const columnsWithSelection = (0, import_react29.useMemo)(() => {
+    return [
+      {
+        id: selectionRowId,
+        header: ({ table }) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            Checkbox,
+            {
+              checked: table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected(),
+              onChangeTristate: (value) => {
+                const newValue = !!value;
+                table.toggleAllRowsSelected(newValue);
+              },
+              containerClassName: "max-w-6"
+            }
+          );
+        },
+        cell: ({ row }) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            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__ */ (0, import_jsx_runtime58.jsx)(
+    Table,
+    {
+      columns: columnsWithSelection,
+      fillerRow: (columnId, table) => {
+        if (columnId === selectionRowId) {
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
+        }
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FillerRowElement, {});
+      },
+      state: {
+        rowSelection,
+        ...state
+      },
+      onRowClick: (row, table) => {
+        row.toggleSelected();
+        onRowClick(row, table);
+      },
+      meta: {
+        bodyRowClassName: "cursor-pointer",
+        ...meta
+      },
+      ...props
+    }
+  );
+};
+
+// src/components/user-action/DateAndTimePicker.tsx
+var import_clsx45 = __toESM(require("clsx"));
+var import_jsx_runtime59 = require("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__ */ (0, import_jsx_runtime59.jsx)(
+      DatePicker,
+      {
+        ...datePickerProps,
+        className: "min-w-[320px] min-h-[250px]",
+        yearMonthPickerProps: { maxHeight: 218 },
+        value,
+        start,
+        end,
+        onChange
+      }
+    );
+  }
+  if (useTime) {
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      TimePicker,
+      {
+        ...timePickerProps,
+        className: (0, import_clsx45.default)("h-full", { "justify-between w-full": mode === "time" }),
+        maxHeight: 250,
+        time: value,
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "row gap-x-4", children: [
+      dateDisplay,
+      timeDisplay
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        SolidButton,
+        {
+          size: "medium",
+          onClick: () => onFinish(value),
+          children: translation("change")
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/components/user-action/ScrollPicker.tsx
+var import_react30 = require("react");
+var import_clsx46 = __toESM(require("clsx"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8257,7 +8795,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react25.useState)({
+  }, setAnimation] = (0, import_react30.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -8266,14 +8804,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 = (0, import_react25.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react30.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -8283,7 +8821,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react25.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react30.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -8356,7 +8894,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -8377,7 +8915,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -8387,15 +8925,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: "col select-none",
@@ -8403,10 +8941,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               "div",
               {
-                className: (0, import_clsx44.default)(
+                className: (0, import_clsx46.default)(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -8433,10 +8971,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-var import_react26 = require("react");
-var import_lucide_react22 = require("lucide-react");
-var import_clsx45 = __toESM(require("clsx"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_lucide_react23 = require("lucide-react");
+var import_clsx47 = __toESM(require("clsx"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var ToggleableInput = ({
   type = "text",
   value,
@@ -8448,28 +8986,29 @@ var ToggleableInput = ({
   size = 16,
   disclaimer,
   onBlur,
+  saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react26.useState)(initialState !== "display");
-  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
-  const ref = (0, import_react26.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react31.useState)(initialState !== "display");
+  const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
+  const ref = (0, import_react31.useRef)(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
-    clearUpdateTimer();
+    clearTimer();
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (isEditing) {
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "div",
       {
-        className: (0, import_clsx45.default)("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: (0, import_clsx47.default)("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: (0, import_clsx45.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx47.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "input",
             {
               ref,
@@ -8497,16 +9036,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: (0, import_clsx45.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: (0, import_clsx47.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: (0, import_clsx45.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-            import_lucide_react22.Pencil,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: (0, import_clsx47.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            import_lucide_react23.Pencil,
             {
-              className: (0, import_clsx45.default)(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: (0, import_clsx47.default)(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -8514,7 +9053,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -8522,11 +9061,11 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = (0, import_react26.useState)(initialValue);
-  (0, import_react26.useEffect)(() => {
+  const [value, setValue] = (0, import_react31.useState)(initialValue);
+  (0, import_react31.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     ToggleableInput,
     {
       value,
@@ -8539,6 +9078,12 @@ var ToggleableInputUncontrolled = ({
   );
 };
 
+// src/hooks/useRerender.ts
+var import_react32 = require("react");
+var useRerender = () => {
+  return (0, import_react32.useReducer)(() => ({}), {})[1];
+};
+
 // src/util/builder.ts
 var builder = (value, update) => {
   update(value);
@@ -8577,6 +9122,11 @@ var localizedNewsSchema = import_zod.z.record(import_zod.z.enum(LanguageUtil.lan
 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;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ASTNodeInterpreter,
@@ -8611,10 +9161,12 @@ var filterNews = (localizedNews, requiredKeys) => {
   Expandable,
   ExpandableUncontrolled,
   FAQSection,
+  FillerRowElement,
   FormInput,
   Helpwave,
   HelpwaveBadge,
   IconButton,
+  IconButtonUtil,
   Input,
   InputModal,
   InputUncontrolled,
@@ -8656,10 +9208,14 @@ var filterNews = (localizedNews, requiredKeys) => {
   SimpleSearchWithMapping,
   SingleSelectProperty,
   SolidButton,
-  SortButton,
   StepperBar,
   StepperBarUncontrolled,
   Table,
+  TableFilterButton,
+  TableFilters,
+  TableSortButton,
+  TableUncontrolled,
+  TableWithSelection,
   TagIcon,
   TextButton,
   TextImage,
@@ -8682,18 +9238,14 @@ var filterNews = (localizedNews, requiredKeys) => {
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
-  addElementToTable,
   avatarSizeMapping,
   avtarSizeList,
   builder,
   changeDuration,
-  changeTableSelectionSingle,
   clamp,
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
-  defaultTableStatePagination,
-  defaultTableStateSelection,
   equalDate,
   equalSizeGroups,
   filterNews,
@@ -8705,7 +9257,6 @@ var filterNews = (localizedNews, requiredKeys) => {
   getDaysInMonth,
   getNeighbours,
   getWeeksForCalenderMonth,
-  isDataObjectSelected,
   isInTimeSpan,
   localizedNewsSchema,
   monthTranslation,
@@ -8713,19 +9264,21 @@ var filterNews = (localizedNews, requiredKeys) => {
   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,