@helpwave/hightide 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -46,6 +46,7 @@ __export(index_exports, {
   ChipList: () => ChipList,
   Circle: () => Circle,
   ConfirmDialog: () => ConfirmDialog,
+  ConfirmModal: () => ConfirmModal,
   DatePicker: () => DatePicker,
   DatePickerUncontrolled: () => DatePickerUncontrolled,
   DateProperty: () => DateProperty,
@@ -80,7 +81,6 @@ __export(index_exports, {
   Menu: () => Menu2,
   MenuItem: () => MenuItem,
   Modal: () => Modal,
-  ModalHeader: () => ModalHeader,
   MultiSearchWithMapping: () => MultiSearchWithMapping,
   MultiSelect: () => MultiSelect,
   MultiSelectProperty: () => MultiSelectProperty,
@@ -88,6 +88,7 @@ __export(index_exports, {
   NumberProperty: () => NumberProperty,
   OutlineButton: () => OutlineButton,
   Overlay: () => Overlay,
+  OverlayHeader: () => OverlayHeader,
   Pagination: () => Pagination,
   ProgressIndicator: () => ProgressIndicator,
   PropertyBase: () => PropertyBase,
@@ -980,6 +981,7 @@ var Expandable = (0, import_react3.forwardRef)(({
   icon,
   initialExpansion = false,
   clickOnlyOnHeader = true,
+  disabled = false,
   className = "",
   headerClassName = ""
 }, ref) => {
@@ -989,21 +991,29 @@ var Expandable = (0, import_react3.forwardRef)(({
     "div",
     {
       ref,
-      className: (0, import_clsx5.default)("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
-      onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
+      className: (0, import_clsx5.default)("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      onClick: () => !clickOnlyOnHeader && !disabled && setIsExpanded(!isExpanded),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          "button",
+          "div",
           {
-            className: (0, import_clsx5.default)("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
-            onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
+            className: (0, import_clsx5.default)(
+              "row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+              {
+                "group-hover:brightness-95": !isExpanded,
+                "hover:brightness-95": isExpanded && !disabled,
+                "cursor-pointer": clickOnlyOnHeader && !disabled
+              },
+              headerClassName
+            ),
+            onClick: () => clickOnlyOnHeader && !disabled && setIsExpanded(!isExpanded),
             children: [
               label,
               icon(isExpanded)
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col", children })
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col px-4 pb-2", children })
       ]
     }
   );
@@ -1515,1504 +1525,1554 @@ var TimePickerUncontrolled = ({
   );
 };
 
-// src/components/icons-and-geometry/Avatar.tsx
-var import_image2 = __toESM(require("next/image"), 1);
-var import_clsx10 = __toESM(require("clsx"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var avtarSizeList = ["tiny", "small", "medium", "large"];
-var avatarSizeMapping = {
-  tiny: 24,
-  small: 32,
-  medium: 48,
-  large: 64
-};
-var Avatar = ({ avatarUrl, alt, size = "medium", className = "" }) => {
-  avatarUrl = "https://cdn.helpwave.de/boringavatar.svg";
-  const avtarSize = {
-    tiny: 24,
-    small: 32,
-    medium: 48,
-    large: 64
-  }[size];
-  const style = {
-    width: avtarSize + "px",
-    height: avtarSize + "px",
-    maxWidth: avtarSize + "px",
-    maxHeight: avtarSize + "px",
-    minWidth: avtarSize + "px",
-    minHeight: avtarSize + "px"
-  };
-  return (
-    // TODO transparent or white background later
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_clsx10.default)(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_image2.default,
-      {
-        className: "rounded-full border border-gray-200",
-        style,
-        src: avatarUrl,
-        alt,
-        width: avtarSize,
-        height: avtarSize
-      }
-    ) })
-  );
-};
-var AvatarGroup = ({
-  avatars,
-  maxShownProfiles = 5,
-  size = "tiny"
-}) => {
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
-  const diameter = avatarSizeMapping[size];
-  const stackingOverlap = 0.5;
-  const notDisplayedProfiles = avatars.length - maxShownProfiles;
-  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "row relative", style: { height: diameter + "px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "absolute",
-        style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
-      },
-      index
-    )) }),
-    notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "truncate row items-center",
-        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-          "+ ",
-          notDisplayedProfiles
-        ] })
-      }
-    )
-  ] });
-};
+// src/components/dialogs/ConfirmDialog.tsx
+var import_clsx12 = __toESM(require("clsx"), 1);
 
-// src/components/icons-and-geometry/Circle.tsx
+// src/components/layout-and-navigation/Overlay.tsx
+var import_react9 = require("react");
+var import_react_dom = __toESM(require("react-dom"), 1);
 var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Circle = ({
-  radius = 20,
-  className = "bg-primary",
-  style,
-  ...restProps
-}) => {
-  const size = radius * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "div",
-    {
-      className: (0, import_clsx11.default)(`rounded-full`, className),
-      style: {
-        width: `${size}px`,
-        height: `${size}px`,
-        ...style
-      },
-      ...restProps
+
+// src/hooks/useHoverState.ts
+var import_react8 = require("react");
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
+  const [timer, setTimer] = (0, import_react8.useState)();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
     }
-  );
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  (0, import_react8.useEffect)(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  (0, import_react8.useEffect)(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
 };
 
-// src/components/icons-and-geometry/Ring.tsx
-var import_react8 = require("react");
-var import_clsx12 = __toESM(require("clsx"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Ring = ({
-  innerSize = 20,
-  width = 7,
-  className = "outline-primary"
+// src/components/user-action/Tooltip.tsx
+var import_clsx10 = require("clsx");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const { isHovered, handlers } = useHoverState();
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      className: (0, import_clsx12.default)(`bg-transparent rounded-full outline`, className),
-      style: {
-        width: `${innerSize}px`,
-        height: `${innerSize}px`,
-        outlineWidth: `${width}px`
-      }
+      className: (0, import_clsx10.clsx)("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx10.clsx)(
+              `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
+           animate-tooltip-fade-in shadow-lg bg-tooltip-background`,
+              positionClasses[position],
+              tooltipClassName
+            ),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx10.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex }
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
 };
-var AnimatedRing = ({
-  innerSize,
-  width,
-  className,
-  fillAnimationDuration = 3,
-  repeating = false,
-  onAnimationFinished = noop,
-  style
+
+// src/components/layout-and-navigation/Overlay.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Overlay = ({
+  children,
+  isOpen,
+  onBackgroundClick,
+  backgroundClassName
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react8.useState)(0);
-  const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react8.useCallback)((timestamp, startTime) => {
-    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
-    const newWidth = Math.min(width * progress, width);
-    setCurrentWidth(newWidth);
-    if (progress < 1) {
-      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
-    } else {
-      onAnimationFinished();
-      if (repeating) {
-        setCurrentWidth(0);
-        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
-      }
-    }
-  }, [milliseconds, onAnimationFinished, repeating, width]);
-  (0, import_react8.useEffect)(() => {
-    if (currentWidth < width) {
-      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
-    }
+  const [root, setRoot] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    setRoot(document.body);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
-    {
-      className: "row items-center justify-center",
-      style: {
-        width: `${innerSize + 2 * width}px`,
-        height: `${innerSize + 2 * width}px`,
-        ...style
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        Ring,
+  if (!root || !isOpen) return null;
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_clsx11.default)("fixed inset-0 z-[9999]"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
         {
-          innerSize,
-          width: currentWidth,
-          className
+          className: (0, import_clsx11.default)("fixed inset-0 h-screen w-screen bg-black/30", backgroundClassName),
+          onClick: onBackgroundClick
         }
-      )
-    }
+      ),
+      children
+    ] }),
+    root
   );
 };
-var RingWave = ({
-  startInnerSize = 20,
-  endInnerSize = 30,
-  width,
+var overlayStack = [];
+var defaultModalHeaderTranslation = {
+  en: {
+    close: "Close"
+  },
+  de: {
+    close: "Schlie\xDFen"
+  }
+};
+var OverlayHeader = ({
+  overwriteTranslation,
+  onClose,
+  title,
+  titleText = "",
+  description,
+  descriptionText = ""
+}) => {
+  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  const hasTitleRow = !!title || !!titleText || !!onClose;
+  const titleRow = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
+    title ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "h2",
+      {
+        className: (0, import_clsx11.default)("textstyle-title-lg", {
+          "mb-1": description || descriptionText
+        }),
+        children: titleText
+      }
+    ),
+    !!onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconButton, { color: "neutral", size: "small", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, { className: "w-full h-full" }) }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "col", children: [
+    hasTitleRow && titleRow,
+    description ?? (descriptionText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "textstyle-description", children: descriptionText }))
+  ] });
+};
+var Modal = ({
+  children,
+  isOpen,
+  onClose,
   className,
-  fillAnimationDuration = 3,
-  repeating = false,
-  onAnimationFinished = noop,
-  style
+  backgroundClassName,
+  headerProps
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = (0, import_react8.useState)(startInnerSize);
-  const distance = endInnerSize - startInnerSize;
-  const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react8.useCallback)((timestamp, startTime) => {
-    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
-    const newInnerSize = Math.min(
-      startInnerSize + distance * progress,
-      endInnerSize
+  const ref = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) return;
+    const modal = ref.current;
+    if (!modal) {
+      console.error("modal open, but no ref found");
+      return;
+    }
+    overlayStack.push(modal);
+    const focusable = modal?.querySelectorAll(
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
     );
-    setCurrentInnerSize(newInnerSize);
-    if (progress < 1) {
-      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
-    } else {
-      onAnimationFinished();
-      if (repeating) {
-        setCurrentInnerSize(startInnerSize);
-        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const handleKeyDown = (e) => {
+      const isTopmost = overlayStack[overlayStack.length - 1] === modal;
+      if (!isTopmost) return;
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      } else if (e.key === "Tab") {
+        if (focusable.length === 0) return;
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
       }
+    };
+    modal.focus();
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      overlayStack = overlayStack.filter((m) => m !== modal);
+    };
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Overlay,
+    {
+      isOpen,
+      onBackgroundClick: onClose,
+      backgroundClassName,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "div",
+        {
+          ref,
+          tabIndex: -1,
+          className: (0, import_clsx11.default)(
+            "fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl",
+            className
+          ),
+          role: "dialog",
+          "aria-modal": true,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayHeader, { ...headerProps, onClose }),
+            children
+          ]
+        }
+      )
     }
-  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  (0, import_react8.useEffect)(() => {
-    if (currentInnerSize < endInnerSize) {
-      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+  );
+};
+var Dialog = ({
+  children,
+  isOpen,
+  className,
+  backgroundClassName,
+  headerProps
+}) => {
+  const ref = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) return;
+    const dialog = ref.current;
+    if (!dialog) {
+      console.error("dialog open, but no ref found");
+      return;
     }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
+    overlayStack.push(dialog);
+    const focusable = dialog?.querySelectorAll(
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+    );
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const handleKeyDown = (e) => {
+      const isTopmost = overlayStack[overlayStack.length - 1] === dialog;
+      if (!isTopmost) return;
+      if (e.key === "Escape") {
+        e.stopPropagation();
+      } else if (e.key === "Tab") {
+        if (focusable.length === 0) return;
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    dialog.focus();
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      overlayStack = overlayStack.filter((m) => m !== dialog);
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Overlay,
     {
-      className: "row items-center justify-center",
-      style: {
-        width: `${endInnerSize + 2 * width}px`,
-        height: `${endInnerSize + 2 * width}px`,
-        ...style
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        Ring,
+      isOpen,
+      backgroundClassName,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "div",
         {
-          innerSize: currentInnerSize,
-          width,
-          className
+          ref,
+          tabIndex: -1,
+          className: (0, import_clsx11.default)(
+            "fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl",
+            className
+          ),
+          role: "dialog",
+          "aria-modal": true,
+          children: [
+            !!headerProps && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayHeader, { ...headerProps }),
+            children
+          ]
         }
       )
     }
   );
 };
-var RadialRings = ({
-  circle1ClassName = "bg-primary/90 outline-primary/90",
-  circle2ClassName = "bg-primary/60 outline-primary/60",
-  circle3ClassName = "bg-primary/40 outline-primary/40",
-  waveWidth = 10,
-  waveBaseColor = "outline-white/20",
-  sizeCircle1 = 100,
-  sizeCircle2 = 200,
-  sizeCircle3 = 300
+
+// src/components/dialogs/ConfirmDialog.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var defaultConfirmDialogTranslation = {
+  en: {
+    confirm: "Confirm",
+    decline: "Decline"
+  },
+  de: {
+    confirm: "Best\xE4tigen",
+    decline: "Ablehnen"
+  }
+};
+var ConfirmDialog = ({
+  overwriteTranslation,
+  children,
+  onConfirm,
+  onDecline,
+  confirmType = "positive",
+  buttonOverwrites,
+  className,
+  ...restProps
 }) => {
-  const [currentRing, setCurrentRing] = (0, import_react8.useState)(0);
-  const size = sizeCircle3;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "div",
-    {
-      className: "relative",
-      style: {
-        width: `${sizeCircle3}px`,
-        height: `${sizeCircle3}px`
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Circle,
-          {
-            radius: sizeCircle1 / 2,
-            className: (0, import_clsx12.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`
-            }
-          }
-        ),
-        currentRing === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          AnimatedRing,
-          {
-            innerSize: sizeCircle1,
-            width: (sizeCircle2 - sizeCircle1) / 2,
-            onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
-            repeating: true,
-            className: (0, import_clsx12.default)(
-              circle2ClassName,
-              { "opacity-5": currentRing !== 0 }
-            ),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 9
-            }
-          }
-        ) : null,
-        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          RingWave,
-          {
-            startInnerSize: sizeCircle1 - waveWidth,
-            endInnerSize: sizeCircle2,
-            width: waveWidth,
-            repeating: true,
-            className: (0, import_clsx12.default)(waveBaseColor, `opacity-5`),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 9
-            }
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Circle,
-          {
-            radius: sizeCircle2 / 2,
-            className: (0, import_clsx12.default)(
-              circle2ClassName,
-              { "opacity-20": currentRing < 1 },
-              `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
-            ),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`
-            }
-          }
-        ),
-        currentRing === 1 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          AnimatedRing,
-          {
-            innerSize: sizeCircle2 - 1,
-            width: (sizeCircle3 - sizeCircle2) / 2,
-            onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
-            repeating: true,
-            className: (0, import_clsx12.default)(circle3ClassName),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 7
-            }
-          }
-        ) : null,
-        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          RingWave,
-          {
-            startInnerSize: sizeCircle2,
-            endInnerSize: sizeCircle3 - waveWidth,
-            width: waveWidth,
-            repeating: true,
-            className: (0, import_clsx12.default)(waveBaseColor, `opacity-5`),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 7
-            }
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Circle,
-          {
-            radius: sizeCircle3 / 2,
-            className: (0, import_clsx12.default)(
-              circle3ClassName,
-              { "opacity-20": currentRing < 2 },
-              `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
-            ),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`
-            }
-          }
-        )
-      ]
-    }
-  );
+  const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation);
+  const mapping = {
+    neutral: "primary",
+    negative: "negative",
+    positive: "positive",
+    primary: "primary"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Dialog, { ...restProps, className: (0, import_clsx12.default)("justify-between", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "col grow", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+      onDecline && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        SolidButton,
+        {
+          color: buttonOverwrites?.[0].color ?? "negative",
+          onClick: onDecline,
+          disabled: buttonOverwrites?.[0].disabled ?? false,
+          children: buttonOverwrites?.[0].text ?? translation.decline
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        SolidButton,
+        {
+          autoFocus: true,
+          color: buttonOverwrites?.[1].color ?? mapping[confirmType],
+          onClick: onConfirm,
+          disabled: buttonOverwrites?.[1].disabled ?? false,
+          children: buttonOverwrites?.[1].text ?? translation.confirm
+        }
+      )
+    ] })
+  ] });
 };
 
-// src/components/icons-and-geometry/Tag.tsx
-var import_image3 = __toESM(require("next/image"), 1);
+// src/components/icons-and-geometry/Avatar.tsx
+var import_image2 = __toESM(require("next/image"), 1);
+var import_clsx13 = __toESM(require("clsx"), 1);
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TagIcon = ({
-  className,
-  width = 16,
-  height = 16,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_image3.default,
-    {
-      ...props,
-      width,
-      height,
-      alt: "",
-      src: "https://cdn.helpwave.de/icons/label.png",
-      className
-    }
+var avtarSizeList = ["tiny", "small", "medium", "large"];
+var avatarSizeMapping = {
+  tiny: 24,
+  small: 32,
+  medium: 48,
+  large: 64
+};
+var Avatar = ({ avatarUrl, alt, size = "medium", className = "" }) => {
+  avatarUrl = "https://cdn.helpwave.de/boringavatar.svg";
+  const avtarSize = {
+    tiny: 24,
+    small: 32,
+    medium: 48,
+    large: 64
+  }[size];
+  const style = {
+    width: avtarSize + "px",
+    height: avtarSize + "px",
+    maxWidth: avtarSize + "px",
+    maxHeight: avtarSize + "px",
+    minWidth: avtarSize + "px",
+    minHeight: avtarSize + "px"
+  };
+  return (
+    // TODO transparent or white background later
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_clsx13.default)(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_image2.default,
+      {
+        className: "rounded-full border border-gray-200",
+        style,
+        src: avatarUrl,
+        alt,
+        width: avtarSize,
+        height: avtarSize
+      }
+    ) })
   );
 };
-
-// src/components/layout-and-navigation/BreadCrumb.tsx
-var import_link = __toESM(require("next/link"), 1);
-var import_clsx13 = __toESM(require("clsx"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  const color = "text-description";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx13.default)("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_link.default,
+var AvatarGroup = ({
+  avatars,
+  maxShownProfiles = 5,
+  size = "tiny"
+}) => {
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+  const diameter = avatarSizeMapping[size];
+  const stackingOverlap = 0.5;
+  const notDisplayedProfiles = avatars.length - maxShownProfiles;
+  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "row relative", style: { height: diameter + "px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
       {
-        href: crumb.link,
-        className: (0, import_clsx13.default)(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }),
-        children: crumb.display
+        className: "absolute",
+        style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
+      },
+      index
+    )) }),
+    notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      {
+        className: "truncate row items-center",
+        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+          "+ ",
+          notDisplayedProfiles
+        ] })
       }
-    ),
-    index !== crumbs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: (0, import_clsx13.default)(`px-1`, color), children: "/" })
-  ] }, index)) });
+    )
+  ] });
 };
 
-// src/components/layout-and-navigation/Carousel.tsx
-var import_react9 = require("react");
+// src/components/icons-and-geometry/Circle.tsx
 var import_clsx14 = __toESM(require("clsx"), 1);
-var import_lucide_react3 = require("lucide-react");
-
-// src/util/math.ts
-var clamp = (value, min = 0, max = 1) => {
-  return Math.min(Math.max(value, min), max);
-};
-
-// src/util/easeFunctions.ts
-var EaseFunctions = class _EaseFunctions {
-  static cubicBezierGeneric(x1, y1, x2, y2) {
-    const cx = 3 * x1;
-    const bx = 3 * (x2 - x1) - cx;
-    const ax = 1 - cx - bx;
-    const cy = 3 * y1;
-    const by = 3 * (y2 - y1) - cy;
-    const ay = 1 - cy - by;
-    const x = (t) => ((ax * t + bx) * t + cx) * t;
-    const y = (t) => ((ay * t + by) * t + cy) * t;
-    return {
-      x,
-      y
-    };
-  }
-  static cubicBezier(x1, y1, x2, y2) {
-    const { y } = _EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2);
-    return (t) => {
-      t = clamp(t);
-      return y(t);
-    };
-  }
-  static easeInEaseOut(t) {
-    return _EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t);
-  }
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Circle = ({
+  radius = 20,
+  className = "bg-primary",
+  style,
+  ...restProps
+}) => {
+  const size = radius * 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: (0, import_clsx14.default)(`rounded-full`, className),
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        ...style
+      },
+      ...restProps
+    }
+  );
 };
 
-// src/util/loopingArray.ts
-var LoopingArrayCalculator = class _LoopingArrayCalculator {
-  constructor(length, isLooping = true, allowedOverScroll = 0.1) {
-    if (allowedOverScroll < 0 || length < 1) {
-      throw new Error("Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true");
-    }
-    this.length = length;
-    this.isLooping = isLooping;
-    this.allowedOverScroll = allowedOverScroll;
-  }
-  getCorrectedPosition(position) {
-    if (!this.isLooping) {
-      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position));
-    }
-    if (position >= this.length) {
-      return position % this.length;
-    }
-    if (position < 0) {
-      return this.length - Math.abs(position) % this.length;
-    }
-    return position;
-  }
-  static withoutOffset(position) {
-    return position + _LoopingArrayCalculator.getOffset(position);
-  }
-  static getOffset(position) {
-    return Math.round(position) - position;
-  }
-  /**
-   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)
-   */
-  getDistanceDirectional(position, target, direction) {
-    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {
-      throw new Error("Invalid parameters: position is out of bounds.");
-    }
-    const isForwardInvalid = direction === 1 && position > target;
-    const isBackwardInvalid = direction === -1 && target < position;
-    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {
-      return Infinity;
-    }
-    if (direction === -1) {
-      return this.getDistanceDirectional(target, position, 1);
-    }
-    position = this.getCorrectedPosition(position);
-    target = this.getCorrectedPosition(target);
-    let distance = (target - position) * direction;
-    if (distance < 0) {
-      distance = this.length - Math.abs(position) % this.length + target;
-    }
-    return distance;
-  }
-  getDistanceForward(position, target) {
-    return this.getDistanceDirectional(position, target, 1);
-  }
-  getDistanceBackward(position, target) {
-    return this.getDistanceDirectional(position, target, -1);
-  }
-  getDistance(position, target) {
-    const forwardDistance = this.getDistanceForward(position, target);
-    const backwardDistance = this.getDistanceBackward(position, target);
-    return Math.min(forwardDistance, backwardDistance);
-  }
-  getBestDirection(position, target) {
-    const forwardDistance = this.getDistanceForward(position, target);
-    const backwardDistance = this.getDistanceBackward(position, target);
-    return forwardDistance < backwardDistance ? 1 : -1;
-  }
-};
-
-// src/components/layout-and-navigation/Carousel.tsx
+// src/components/icons-and-geometry/Ring.tsx
+var import_react10 = require("react");
+var import_clsx15 = __toESM(require("clsx"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Carousel = ({
-  children,
-  animationTime = 200,
-  isLooping = false,
-  isAutoLooping = false,
-  autoLoopingTimeOut = 5e3,
-  autoLoopAnimationTime = 500,
-  hintNext = false,
-  arrows = false,
-  dots = true,
-  overScrollThreshold = 0.1,
-  blurColor = "from-white",
-  className = "",
-  heightClassName = "h-[24rem]",
-  widthClassName = "w-[70%] desktop:w-1/2"
+var Ring = ({
+  innerSize = 20,
+  width = 7,
+  className = "outline-primary"
 }) => {
-  if (isAutoLooping && !isLooping) {
-    console.error("When isAutoLooping is true, isLooping should also be true");
-    isLooping = true;
-  }
-  const [{
-    currentPosition,
-    dragState,
-    animationState
-  }, setCarouselInformation] = (0, import_react9.useState)({
-    currentPosition: 0
-  });
-  const animationId = (0, import_react9.useRef)(void 0);
-  const timeOut = (0, import_react9.useRef)(void 0);
-  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
-  const length = children.length;
-  const paddingItemCount = 3;
-  const util = (0, import_react9.useMemo)(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
-  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition));
-  animationTime = Math.max(200, animationTime);
-  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  const getStyleOffset = (index) => {
-    const baseOffset = -50 + (index - currentPosition) * 100;
-    return `${baseOffset}%`;
-  };
-  const animation = (0, import_react9.useCallback)((time) => {
-    let keepAnimating = true;
-    setCarouselInformation((state) => {
-      const {
-        animationState: animationState2,
-        dragState: dragState2
-      } = state;
-      if (animationState2 === void 0 || dragState2 !== void 0) {
-        keepAnimating = false;
-        return state;
-      }
-      if (!animationState2.startTime || !animationState2.lastUpdateTime) {
-        return {
-          ...state,
-          animationState: {
-            ...animationState2,
-            startTime: time,
-            lastUpdateTime: time
-          }
-        };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      className: (0, import_clsx15.default)(`bg-transparent rounded-full outline`, className),
+      style: {
+        width: `${innerSize}px`,
+        height: `${innerSize}px`,
+        outlineWidth: `${width}px`
       }
-      const useAnimationTime = animationState2.isAutoLooping ? autoLoopAnimationTime : animationTime;
-      const progress = clamp((time - animationState2.startTime) / useAnimationTime);
-      const easedProgress = EaseFunctions.easeInEaseOut(progress);
-      const distance = util.getDistanceDirectional(animationState2.startPosition, animationState2.targetPosition, animationState2.direction);
-      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState2.direction + animationState2.startPosition);
-      if (animationState2.targetPosition === newPosition || progress === 1) {
-        keepAnimating = false;
-        return {
-          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),
-          animationState: void 0
-        };
+    }
+  );
+};
+var AnimatedRing = ({
+  innerSize,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentWidth, setCurrentWidth] = (0, import_react10.useState)(0);
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = (0, import_react10.useCallback)((timestamp, startTime) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+    const newWidth = Math.min(width * progress, width);
+    setCurrentWidth(newWidth);
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+    } else {
+      onAnimationFinished();
+      if (repeating) {
+        setCurrentWidth(0);
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
       }
-      return {
-        currentPosition: newPosition,
-        animationState: {
-          ...animationState2,
-          lastUpdateTime: time
-        }
-      };
-    });
-    if (keepAnimating) {
-      animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
-  }, [animationTime, autoLoopAnimationTime, util]);
-  (0, import_react9.useEffect)(() => {
-    if (animationState) {
-      animationId.current = requestAnimationFrame(animation);
+  }, [milliseconds, onAnimationFinished, repeating, width]);
+  (0, import_react10.useEffect)(() => {
+    if (currentWidth < width) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
-    return () => {
-      if (animationId.current) {
-        cancelAnimationFrame(animationId.current);
-        animationId.current = 0;
-      }
-    };
-  }, [animationState]);
-  const startAutoLoop = () => setCarouselInformation((prevState) => ({
-    ...prevState,
-    dragState: prevState.dragState,
-    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {
-      startPosition: currentPosition,
-      targetPosition: (currentPosition + 1) % length,
-      direction: 1,
-      // always move forward
-      isAutoLooping: true
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${innerSize + 2 * width}px`,
+        height: `${innerSize + 2 * width}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Ring,
+        {
+          innerSize,
+          width: currentWidth,
+          className
+        }
+      )
     }
-  }));
-  (0, import_react9.useEffect)(() => {
-    if (!animationId.current && !animationState && !dragState && !timeOut.current) {
-      if (autoLoopingTimeOut > 0) {
-        timeOut.current = setTimeout(() => {
-          startAutoLoop();
-          timeOut.current = void 0;
-        }, autoLoopingTimeOut);
-      } else {
-        startAutoLoop();
+  );
+};
+var RingWave = ({
+  startInnerSize = 20,
+  endInnerSize = 30,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentInnerSize, setCurrentInnerSize] = (0, import_react10.useState)(startInnerSize);
+  const distance = endInnerSize - startInnerSize;
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = (0, import_react10.useCallback)((timestamp, startTime) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+    const newInnerSize = Math.min(
+      startInnerSize + distance * progress,
+      endInnerSize
+    );
+    setCurrentInnerSize(newInnerSize);
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+    } else {
+      onAnimationFinished();
+      if (repeating) {
+        setCurrentInnerSize(startInnerSize);
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
       }
     }
-  }, [animationState, dragState, animationId.current, timeOut.current]);
-  const startAnimation = (targetPosition) => {
-    if (targetPosition === void 0) {
-      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition);
-    }
-    if (targetPosition === currentPosition) {
-      return;
+  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
+  (0, import_react10.useEffect)(() => {
+    if (currentInnerSize < endInnerSize) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
-    const direction = util.getBestDirection(currentPosition, targetPosition);
-    clearTimeout(timeOut.current);
-    timeOut.current = void 0;
-    if (animationId.current) {
-      cancelAnimationFrame(animationId.current);
-      animationId.current = void 0;
-    }
-    setCarouselInformation((prevState) => ({
-      ...prevState,
-      dragState: void 0,
-      animationState: {
-        targetPosition,
-        direction,
-        startPosition: currentPosition,
-        isAutoLooping: false
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${endInnerSize + 2 * width}px`,
+        height: `${endInnerSize + 2 * width}px`,
+        ...style
       },
-      timeOut: void 0
-    }));
-  };
-  const canGoLeft = () => {
-    return isLooping || currentPosition !== 0;
-  };
-  const canGoRight = () => {
-    return isLooping || currentPosition !== length - 1;
-  };
-  const left = () => {
-    if (canGoLeft()) {
-      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1));
-    }
-  };
-  const right = () => {
-    if (canGoRight()) {
-      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length));
-    }
-  };
-  let items = children.map((item, index) => ({
-    index,
-    item
-  }));
-  if (isLooping) {
-    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({
-      index,
-      item
-    }));
-    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({
-      index,
-      item
-    }));
-    items = [
-      ...before,
-      ...items,
-      ...after
-    ];
-  }
-  const onDragStart = (x) => setCarouselInformation((prevState) => ({
-    ...prevState,
-    dragState: {
-      lastX: x,
-      startX: x,
-      startTime: Date.now(),
-      startIndex: currentPosition
-    },
-    animationState: void 0
-    // cancel animation
-  }));
-  const onDrag = (x, width) => {
-    if (!dragState || x === 0) {
-      return;
-    }
-    const offsetUpdate = (dragState.lastX - x) / width;
-    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate);
-    setCarouselInformation((prevState) => ({
-      ...prevState,
-      currentPosition: newPosition,
-      dragState: {
-        ...dragState,
-        lastX: x
-      }
-    }));
-  };
-  const onDragEnd = (x, width) => {
-    if (!dragState) {
-      return;
-    }
-    const distance = dragState.startX - x;
-    const relativeDistance = distance / width;
-    const duration = Date.now() - dragState.startTime;
-    const velocity = distance / (Date.now() - dragState.startTime);
-    const isSlide = Math.abs(velocity) > 2 || duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50);
-    if (isSlide) {
-      if (distance > 0 && canGoRight()) {
-        right();
-        return;
-      } else if (distance < 0 && canGoLeft()) {
-        left();
-        return;
-      }
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Ring,
+        {
+          innerSize: currentInnerSize,
+          width,
+          className
+        }
+      )
     }
-    startAnimation();
-  };
-  const dragHandlers = {
-    draggable: true,
-    onDragStart: (event) => {
-      onDragStart(event.clientX);
-      event.dataTransfer.setDragImage(document.createElement("div"), 0, 0);
-    },
-    onDrag: (event) => onDrag(event.clientX, event.target.getBoundingClientRect().width),
-    onDragEnd: (event) => onDragEnd(event.clientX, event.target.getBoundingClientRect().width),
-    onTouchStart: (event) => onDragStart(event.touches[0].clientX),
-    onTouchMove: (event) => onDrag(event.touches[0].clientX, event.target.getBoundingClientRect().width),
-    onTouchEnd: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width),
-    onTouchCancel: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width)
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "col items-center w-full gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_clsx14.default)(`relative w-full overflow-hidden`, heightClassName, className), children: [
-      arrows && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  );
+};
+var RadialRings = ({
+  circle1ClassName = "bg-primary/90 outline-primary/90",
+  circle2ClassName = "bg-primary/60 outline-primary/60",
+  circle3ClassName = "bg-primary/40 outline-primary/40",
+  waveWidth = 10,
+  waveBaseColor = "outline-white/20",
+  sizeCircle1 = 100,
+  sizeCircle2 = 200,
+  sizeCircle3 = 300
+}) => {
+  const [currentRing, setCurrentRing] = (0, import_react10.useState)(0);
+  const size = sizeCircle3;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: "relative",
+      style: {
+        width: `${sizeCircle3}px`,
+        height: `${sizeCircle3}px`
+      },
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "div",
+          Circle,
           {
-            className: (0, import_clsx14.default)("absolute z-10 left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoLeft() }),
-            onClick: () => left(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.ChevronLeft, { size: 32 })
+            radius: sizeCircle1 / 2,
+            className: (0, import_clsx15.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "div",
+        currentRing === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          AnimatedRing,
           {
-            className: (0, import_clsx14.default)("absolute z-10 right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoRight() }),
-            onClick: () => right(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.ChevronRight, { size: 32 })
+            innerSize: sizeCircle1,
+            width: (sizeCircle2 - sizeCircle1) / 2,
+            onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
+            repeating: true,
+            className: (0, import_clsx15.default)(
+              circle2ClassName,
+              { "opacity-5": currentRing !== 0 }
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
           }
-        )
-      ] }),
-      hintNext ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_clsx14.default)(`relative row h-full`, heightClassName), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
-          item,
-          index
-        }, listIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "div",
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          RingWave,
           {
-            className: (0, import_clsx14.default)(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
-            style: { translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) },
-            ...dragHandlers,
-            onClick: () => startAnimation(index),
-            children: item
-          },
-          listIndex
-        )) }),
+            startInnerSize: sizeCircle1 - waveWidth,
+            endInnerSize: sizeCircle2,
+            width: waveWidth,
+            repeating: true,
+            className: (0, import_clsx15.default)(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "div",
+          Circle,
           {
-            className: (0, import_clsx14.default)(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+            radius: sizeCircle2 / 2,
+            className: (0, import_clsx15.default)(
+              circle2ClassName,
+              { "opacity-20": currentRing < 1 },
+              `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
           }
         ),
+        currentRing === 1 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          AnimatedRing,
+          {
+            innerSize: sizeCircle2 - 1,
+            width: (sizeCircle3 - sizeCircle2) / 2,
+            onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
+            repeating: true,
+            className: (0, import_clsx15.default)(circle3ClassName),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          RingWave,
+          {
+            startInnerSize: sizeCircle2,
+            endInnerSize: sizeCircle3 - waveWidth,
+            width: waveWidth,
+            repeating: true,
+            className: (0, import_clsx15.default)(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "div",
+          Circle,
           {
-            className: (0, import_clsx14.default)(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+            radius: sizeCircle3 / 2,
+            className: (0, import_clsx15.default)(
+              circle3ClassName,
+              { "opacity-20": currentRing < 2 },
+              `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
-    ] }),
-    dots && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
-      {
-        className: "row items-center justify-center w-full my-2",
-        children: range(0, length - 1).map((index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "button",
-          {
-            className: (0, import_clsx14.default)("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] hover:bg-primary hover:brightness-90 first:rounded-l-md last:rounded-r-md", {
-              "bg-gray-200": currentIndex !== index,
-              "bg-primary": currentIndex === index
-            }),
-            onClick: () => startAnimation(index)
-          },
-          index
-        ))
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
-// src/components/layout-and-navigation/Chip.tsx
-var import_clsx15 = __toESM(require("clsx"), 1);
+// src/components/icons-and-geometry/Tag.tsx
+var import_image3 = __toESM(require("next/image"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Chip = ({
-  children,
-  trailingIcon,
-  color = "default",
-  variant = "normal",
-  className = "",
-  ...restProps
+var TagIcon = ({
+  className,
+  width = 16,
+  height = 16,
+  ...props
 }) => {
-  const colorMapping = {
-    default: "text-tag-default-text bg-tag-default-background",
-    dark: "text-tag-dark-text bg-tag-dark-background",
-    red: "text-tag-red-text bg-tag-red-background",
-    yellow: "text-tag-yellow-text bg-tag-yellow-background",
-    green: "text-tag-green-text bg-tag-green-background",
-    blue: "text-tag-blue-text bg-tag-blue-background",
-    pink: "text-tag-pink-text bg-tag-pink-background"
-  }[color];
-  const colorMappingIcon = {
-    default: "text-tag-default-icon",
-    dark: "text-tag-dark-icon",
-    red: "text-tag-red-icon",
-    yellow: "text-tag-yellow-icon",
-    green: "text-tag-green-icon",
-    blue: "text-tag-blue-icon",
-    pink: "text-tag-pink-icon"
-  }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_image3.default,
     {
-      ...restProps,
-      className: (0, import_clsx15.default)(
-        `row w-fit px-2 py-1`,
-        colorMapping,
-        {
-          "rounded-md": variant === "normal",
-          "rounded-full": variant === "fullyRounded"
-        },
-        className
-      ),
-      children: [
-        children,
-        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: colorMappingIcon, children: trailingIcon })
-      ]
+      ...props,
+      width,
+      height,
+      alt: "",
+      src: "https://cdn.helpwave.de/icons/label.png",
+      className
     }
   );
 };
-var ChipList = ({
-  list,
-  className = ""
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_clsx15.default)("flex flex-wrap gap-x-4 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    Chip,
-    {
-      ...value,
-      color: value.color ?? "dark",
-      variant: value.variant ?? "normal",
-      children: value.children
-    },
-    index
-  )) });
-};
 
-// src/components/layout-and-navigation/DividerInserter.tsx
+// src/components/layout-and-navigation/BreadCrumb.tsx
+var import_link = __toESM(require("next/link"), 1);
 var import_clsx16 = __toESM(require("clsx"), 1);
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var DividerInserter = ({
-  children,
-  divider,
-  className,
-  ...restProps
-}) => {
-  const nodes = [];
-  for (let index = 0; index < children.length; index++) {
-    const element = children[index];
-    if (element !== void 0) {
-      nodes.push(element);
-      if (index < children.length - 1) {
-        nodes.push(divider(index));
+var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
+  const color = "text-description";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx16.default)("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_link.default,
+      {
+        href: crumb.link,
+        className: (0, import_clsx16.default)(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }),
+        children: crumb.display
       }
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx16.default)(className), ...restProps, children: nodes });
+    ),
+    index !== crumbs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: (0, import_clsx16.default)(`px-1`, color), children: "/" })
+  ] }, index)) });
 };
 
-// src/components/layout-and-navigation/FAQSection.tsx
+// src/components/layout-and-navigation/Carousel.tsx
+var import_react11 = require("react");
 var import_clsx17 = __toESM(require("clsx"), 1);
 var import_lucide_react4 = require("lucide-react");
 
-// src/components/layout-and-navigation/MarkdownInterpreter.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var astNodeInserterType = ["helpwave", "newline"];
-var ASTNodeInterpreter = ({
-  node,
-  isRoot = false,
-  className = ""
-}) => {
-  switch (node.type) {
-    case "newline":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("br", {});
-    case "text":
-      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className, children: node.text }) : node.text;
-    case "helpwave":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-bold font-space no-underline", children: "helpwave" });
-    case "none":
-      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ASTNodeInterpreter, { node: value }, index)) });
-    case "bold":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("b", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ASTNodeInterpreter, { node: value }, index)) });
-    case "italic":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ASTNodeInterpreter, { node: value }, index)) });
-    case "underline":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("u", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ASTNodeInterpreter, { node: value }, index)) });
-    case "font-space":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "primary":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "secondary":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "warn":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "positive":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "negative":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    default:
-      return null;
+// src/util/math.ts
+var clamp = (value, min = 0, max = 1) => {
+  return Math.min(Math.max(value, min), max);
+};
+
+// src/util/easeFunctions.ts
+var EaseFunctions = class _EaseFunctions {
+  static cubicBezierGeneric(x1, y1, x2, y2) {
+    const cx = 3 * x1;
+    const bx = 3 * (x2 - x1) - cx;
+    const ax = 1 - cx - bx;
+    const cy = 3 * y1;
+    const by = 3 * (y2 - y1) - cy;
+    const ay = 1 - cy - by;
+    const x = (t) => ((ax * t + bx) * t + cx) * t;
+    const y = (t) => ((ay * t + by) * t + cy) * t;
+    return {
+      x,
+      y
+    };
+  }
+  static cubicBezier(x1, y1, x2, y2) {
+    const { y } = _EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2);
+    return (t) => {
+      t = clamp(t);
+      return y(t);
+    };
+  }
+  static easeInEaseOut(t) {
+    return _EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t);
   }
 };
-var modifierIdentifierMapping = [
-  { id: "i", name: "italic" },
-  { id: "b", name: "bold" },
-  { id: "u", name: "underline" },
-  { id: "space", name: "font-space" },
-  { id: "primary", name: "primary" },
-  { id: "secondary", name: "secondary" },
-  { id: "warn", name: "warn" },
-  { id: "positive", name: "positive" },
-  { id: "negative", name: "negative" }
-];
-var inserterIdentifierMapping = [
-  { id: "helpwave", name: "helpwave" },
-  { id: "newline", name: "newline" }
-];
-var parseMarkdown = (text, commandStart = "\\", open = "{", close = "}") => {
-  let start = text.indexOf(commandStart);
-  const children = [];
-  while (text !== "") {
-    if (start === -1) {
-      children.push({
-        type: "text",
-        text
-      });
-      break;
+
+// src/util/loopingArray.ts
+var LoopingArrayCalculator = class _LoopingArrayCalculator {
+  constructor(length, isLooping = true, allowedOverScroll = 0.1) {
+    if (allowedOverScroll < 0 || length < 1) {
+      throw new Error("Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true");
     }
-    children.push(parseMarkdown(text.substring(0, start)));
-    text = text.substring(start);
-    if (text.length <= 1) {
-      children.push({
-        type: "text",
-        text
-      });
-      text = "";
-      continue;
+    this.length = length;
+    this.isLooping = isLooping;
+    this.allowedOverScroll = allowedOverScroll;
+  }
+  getCorrectedPosition(position) {
+    if (!this.isLooping) {
+      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position));
     }
-    const simpleReplace = [commandStart, open, close];
-    if (simpleReplace.some((value) => text[1] === value)) {
-      children.push({
-        type: "text",
-        text: simpleReplace.find((value) => text[1] === value)
-      });
-      text = text.substring(2);
-      start = text.indexOf(commandStart);
-      continue;
-    }
-    const inserter = inserterIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
-    if (inserter) {
-      children.push({
-        type: inserter.name
-      });
-      text = text.substring(inserter.id.length + 1);
-      start = text.indexOf(commandStart);
-      continue;
+    if (position >= this.length) {
+      return position % this.length;
     }
-    const modifier = modifierIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
-    if (modifier) {
-      if (text[modifier.id.length + 1] !== open) {
-        children.push({
-          type: "text",
-          text: text.substring(0, modifier.id.length + 1)
-        });
-        text = text.substring(modifier.id.length + 2);
-        start = text.indexOf(commandStart);
-        continue;
-      }
-      let closing = -1;
-      let index = modifier.id.length + 2;
-      let counter = 1;
-      let escaping = false;
-      while (index < text.length) {
-        if (text[index] === open && !escaping) {
-          counter++;
-        }
-        if (text[index] === close && !escaping) {
-          counter--;
-          if (counter === 0) {
-            closing = index;
-            break;
-          }
-        }
-        escaping = text[index] === commandStart;
-        index++;
-      }
-      if (closing !== -1) {
-        children.push({
-          type: modifier.name,
-          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]
-        });
-        text = text.substring(closing + 1);
-        start = text.indexOf(commandStart);
-        continue;
-      }
+    if (position < 0) {
+      return this.length - Math.abs(position) % this.length;
     }
-    children.push({
-      type: "text",
-      text: text[0]
-    });
-    text = text.substring(1);
-    start = text.indexOf(commandStart);
-  }
-  return {
-    type: "none",
-    children
-  };
-};
-var optimizeTree = (node) => {
-  if (node.type === "text") {
-    return !node.text ? void 0 : node;
-  }
-  if (astNodeInserterType.some((value) => value === node.type)) {
-    return node;
-  }
-  const currentNode = node;
-  if (currentNode.children.length === 0) {
-    return void 0;
+    return position;
   }
-  let children = [];
-  for (let i = 0; i < currentNode.children.length; i++) {
-    const child = optimizeTree(currentNode.children[i]);
-    if (!child) {
-      continue;
-    }
-    if (child.type === "none") {
-      children.push(...child.children);
-    } else {
-      children.push(child);
-    }
+  static withoutOffset(position) {
+    return position + _LoopingArrayCalculator.getOffset(position);
   }
-  currentNode.children = children;
-  children = [];
-  for (let i = 0; i < currentNode.children.length; i++) {
-    const child = currentNode.children[i];
-    if (child) {
-      if (child.type === "text" && children[children.length - 1]?.type === "text") {
-        children[children.length - 1].text += child.text;
-      } else {
-        children.push(child);
-      }
-    }
+  static getOffset(position) {
+    return Math.round(position) - position;
   }
-  currentNode.children = children;
-  return currentNode;
-};
-var MarkdownInterpreter = ({ text, className }) => {
-  const tree = parseMarkdown(text);
-  const optimizedTree = optimizeTree(tree);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
-};
-
-// src/components/layout-and-navigation/FAQSection.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var FAQSection = ({
-  entries,
-  expandableClassName
-}) => {
-  const chevronSize = 28;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    Expandable,
-    {
-      ...restProps,
-      label: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { id, className: "textstyle-title-md", children: title }),
-      clickOnlyOnHeader: false,
-      icon: (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ChevronUp, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ChevronDown, { size: chevronSize, className: "text-primary" }),
-      className: (0, import_clsx17.default)("rounded-xl", expandableClassName),
-      headerClassName: "px-6 py-4",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-2 px-6 pb-4", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
-    },
-    id
-  )) });
-};
-
-// src/components/layout-and-navigation/Overlay.tsx
-var import_react11 = require("react");
-var import_react_dom = __toESM(require("react-dom"), 1);
-var import_clsx19 = __toESM(require("clsx"), 1);
-
-// src/hooks/useHoverState.ts
-var import_react10 = require("react");
-var defaultUseHoverStateProps = {
-  closingDelay: 200,
-  isDisabled: false
-};
-var useHoverState = (props = void 0) => {
-  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react10.useState)(false);
-  const [timer, setTimer] = (0, import_react10.useState)();
-  const onMouseEnter = () => {
-    if (isDisabled) {
-      return;
+  /**
+   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)
+   */
+  getDistanceDirectional(position, target, direction) {
+    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {
+      throw new Error("Invalid parameters: position is out of bounds.");
     }
-    clearTimeout(timer);
-    setIsHovered(true);
-  };
-  const onMouseLeave = () => {
-    if (isDisabled) {
-      return;
+    const isForwardInvalid = direction === 1 && position > target;
+    const isBackwardInvalid = direction === -1 && target < position;
+    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {
+      return Infinity;
     }
-    setTimer(setTimeout(() => {
-      setIsHovered(false);
-    }, closingDelay));
-  };
-  (0, import_react10.useEffect)(() => {
-    if (timer) {
-      return () => {
-        clearTimeout(timer);
-      };
+    if (direction === -1) {
+      return this.getDistanceDirectional(target, position, 1);
     }
-  });
-  (0, import_react10.useEffect)(() => {
-    if (timer) {
-      clearTimeout(timer);
+    position = this.getCorrectedPosition(position);
+    target = this.getCorrectedPosition(target);
+    let distance = (target - position) * direction;
+    if (distance < 0) {
+      distance = this.length - Math.abs(position) % this.length + target;
     }
-  }, [isDisabled]);
-  return {
-    isHovered,
-    setIsHovered,
-    handlers: { onMouseEnter, onMouseLeave }
-  };
+    return distance;
+  }
+  getDistanceForward(position, target) {
+    return this.getDistanceDirectional(position, target, 1);
+  }
+  getDistanceBackward(position, target) {
+    return this.getDistanceDirectional(position, target, -1);
+  }
+  getDistance(position, target) {
+    const forwardDistance = this.getDistanceForward(position, target);
+    const backwardDistance = this.getDistanceBackward(position, target);
+    return Math.min(forwardDistance, backwardDistance);
+  }
+  getBestDirection(position, target) {
+    const forwardDistance = this.getDistanceForward(position, target);
+    const backwardDistance = this.getDistanceBackward(position, target);
+    return forwardDistance < backwardDistance ? 1 : -1;
+  }
 };
 
-// src/components/user-action/Tooltip.tsx
-var import_clsx18 = require("clsx");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Tooltip = ({
-  tooltip,
+// src/components/layout-and-navigation/Carousel.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Carousel = ({
   children,
-  animationDelay = 650,
-  tooltipClassName = "",
-  containerClassName = "",
-  position = "bottom",
-  zIndex = 10
+  animationTime = 200,
+  isLooping = false,
+  isAutoLooping = false,
+  autoLoopingTimeOut = 5e3,
+  autoLoopAnimationTime = 500,
+  hintNext = false,
+  arrows = false,
+  dots = true,
+  overScrollThreshold = 0.1,
+  blurColor = "from-white",
+  className = "",
+  heightClassName = "h-[24rem]",
+  widthClassName = "w-[70%] desktop:w-1/2"
 }) => {
-  const { isHovered, handlers } = useHoverState();
-  const positionClasses = {
-    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
-    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
-    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
-    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  if (isAutoLooping && !isLooping) {
+    console.error("When isAutoLooping is true, isLooping should also be true");
+    isLooping = true;
+  }
+  const [{
+    currentPosition,
+    dragState,
+    animationState
+  }, setCarouselInformation] = (0, import_react11.useState)({
+    currentPosition: 0
+  });
+  const animationId = (0, import_react11.useRef)(void 0);
+  const timeOut = (0, import_react11.useRef)(void 0);
+  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
+  const length = children.length;
+  const paddingItemCount = 3;
+  const util = (0, import_react11.useMemo)(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
+  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition));
+  animationTime = Math.max(200, animationTime);
+  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
+  const getStyleOffset = (index) => {
+    const baseOffset = -50 + (index - currentPosition) * 100;
+    return `${baseOffset}%`;
   };
-  const triangleSize = 6;
-  const triangleClasses = {
-    top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
-    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
-    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
-    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
-  };
-  const triangleStyle = {
-    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
-    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
-    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
-    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx18.clsx)("relative inline-block", containerClassName),
-      ...handlers,
-      children: [
-        children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx18.clsx)(
-              `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
-           animate-tooltip-fade-in shadow-lg bg-tooltip-background`,
-              positionClasses[position],
-              tooltipClassName
-            ),
-            style: { zIndex, animationDelay: animationDelay + "ms" },
-            children: [
-              tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                "div",
-                {
-                  className: (0, import_clsx18.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex }
-                }
-              )
-            ]
+  const animation = (0, import_react11.useCallback)((time) => {
+    let keepAnimating = true;
+    setCarouselInformation((state) => {
+      const {
+        animationState: animationState2,
+        dragState: dragState2
+      } = state;
+      if (animationState2 === void 0 || dragState2 !== void 0) {
+        keepAnimating = false;
+        return state;
+      }
+      if (!animationState2.startTime || !animationState2.lastUpdateTime) {
+        return {
+          ...state,
+          animationState: {
+            ...animationState2,
+            startTime: time,
+            lastUpdateTime: time
           }
-        )
-      ]
+        };
+      }
+      const useAnimationTime = animationState2.isAutoLooping ? autoLoopAnimationTime : animationTime;
+      const progress = clamp((time - animationState2.startTime) / useAnimationTime);
+      const easedProgress = EaseFunctions.easeInEaseOut(progress);
+      const distance = util.getDistanceDirectional(animationState2.startPosition, animationState2.targetPosition, animationState2.direction);
+      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState2.direction + animationState2.startPosition);
+      if (animationState2.targetPosition === newPosition || progress === 1) {
+        keepAnimating = false;
+        return {
+          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),
+          animationState: void 0
+        };
+      }
+      return {
+        currentPosition: newPosition,
+        animationState: {
+          ...animationState2,
+          lastUpdateTime: time
+        }
+      };
+    });
+    if (keepAnimating) {
+      animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
-  );
-};
-
-// src/components/layout-and-navigation/Overlay.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Overlay = ({
-  children,
-  isOpen,
-  onBackgroundClick,
-  backgroundClassName
-}) => {
-  const [root, setRoot] = (0, import_react11.useState)();
+  }, [animationTime, autoLoopAnimationTime, util]);
   (0, import_react11.useEffect)(() => {
-    setRoot(document.body);
-  }, []);
-  if (!root || !isOpen) return null;
-  return import_react_dom.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_clsx19.default)("fixed inset-0 z-[9999]"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        "div",
-        {
-          className: (0, import_clsx19.default)("fixed inset-0 h-screen w-screen bg-black/30", backgroundClassName),
-          onClick: onBackgroundClick
-        }
-      ),
-      children
-    ] }),
-    root
-  );
-};
-var overlayStack = [];
-var defaultModalHeaderTranslation = {
-  en: {
-    close: "Close"
-  },
-  de: {
-    close: "Schlie\xDFen"
-  }
-};
-var ModalHeader = ({
-  overwriteTranslation,
-  onCloseClick,
-  title,
-  titleText = "",
-  description,
-  descriptionText = ""
-}) => {
-  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
-  const hasTitleRow = !!title || !!titleText || !!onCloseClick;
-  const titleRow = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
-    title ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "h2",
-      {
-        className: (0, import_clsx19.default)("textstyle-title-lg", {
-          "mb-1": description || descriptionText
-        }),
-        children: titleText
+    if (animationState) {
+      animationId.current = requestAnimationFrame(animation);
+    }
+    return () => {
+      if (animationId.current) {
+        cancelAnimationFrame(animationId.current);
+        animationId.current = 0;
       }
-    ),
-    !!onCloseClick && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { color: "neutral", size: "small", onClick: onCloseClick, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react5.X, { className: "w-full h-full" }) }) })
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "col", children: [
-    hasTitleRow && titleRow,
-    description ?? (descriptionText && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "textstyle-description", children: descriptionText }))
-  ] });
-};
-var Modal = ({
-  children,
-  isOpen,
-  onClose,
-  className,
-  backgroundClassName,
-  headerProps
-}) => {
-  const ref = (0, import_react11.useRef)(null);
+    };
+  }, [animationState]);
+  const startAutoLoop = () => setCarouselInformation((prevState) => ({
+    ...prevState,
+    dragState: prevState.dragState,
+    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {
+      startPosition: currentPosition,
+      targetPosition: (currentPosition + 1) % length,
+      direction: 1,
+      // always move forward
+      isAutoLooping: true
+    }
+  }));
   (0, import_react11.useEffect)(() => {
-    if (!isOpen) return;
-    const modal = ref.current;
-    if (!modal) {
-      console.error("modal open, but no ref found");
+    if (!animationId.current && !animationState && !dragState && !timeOut.current) {
+      if (autoLoopingTimeOut > 0) {
+        timeOut.current = setTimeout(() => {
+          startAutoLoop();
+          timeOut.current = void 0;
+        }, autoLoopingTimeOut);
+      } else {
+        startAutoLoop();
+      }
+    }
+  }, [animationState, dragState, animationId.current, timeOut.current]);
+  const startAnimation = (targetPosition) => {
+    if (targetPosition === void 0) {
+      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition);
+    }
+    if (targetPosition === currentPosition) {
       return;
     }
-    overlayStack.push(modal);
-    const focusable = modal?.querySelectorAll(
-      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
-    );
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    const handleKeyDown = (e) => {
-      const isTopmost = overlayStack[overlayStack.length - 1] === modal;
-      if (!isTopmost) return;
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        onClose();
-      } else if (e.key === "Tab") {
-        if (focusable.length === 0) return;
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    modal.focus();
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      overlayStack = overlayStack.filter((m) => m !== modal);
-    };
-  }, [isOpen, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Overlay,
-    {
-      isOpen,
-      onBackgroundClick: onClose,
-      backgroundClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-        "div",
-        {
-          ref,
-          tabIndex: -1,
-          className: (0, import_clsx19.default)(
-            "fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl",
-            className
-          ),
-          role: "dialog",
-          "aria-modal": true,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ModalHeader, { ...headerProps, onCloseClick: onClose }),
-            children
-          ]
-        }
-      )
+    const direction = util.getBestDirection(currentPosition, targetPosition);
+    clearTimeout(timeOut.current);
+    timeOut.current = void 0;
+    if (animationId.current) {
+      cancelAnimationFrame(animationId.current);
+      animationId.current = void 0;
+    }
+    setCarouselInformation((prevState) => ({
+      ...prevState,
+      dragState: void 0,
+      animationState: {
+        targetPosition,
+        direction,
+        startPosition: currentPosition,
+        isAutoLooping: false
+      },
+      timeOut: void 0
+    }));
+  };
+  const canGoLeft = () => {
+    return isLooping || currentPosition !== 0;
+  };
+  const canGoRight = () => {
+    return isLooping || currentPosition !== length - 1;
+  };
+  const left = () => {
+    if (canGoLeft()) {
+      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1));
+    }
+  };
+  const right = () => {
+    if (canGoRight()) {
+      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length));
+    }
+  };
+  let items = children.map((item, index) => ({
+    index,
+    item
+  }));
+  if (isLooping) {
+    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({
+      index,
+      item
+    }));
+    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({
+      index,
+      item
+    }));
+    items = [
+      ...before,
+      ...items,
+      ...after
+    ];
+  }
+  const onDragStart = (x) => setCarouselInformation((prevState) => ({
+    ...prevState,
+    dragState: {
+      lastX: x,
+      startX: x,
+      startTime: Date.now(),
+      startIndex: currentPosition
+    },
+    animationState: void 0
+    // cancel animation
+  }));
+  const onDrag = (x, width) => {
+    if (!dragState || x === 0) {
+      return;
+    }
+    const offsetUpdate = (dragState.lastX - x) / width;
+    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate);
+    setCarouselInformation((prevState) => ({
+      ...prevState,
+      currentPosition: newPosition,
+      dragState: {
+        ...dragState,
+        lastX: x
+      }
+    }));
+  };
+  const onDragEnd = (x, width) => {
+    if (!dragState) {
+      return;
+    }
+    const distance = dragState.startX - x;
+    const relativeDistance = distance / width;
+    const duration = Date.now() - dragState.startTime;
+    const velocity = distance / (Date.now() - dragState.startTime);
+    const isSlide = Math.abs(velocity) > 2 || duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50);
+    if (isSlide) {
+      if (distance > 0 && canGoRight()) {
+        right();
+        return;
+      } else if (distance < 0 && canGoLeft()) {
+        left();
+        return;
+      }
+    }
+    startAnimation();
+  };
+  const dragHandlers = {
+    draggable: true,
+    onDragStart: (event) => {
+      onDragStart(event.clientX);
+      event.dataTransfer.setDragImage(document.createElement("div"), 0, 0);
+    },
+    onDrag: (event) => onDrag(event.clientX, event.target.getBoundingClientRect().width),
+    onDragEnd: (event) => onDragEnd(event.clientX, event.target.getBoundingClientRect().width),
+    onTouchStart: (event) => onDragStart(event.touches[0].clientX),
+    onTouchMove: (event) => onDrag(event.touches[0].clientX, event.target.getBoundingClientRect().width),
+    onTouchEnd: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width),
+    onTouchCancel: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "col items-center w-full gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_clsx17.default)(`relative w-full overflow-hidden`, heightClassName, className), children: [
+      arrows && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: (0, import_clsx17.default)("absolute z-10 left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoLeft() }),
+            onClick: () => left(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react4.ChevronLeft, { size: 32 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: (0, import_clsx17.default)("absolute z-10 right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoRight() }),
+            onClick: () => right(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react4.ChevronRight, { size: 32 })
+          }
+        )
+      ] }),
+      hintNext ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_clsx17.default)(`relative row h-full`, heightClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
+          item,
+          index
+        }, listIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: (0, import_clsx17.default)(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
+            style: { translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) },
+            ...dragHandlers,
+            onClick: () => startAnimation(index),
+            children: item
+          },
+          listIndex
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: (0, import_clsx17.default)(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: (0, import_clsx17.default)(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: (0, import_clsx17.default)("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
+    ] }),
+    dots && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        className: "row items-center justify-center w-full my-2",
+        children: range(0, length - 1).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] hover:bg-primary hover:brightness-90 first:rounded-l-md last:rounded-r-md", {
+              "bg-gray-200": currentIndex !== index,
+              "bg-primary": currentIndex === index
+            }),
+            onClick: () => startAnimation(index)
+          },
+          index
+        ))
+      }
+    )
+  ] });
+};
+
+// src/components/layout-and-navigation/Chip.tsx
+var import_clsx18 = __toESM(require("clsx"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Chip = ({
+  children,
+  trailingIcon,
+  color = "default",
+  variant = "normal",
+  className = "",
+  ...restProps
+}) => {
+  const colorMapping = {
+    default: "text-tag-default-text bg-tag-default-background",
+    dark: "text-tag-dark-text bg-tag-dark-background",
+    red: "text-tag-red-text bg-tag-red-background",
+    yellow: "text-tag-yellow-text bg-tag-yellow-background",
+    green: "text-tag-green-text bg-tag-green-background",
+    blue: "text-tag-blue-text bg-tag-blue-background",
+    pink: "text-tag-pink-text bg-tag-pink-background"
+  }[color];
+  const colorMappingIcon = {
+    default: "text-tag-default-icon",
+    dark: "text-tag-dark-icon",
+    red: "text-tag-red-icon",
+    yellow: "text-tag-yellow-icon",
+    green: "text-tag-green-icon",
+    blue: "text-tag-blue-icon",
+    pink: "text-tag-pink-icon"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      ...restProps,
+      className: (0, import_clsx18.default)(
+        `row w-fit px-2 py-1`,
+        colorMapping,
+        {
+          "rounded-md": variant === "normal",
+          "rounded-full": variant === "fullyRounded"
+        },
+        className
+      ),
+      children: [
+        children,
+        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: colorMappingIcon, children: trailingIcon })
+      ]
+    }
+  );
+};
+var ChipList = ({
+  list,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx18.default)("flex flex-wrap gap-x-4 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Chip,
+    {
+      ...value,
+      color: value.color ?? "dark",
+      variant: value.variant ?? "normal",
+      children: value.children
+    },
+    index
+  )) });
+};
+
+// src/components/layout-and-navigation/DividerInserter.tsx
+var import_clsx19 = __toESM(require("clsx"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DividerInserter = ({
+  children,
+  divider,
+  className,
+  ...restProps
+}) => {
+  const nodes = [];
+  for (let index = 0; index < children.length; index++) {
+    const element = children[index];
+    if (element !== void 0) {
+      nodes.push(element);
+      if (index < children.length - 1) {
+        nodes.push(divider(index));
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx19.default)(className), ...restProps, children: nodes });
+};
+
+// src/components/layout-and-navigation/FAQSection.tsx
+var import_clsx20 = __toESM(require("clsx"), 1);
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/layout-and-navigation/MarkdownInterpreter.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var astNodeInserterType = ["helpwave", "newline"];
+var ASTNodeInterpreter = ({
+  node,
+  isRoot = false,
+  className = ""
+}) => {
+  switch (node.type) {
+    case "newline":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("br", {});
+    case "text":
+      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className, children: node.text }) : node.text;
+    case "helpwave":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-bold font-space no-underline", children: "helpwave" });
+    case "none":
+      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+    case "bold":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("b", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+    case "italic":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+    case "underline":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("u", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+    case "font-space":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "primary":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "secondary":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "warn":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "positive":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "negative":
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    default:
+      return null;
+  }
+};
+var modifierIdentifierMapping = [
+  { id: "i", name: "italic" },
+  { id: "b", name: "bold" },
+  { id: "u", name: "underline" },
+  { id: "space", name: "font-space" },
+  { id: "primary", name: "primary" },
+  { id: "secondary", name: "secondary" },
+  { id: "warn", name: "warn" },
+  { id: "positive", name: "positive" },
+  { id: "negative", name: "negative" }
+];
+var inserterIdentifierMapping = [
+  { id: "helpwave", name: "helpwave" },
+  { id: "newline", name: "newline" }
+];
+var parseMarkdown = (text, commandStart = "\\", open = "{", close = "}") => {
+  let start = text.indexOf(commandStart);
+  const children = [];
+  while (text !== "") {
+    if (start === -1) {
+      children.push({
+        type: "text",
+        text
+      });
+      break;
+    }
+    children.push(parseMarkdown(text.substring(0, start)));
+    text = text.substring(start);
+    if (text.length <= 1) {
+      children.push({
+        type: "text",
+        text
+      });
+      text = "";
+      continue;
+    }
+    const simpleReplace = [commandStart, open, close];
+    if (simpleReplace.some((value) => text[1] === value)) {
+      children.push({
+        type: "text",
+        text: simpleReplace.find((value) => text[1] === value)
+      });
+      text = text.substring(2);
+      start = text.indexOf(commandStart);
+      continue;
+    }
+    const inserter = inserterIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
+    if (inserter) {
+      children.push({
+        type: inserter.name
+      });
+      text = text.substring(inserter.id.length + 1);
+      start = text.indexOf(commandStart);
+      continue;
+    }
+    const modifier = modifierIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
+    if (modifier) {
+      if (text[modifier.id.length + 1] !== open) {
+        children.push({
+          type: "text",
+          text: text.substring(0, modifier.id.length + 1)
+        });
+        text = text.substring(modifier.id.length + 2);
+        start = text.indexOf(commandStart);
+        continue;
+      }
+      let closing = -1;
+      let index = modifier.id.length + 2;
+      let counter = 1;
+      let escaping = false;
+      while (index < text.length) {
+        if (text[index] === open && !escaping) {
+          counter++;
+        }
+        if (text[index] === close && !escaping) {
+          counter--;
+          if (counter === 0) {
+            closing = index;
+            break;
+          }
+        }
+        escaping = text[index] === commandStart;
+        index++;
+      }
+      if (closing !== -1) {
+        children.push({
+          type: modifier.name,
+          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]
+        });
+        text = text.substring(closing + 1);
+        start = text.indexOf(commandStart);
+        continue;
+      }
+    }
+    children.push({
+      type: "text",
+      text: text[0]
+    });
+    text = text.substring(1);
+    start = text.indexOf(commandStart);
+  }
+  return {
+    type: "none",
+    children
+  };
+};
+var optimizeTree = (node) => {
+  if (node.type === "text") {
+    return !node.text ? void 0 : node;
+  }
+  if (astNodeInserterType.some((value) => value === node.type)) {
+    return node;
+  }
+  const currentNode = node;
+  if (currentNode.children.length === 0) {
+    return void 0;
+  }
+  let children = [];
+  for (let i = 0; i < currentNode.children.length; i++) {
+    const child = optimizeTree(currentNode.children[i]);
+    if (!child) {
+      continue;
     }
-  );
-};
-var Dialog = ({
-  children,
-  isOpen,
-  className,
-  backgroundClassName,
-  title,
-  titleText
-}) => {
-  const ref = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
-    if (!isOpen) return;
-    const dialog = ref.current;
-    if (!dialog) {
-      console.error("dialog open, but no ref found");
-      return;
+    if (child.type === "none") {
+      children.push(...child.children);
+    } else {
+      children.push(child);
     }
-    overlayStack.push(dialog);
-    const focusable = dialog?.querySelectorAll(
-      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
-    );
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    const handleKeyDown = (e) => {
-      const isTopmost = overlayStack[overlayStack.length - 1] === dialog;
-      if (!isTopmost) return;
-      if (e.key === "Escape") {
-        e.stopPropagation();
-      } else if (e.key === "Tab") {
-        if (focusable.length === 0) return;
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
+  }
+  currentNode.children = children;
+  children = [];
+  for (let i = 0; i < currentNode.children.length; i++) {
+    const child = currentNode.children[i];
+    if (child) {
+      if (child.type === "text" && children[children.length - 1]?.type === "text") {
+        children[children.length - 1].text += child.text;
+      } else {
+        children.push(child);
       }
-    };
-    dialog.focus();
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      overlayStack = overlayStack.filter((m) => m !== dialog);
-    };
-  }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Overlay,
-    {
-      isOpen,
-      backgroundClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-        "div",
-        {
-          ref,
-          tabIndex: -1,
-          className: (0, import_clsx19.default)(
-            "fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl",
-            className
-          ),
-          role: "dialog",
-          "aria-modal": true,
-          children: [
-            title ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "h2",
-              {
-                className: (0, import_clsx19.default)("textstyle-title-lg"),
-                children: titleText
-              }
-            ),
-            children
-          ]
-        }
-      )
     }
-  );
+  }
+  currentNode.children = children;
+  return currentNode;
+};
+var MarkdownInterpreter = ({ text, className }) => {
+  const tree = parseMarkdown(text);
+  const optimizedTree = optimizeTree(tree);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
+};
+
+// src/components/layout-and-navigation/FAQSection.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var FAQSection = ({
+  entries,
+  expandableClassName
+}) => {
+  const chevronSize = 28;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    Expandable,
+    {
+      ...restProps,
+      label: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { id, className: "textstyle-title-md", children: title }),
+      clickOnlyOnHeader: false,
+      icon: (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react5.ChevronUp, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react5.ChevronDown, { size: chevronSize, className: "text-primary" }),
+      className: (0, import_clsx20.default)("rounded-xl", expandableClassName),
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
+    },
+    id
+  )) });
 };
 
 // src/components/layout-and-navigation/Pagination.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_clsx20 = __toESM(require("clsx"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_clsx21 = __toESM(require("clsx"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var defaultPaginationTranslations = {
   en: {
     of: "of"
@@ -3034,23 +3094,23 @@ var Pagination = ({
   const noPages = numberOfPages === 0;
   const onFirstPage = page === 0 && !noPages;
   const onLastPage = page === numberOfPages - 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: (0, import_clsx20.default)("row", { "opacity-30": noPages }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react6.ChevronFirst, { className: (0, import_clsx20.default)({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react6.ChevronLeft, { className: (0, import_clsx20.default)({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-[80px] justify-center mx-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "select-none mx-2", children: translation.of }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "select-none text-left flex-1", children: numberOfPages })
+  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_react6.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_react6.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_runtime24.jsx)("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react6.ChevronRight, { className: (0, import_clsx20.default)({ "opacity-30": onLastPage }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react6.ChevronLast, { className: (0, import_clsx20.default)({ "opacity-30": onLastPage }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.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_react6.ChevronLast, { className: (0, import_clsx21.default)({ "opacity-30": onLastPage }) }) })
   ] });
 };
 
 // src/components/layout-and-navigation/SearchableList.tsx
 var import_react14 = require("react");
 var import_lucide_react7 = require("lucide-react");
-var import_clsx23 = __toESM(require("clsx"), 1);
+var import_clsx24 = __toESM(require("clsx"), 1);
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -3074,7 +3134,7 @@ var SimpleSearch = (search, objects) => {
 
 // src/components/user-action/Input.tsx
 var import_react13 = require("react");
-var import_clsx22 = __toESM(require("clsx"), 1);
+var import_clsx23 = __toESM(require("clsx"), 1);
 
 // src/hooks/useSaveDelay.ts
 var import_react12 = require("react");
@@ -3117,8 +3177,8 @@ function useSaveDelay(setNotificationStatus, delay) {
 }
 
 // src/components/user-action/Label.tsx
-var import_clsx21 = __toESM(require("clsx"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_clsx22 = __toESM(require("clsx"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var styleMapping = {
   labelSmall: "textstyle-label-sm",
   labelMedium: "textstyle-label-md",
@@ -3131,11 +3191,11 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { ...props, className: (0, import_clsx21.default)(styleMapping[labelType], className), children: children ? children : name });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { ...props, className: (0, import_clsx22.default)(styleMapping[labelType], className), children: children ? children : name });
 };
 
 // src/components/user-action/Input.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Input = ({
   id,
   type = "text",
@@ -3161,9 +3221,9 @@ var Input = ({
       ref.current?.focus();
     }
   }, [autoFocus]);
-  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)(
+  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)(
       "input",
       {
         ref,
@@ -3202,7 +3262,7 @@ var InputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = (0, import_react13.useState)(defaultValue);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Input,
     {
       ...props,
@@ -3225,13 +3285,13 @@ var FormInput = (0, import_react13.forwardRef)(function FormInput2({
   required,
   ...restProps
 }, ref) {
-  const input = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const input = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "input",
     {
       ref,
       id,
       ...restProps,
-      className: (0, import_clsx22.default)(
+      className: (0, import_clsx23.default)(
         {
           "focus:border-primary focus:ring-primary": !errorText,
           "focus:border-negative focus:ring-negative text-negative": !!errorText
@@ -3240,18 +3300,18 @@ var FormInput = (0, import_react13.forwardRef)(function FormInput2({
       )
     }
   );
-  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: [
+  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: [
       labelText,
-      required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-primary font-bold", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-primary font-bold", children: "*" })
     ] }),
     input,
-    errorText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: id, className: (0, import_clsx22.default)("text-negative", errorClassName), children: errorText })
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { htmlFor: id, className: (0, import_clsx23.default)("text-negative", errorClassName), children: errorText })
   ] });
 });
 
 // src/components/layout-and-navigation/SearchableList.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultSearchableListTranslation = {
   en: {
     search: "Search",
@@ -3274,20 +3334,20 @@ var SearchableList = ({
   const [search, setSearch] = (0, import_react14.useState)(initialSearch);
   (0, import_react14.useEffect)(() => setSearch(initialSearch), [initialSearch]);
   const filteredEntries = (0, import_react14.useMemo)(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_clsx23.default)("col gap-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "row justify-between gap-x-2 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Input, { value: search, onChangeText: setSearch, placeholder: translation.search }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.Search, { size: 20 })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx24.default)("col gap-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "row justify-between gap-x-2 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Input, { value: search, onChangeText: setSearch, placeholder: translation.search }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.Search, { size: 20 })
     ] }),
-    filteredEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) }),
-    !filteredEntries.length && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "row justify-center", children: translation.nothingFound })
+    filteredEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) }),
+    !filteredEntries.length && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "row justify-center", children: translation.nothingFound })
   ] });
 };
 
 // src/components/layout-and-navigation/StepperBar.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx24 = __toESM(require("clsx"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_clsx25 = __toESM(require("clsx"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultStepperBarTranslation = {
   en: {
     back: "Back",
@@ -3315,12 +3375,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ step: newStep, seenSteps, lastStep });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
-      className: (0, import_clsx24.default)("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
+      className: (0, import_clsx25.default)("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           SolidButton,
           {
             disabled: step === 0,
@@ -3329,18 +3389,18 @@ var StepperBar = ({
             },
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.ChevronLeft, { size: 14 }),
               translation.back
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx24.default)(
+              className: (0, import_clsx25.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-primary hover:brightness-75": index === step && seen,
@@ -3356,25 +3416,25 @@ var StepperBar = ({
             index
           );
         }) }),
-        step !== lastStep && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        step !== lastStep && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           SolidButton,
           {
             onClick: () => update(step + 1),
             className: "row gap-x-1 items-center justify-center",
             children: [
               translation.next,
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        step === lastStep && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        step === lastStep && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           SolidButton,
           {
             disabled: false,
             onClick: onFinish,
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.Check, { size: 14 }),
               translation.confirm
             ]
           }
@@ -3392,8 +3452,8 @@ var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 var import_react15 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react9 = require("lucide-react");
-var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
   small: "size-4",
   medium: "size-6",
@@ -3429,31 +3489,31 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_clsx25.default)("row justify-center items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  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_clsx25.default)(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
+        className: (0, import_clsx26.default)(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
           "text-disabled-text border-disabled-text": disabled,
           "border-on-background": !disabled,
           "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
           "hover:border-gray-400 focus:hover:border-primary": !checked
         }, className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.Check, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.Minus, { className: innerIconSize })
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react9.Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react9.Minus, { className: innerIconSize })
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Label,
       {
         ...label,
-        className: (0, import_clsx25.default)("cursor-pointer", label.className),
+        className: (0, import_clsx26.default)("cursor-pointer", label.className),
         htmlFor: id,
         onClick: changeValue
       }
@@ -3476,7 +3536,7 @@ var CheckboxUncontrolled = ({
     }
     setChecked(checked2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Checkbox,
     {
       ...props,
@@ -3487,9 +3547,9 @@ var CheckboxUncontrolled = ({
 };
 
 // src/components/layout-and-navigation/Table.tsx
-var import_clsx26 = __toESM(require("clsx"), 1);
+var import_clsx27 = __toESM(require("clsx"), 1);
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var defaultTableStatePagination = {
   currentPage: 0,
   entriesPerPage: 5
@@ -3660,20 +3720,20 @@ var Table = ({
       window.removeEventListener("resize", handleResize);
     };
   }, [data, currentPage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_clsx26.default)("col gap-y-4 overflow-hidden", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_custom_scrollbars_23.Scrollbars, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { className: headerRow, children: [
-        header && tableState.selection && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { className: headerPaddingHead, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  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_runtime30.jsx)("th", { className: headerPaddingHead, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
+        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_runtime30.jsx)("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { children: [
-        tableState.selection && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { className: (0, import_clsx26.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__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),
@@ -3682,17 +3742,17 @@ var Table = ({
             }
           }
         ) }),
-        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "td",
           {
-            className: (0, import_clsx26.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }),
+            className: (0, import_clsx27.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }),
             children: value1
           },
           index
         ))
       ] }, identifierMapping(value))) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
+    /* @__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 }
     }) }) })
@@ -3705,23 +3765,23 @@ var SortButton = ({
   onClick,
   ...buttonProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     TextButton,
     {
       color,
       onClick: () => onClick(ascending === "descending" ? "ascending" : "descending"),
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "row gap-x-2", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "row gap-x-2", children: [
         children,
-        ascending === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react10.ChevronUp, {}) : !ascending ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react10.ChevronsUpDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react10.ChevronDown, {})
+        ascending === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ChevronUp, {}) : !ascending ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ChevronsUpDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ChevronDown, {})
       ] })
     }
   );
 };
 
 // src/components/layout-and-navigation/TextImage.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var defaultTextImageTranslation = {
   de: {
     showMore: "Mehr anzeigen"
@@ -3752,25 +3812,25 @@ var TextImage = ({
     secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
     dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
-      className: (0, import_clsx27.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx28.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "div",
         {
-          className: (0, import_clsx27.default)(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx28.default)(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: (0, import_clsx27.default)(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "col gap-y-1 text-white overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "textstyle-title-xl", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
+            badge && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_clsx28.default)(`chip-full bg-white 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 text-white 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_runtime31.jsx)("div", { className: "row mt-2 text-white underline", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { onClick: onShowMoreClicked, children: translation.showMore }) })
+            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "row mt-2 text-white underline", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: onShowMoreClicked, children: translation.showMore }) })
           ]
         }
       )
@@ -3779,7 +3839,7 @@ var TextImage = ({
 };
 
 // src/components/layout-and-navigation/VerticalDivider.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -3787,7 +3847,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "svg",
     {
       width,
@@ -3796,7 +3856,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "line",
           {
             opacity: "0.5",
@@ -3810,7 +3870,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "linearGradient",
           {
             id: "paint_linear",
@@ -3820,9 +3880,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__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" })
             ]
           }
         ) })
@@ -3833,8 +3893,8 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_clsx29 = __toESM(require("clsx"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var defaultErrorComponentTranslation = {
   en: {
     errorOccurred: "An error occurred"
@@ -3849,8 +3909,8 @@ var ErrorComponent = ({
   classname
 }) => {
   const translation = useTranslation(defaultErrorComponentTranslation, overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx28.default)("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react11.AlertOctagon, { size: 64, className: "text-warning" }),
+  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_react11.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation.errorOccurred} :(`
   ] });
 };
@@ -3859,8 +3919,8 @@ var ErrorComponent = ({
 var import_react17 = require("react");
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var defaultLoadingAnimationTranslation = {
   en: {
     loading: "Loading data"
@@ -3875,14 +3935,14 @@ var LoadingAnimation = ({
   classname
 }) => {
   const translation = useTranslation(defaultLoadingAnimationTranslation, overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_clsx29.default)("col items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Helpwave, { animate: "loading" }),
+  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" }),
     loadingText ?? `${translation.loading}...`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -3901,27 +3961,27 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LoadingAnimation, { ...loadingProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LoadingAnimation, { ...loadingProps });
   }
   if (hasError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorComponent, { ...errorProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorComponent, { ...errorProps });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: (0, import_clsx30.default)("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
+  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 })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -3938,7 +3998,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "svg",
     {
       style: {
@@ -3947,7 +4007,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "circle",
           {
             cx: center,
@@ -3958,7 +4018,7 @@ var ProgressIndicator = ({
             className: "stroke-primary"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "circle",
           {
             cx: center,
@@ -3976,10 +4036,10 @@ var ProgressIndicator = ({
   );
 };
 
-// src/components/modals/ConfirmDialog.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var defaultConfirmDialogTranslation = {
+// src/components/modals/ConfirmModal.tsx
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var defaultConfirmDialogTranslation2 = {
   en: {
     confirm: "Confirm",
     cancel: "Cancel",
@@ -3991,7 +4051,7 @@ var defaultConfirmDialogTranslation = {
     decline: "Ablehnen"
   }
 };
-var ConfirmDialog = ({
+var ConfirmModal = ({
   overwriteTranslation,
   children,
   onCancel,
@@ -4002,25 +4062,26 @@ var ConfirmDialog = ({
   className,
   ...restProps
 }) => {
-  const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation);
+  const translation = useTranslation(defaultConfirmDialogTranslation2, overwriteTranslation);
   const mapping = {
-    neutral: "primary",
+    neutral: "neutral",
     negative: "negative",
-    positive: "positive"
+    positive: "positive",
+    primary: "primary"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Dialog, { ...restProps, className: (0, import_clsx31.default)("justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "col grow", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  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)(
         SolidButton,
         {
-          color: buttonOverwrites?.[0].color ?? "primary",
+          color: buttonOverwrites?.[0].color ?? "neutral",
           onClick: onCancel,
           disabled: buttonOverwrites?.[0].disabled ?? false,
           children: buttonOverwrites?.[0].text ?? translation.cancel
         }
       ),
-      onDecline && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      onDecline && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         SolidButton,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
@@ -4029,7 +4090,7 @@ var ConfirmDialog = ({
           children: buttonOverwrites?.[1].text ?? translation.decline
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         SolidButton,
         {
           autoFocus: true,
@@ -4044,7 +4105,7 @@ var ConfirmDialog = ({
 };
 
 // src/components/modals/DiscardChangesModal.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var defaultDiscardChangesModalTranslation = {
   en: {
     save: "Save",
@@ -4071,40 +4132,37 @@ var DiscardChangesModal = ({
   ...modalProps
 }) => {
   const translation = useTranslation(defaultDiscardChangesModalTranslation, overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-    Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    ConfirmModal,
     {
       headerProps: {
         ...headerProps,
         titleText: headerProps?.titleText ?? translation.title,
         descriptionText: headerProps?.descriptionText ?? translation.description
       },
+      onConfirm: onSave,
+      onCancel,
+      onDecline: onDontSave,
+      buttonOverwrites: [{ text: translation.cancel }, { text: translation.dontSave }, { text: translation.save }],
       ...modalProps,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SolidButton, { color: "positive", onClick: onSave, children: translation.save }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SolidButton, { color: "negative", onClick: onDontSave, children: translation.dontSave }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SolidButton, { autoFocus: true, color: "primary", onClick: onCancel, children: translation.cancel })
-        ] })
-      ]
+      children
     }
   );
 };
 
 // src/components/modals/InputModal.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var InputModal = ({
   inputs,
   buttonOverwrites,
   ...restProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     ConfirmDialog,
     {
       buttonOverwrites,
       ...restProps,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
@@ -4113,8 +4171,8 @@ var InputModal = ({
 var import_react18 = require("@headlessui/react");
 var import_lucide_react12 = require("lucide-react");
 var import_react19 = require("react");
-var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_clsx33 = __toESM(require("clsx"), 1);
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Select = ({
   value,
   label,
@@ -4139,13 +4197,13 @@ var Select = ({
     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 borderColor = "border-menu-border";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx32.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx32.default)("mb-1", label.className) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react18.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx33.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx33.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react18.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         import_react18.Menu.Button,
         {
-          className: (0, import_clsx32.default)(
+          className: (0, import_clsx33.default)(
             "inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text",
             textColor,
             borderColor,
@@ -4157,30 +4215,30 @@ var Select = ({
           ),
           disabled: isDisabled,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
-            open ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.ChevronDown, {})
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
+            open ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.ChevronDown, {})
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         import_react18.Menu.Items,
         {
           className: "absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto",
           children: [
-            (additionalItems ?? []).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            (additionalItems ?? []).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "div",
               {
-                className: (0, import_clsx32.default)(borderColor, "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0", {
+                className: (0, import_clsx33.default)(borderColor, "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0", {
                   "border-b-0 rounded-b-lg": filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1
                 }),
                 children: item
               },
               `additionalItems${index}`
             )),
-            filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react18.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react18.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "div",
               {
-                className: (0, import_clsx32.default)(
+                className: (0, import_clsx33.default)(
                   "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer",
                   option.className,
                   borderColor,
@@ -4219,7 +4277,7 @@ var SelectUncontrolled = ({
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Select,
     {
       value: selected,
@@ -4241,14 +4299,14 @@ var SearchableSelect = ({
 }) => {
   const [search, setSearch] = (0, import_react19.useState)("");
   const filteredOptions = MultiSearchWithMapping(search, options, searchMapping);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Select,
     {
       value,
       options: filteredOptions,
-      additionalItems: [/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "row gap-x-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Input, { autoFocus: true, value: search, onChangeText: setSearch }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.Search, {})
+      additionalItems: [/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "row gap-x-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Input, { autoFocus: true, value: search, onChangeText: setSearch }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.Search, {})
       ] }, "selectSearch")],
       ...selectProps
     }
@@ -4256,7 +4314,7 @@ var SearchableSelect = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultLanguageModalTranslation = {
   en: {
     title: "Language",
@@ -4279,7 +4337,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation(defaultLanguageModalTranslation, overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Modal,
     {
       headerProps: {
@@ -4289,8 +4347,8 @@ var LanguageModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Select,
           {
             className: "mt-2",
@@ -4299,7 +4357,7 @@ var LanguageModal = ({
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime42.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 }) })
       ] })
     }
   );
@@ -4307,7 +4365,7 @@ var LanguageModal = ({
 
 // src/theming/useTheme.tsx
 var import_react20 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -4338,13 +4396,13 @@ var ThemeProvider = ({ children, initialTheme = "light" }) => {
   (0, import_react20.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
 var useTheme = () => (0, import_react20.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var defaultConfirmDialogTranslation2 = {
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var defaultConfirmDialogTranslation3 = {
   en: {
     title: "Theme",
     message: "Choose your preferred theme",
@@ -4365,8 +4423,8 @@ var ThemeModal = ({
   ...modalProps
 }) => {
   const { theme, setTheme } = useTheme();
-  const translation = useTranslation(defaultConfirmDialogTranslation2, overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const translation = useTranslation(defaultConfirmDialogTranslation3, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Modal,
     {
       headerProps: {
@@ -4376,8 +4434,8 @@ var ThemeModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Select,
           {
             className: "mt-2",
@@ -4386,7 +4444,7 @@ var ThemeModal = ({
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation.done }) })
+        /* @__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 }) })
       ] })
     }
   );
@@ -4397,8 +4455,8 @@ var import_lucide_react14 = require("lucide-react");
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var defaultPropertyBaseTranslation = {
   en: {
     remove: "Remove"
@@ -4420,11 +4478,11 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation(defaultPropertyBaseTranslation, 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)(
+  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",
       {
-        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", {
+        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-gray-100 text-black group-hover:border-primary border-gray-400": !requiredAndNoValue,
           "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
         }, className),
@@ -4434,22 +4492,22 @@ var PropertyBase = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
       {
-        className: (0, import_clsx33.default)("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
+        className: (0, import_clsx34.default)("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
           "bg-white group-hover:border-primary border-gray-400": !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)(
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-warning pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
+          onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx33.default)("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              className: (0, import_clsx34.default)("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
               children: translation.remove
             }
@@ -4461,7 +4519,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var defaultCheckboxPropertyTranslation = {
   en: {
     yes: "Yes",
@@ -4480,14 +4538,14 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation(defaultCheckboxPropertyTranslation, overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      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)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react14.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)(
         Checkbox,
         {
           checked: value ?? true,
@@ -4502,8 +4560,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onChange = noop,
@@ -4514,20 +4572,20 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.CalendarDays, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react15.CalendarDays, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "div",
         {
-          className: (0, import_clsx34.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          className: (0, import_clsx35.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             Input,
             {
-              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 }),
+              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 }),
               value: dateText,
               type: type === "dateTime" ? "datetime-local" : "date",
               readOnly,
@@ -4551,16 +4609,16 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"), 1);
+var import_clsx38 = __toESM(require("clsx"), 1);
 
 // src/components/user-action/MultiSelect.tsx
 var import_react23 = require("react");
 var import_lucide_react16 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"), 1);
+var import_clsx37 = __toESM(require("clsx"), 1);
 
 // src/components/user-action/Menu.tsx
 var import_react22 = require("react");
-var import_clsx35 = __toESM(require("clsx"), 1);
+var import_clsx36 = __toESM(require("clsx"), 1);
 
 // src/hooks/useOutsideClick.ts
 var import_react21 = require("react");
@@ -4583,16 +4641,16 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   "div",
   {
-    className: (0, import_clsx35.default)("block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90", {
+    className: (0, import_clsx36.default)("block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90", {
       "text-right": alignment === "right",
       "text-left": alignment === "left"
     }, className),
@@ -4611,19 +4669,19 @@ var Menu2 = ({
   const triggerRef = (0, import_react22.useRef)(null);
   const menuRef = (0, import_react22.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       className: "relative",
       ...handlers,
       children: [
         trigger(() => setIsOpen(!isOpen), triggerRef),
-        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "div",
           {
             ref: menuRef,
             onClick: (e) => e.stopPropagation(),
-            className: (0, import_clsx35.default)("absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]", {
+            className: (0, import_clsx36.default)("absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]", {
               "    top-[8px]": alignment[0] === "t",
               " bottom-[8px]": alignment[0] === "b",
               "  left-[-8px]": alignment[1] === "l",
@@ -4638,7 +4696,7 @@ var Menu2 = ({
 };
 
 // src/components/user-action/MultiSelect.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var defaultMultiSelectTranslation = {
   en: {
     select: "Select",
@@ -4679,28 +4737,28 @@ var MultiSelect = ({
     filteredOptions = filteredOptions.filter((value) => !value.disabled);
   }
   const selectedItems = options.filter((value) => value.selected);
-  const menuButtonText = selectedItems.length === 0 ? hintText ?? translation.select : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: `${selectedItems.length} ${translation.selected}` });
+  const menuButtonText = selectedItems.length === 0 ? hintText ?? translation.select : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: `${selectedItems.length} ${translation.selected}` });
   const borderColor = "border-menu-border";
-  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_runtime50.jsxs)("div", { className: (0, import_clsx37.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: (0, import_clsx36.default)(" mb-1", label.className),
+        className: (0, import_clsx37.default)(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       Menu2,
       {
         alignment: "t_",
-        trigger: (onClick, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        trigger: (onClick, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
           {
             ref,
             onClick: disabled ? void 0 : onClick,
-            className: (0, import_clsx36.default)(
+            className: (0, import_clsx37.default)(
               borderColor,
               "bg-menu-background text-menu-text inline-w-full justify-between items-center rounded-lg border-2 px-4 py-2 font-medium",
               {
@@ -4712,27 +4770,27 @@ var MultiSelect = ({
             children: selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText
           }
         ),
-        menuClassName: (0, import_clsx36.default)(
+        menuClassName: (0, import_clsx37.default)(
           "!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2",
           borderColor,
           { "!py-0": !enableSearch, "!pb-0": enableSearch }
         ),
         children: [
-          enableSearch && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "row gap-x-2 items-center px-2 py-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Input, { autoFocus: true, className: "w-full", value: searchText, onChangeText: setSearchText }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react16.Search, {})
+          enableSearch && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "row gap-x-2 items-center px-2 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Input, { autoFocus: true, className: "w-full", value: searchText, onChangeText: setSearchText }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react16.Search, {})
           ] }, "selectSearch"),
-          filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             MenuItem,
             {
-              className: (0, import_clsx36.default)({
+              className: (0, import_clsx37.default)({
                 "cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100": !!option.disabled,
                 "cursor-pointer": !option.disabled
               }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                 "div",
                 {
-                  className: (0, import_clsx36.default)("overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2", option.className),
+                  className: (0, import_clsx37.default)("overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2", option.className),
                   onClick: () => {
                     if (!option.disabled) {
                       onChange(options.map((value) => value.value === option.value ? {
@@ -4742,7 +4800,7 @@ var MultiSelect = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Checkbox, { checked: option.selected, disabled: option.disabled, size: "small" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Checkbox, { checked: option.selected, disabled: option.disabled, size: "small" }),
                     option.label
                   ]
                 }
@@ -4757,7 +4815,7 @@ var MultiSelect = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var defaultMultiSelectPropertyTranslation = {
   en: {
     select: "Select"
@@ -4781,7 +4839,7 @@ var MultiSelectProperty = ({
   if (softRequired && !hasValue) {
     triggerClassName = "border-warning hover:brightness-90";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     PropertyBase,
     {
       name,
@@ -4789,23 +4847,23 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react17.List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react17.List, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.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_clsx38.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             MultiSelect,
             {
               ...multiSelectProps,
-              className: (0, import_clsx37.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: (0, import_clsx38.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               triggerClassName,
               selectedDisplay: ({ items }) => {
                 const selected = items.filter((value) => value.selected);
                 if (selected.length === 0) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: "Select" });
+                  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: "Select" });
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChipList, { list: selected.map((value) => ({ children: value.label })) });
+                return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChipList, { list: selected.map((value) => ({ children: value.label })) });
               },
               options,
               disabled: readOnly,
@@ -4820,8 +4878,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_clsx39 = __toESM(require("clsx"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -4842,23 +4900,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_runtime52.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react18.Binary, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react18.Binary, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
-          className: (0, import_clsx38.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          className: (0, import_clsx39.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.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_clsx39.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                 value: value?.toString() ?? "",
                 type: "number",
                 readOnly,
@@ -4881,7 +4939,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_runtime52.jsx)("span", { className: (0, import_clsx39.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -4891,8 +4949,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_clsx40 = __toESM(require("clsx"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var defaultSingleSelectPropertyTranslation = {
   en: {
     select: "Select"
@@ -4913,7 +4971,7 @@ var SingleSelectProperty = ({
 }) => {
   const translation = useTranslation(defaultSingleSelectPropertyTranslation, overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     PropertyBase,
     {
       name,
@@ -4921,19 +4979,19 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react19.List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react19.List, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime53.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_clsx40.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             SearchableSelect,
             {
               ...multiSelectProps,
               value,
               options,
               isDisabled: readOnly,
-              className: (0, import_clsx39.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: (0, import_clsx40.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               hintText: `${translation.select}...`
             }
           )
@@ -4945,12 +5003,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"), 1);
+var import_clsx42 = __toESM(require("clsx"), 1);
 
 // src/components/user-action/Textarea.tsx
 var import_react24 = require("react");
-var import_clsx40 = __toESM(require("clsx"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"), 1);
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Textarea = ({
   label,
   headline,
@@ -4971,27 +5029,27 @@ var Textarea = ({
     onEditCompleted(text);
     clearUpdateTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: (0, import_clsx40.default)("mb-1", label.className),
+        className: (0, import_clsx41.default)("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       "div",
       {
-        className: `${(0, import_clsx40.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: `${(0, import_clsx41.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`,
         children: [
-          headline && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          headline && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.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_clsx41.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
@@ -5018,7 +5076,7 @@ var Textarea = ({
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -5030,7 +5088,7 @@ var TextareaUncontrolled = ({
   (0, import_react24.useEffect)(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     Textarea,
     {
       ...props,
@@ -5044,7 +5102,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var defaultTextPropertyTranslation = {
   en: {
     value: "Text"
@@ -5064,21 +5122,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_runtime55.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react20.Text, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react20.Text, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime55.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_clsx42.default)("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.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_clsx42.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 ?? "",
@@ -5107,8 +5165,8 @@ var TextProperty = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx42 = __toESM(require("clsx"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_clsx43 = __toESM(require("clsx"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var defaultTimeTranslation = {
   en: {
     clear: "Clear",
@@ -5167,7 +5225,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -5181,25 +5239,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx42.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx43.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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         SolidButton,
         {
           size: "medium",
@@ -5213,8 +5271,8 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 var import_react25 = require("react");
-var import_clsx43 = __toESM(require("clsx"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_clsx44 = __toESM(require("clsx"), 1);
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -5353,7 +5411,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -5363,15 +5421,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      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)(
           "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-y-2 border-x-0 border-[#00000033]",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
             className: "col select-none",
@@ -5379,10 +5437,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "div",
               {
-                className: (0, import_clsx43.default)(
+                className: (0, import_clsx44.default)(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -5411,8 +5469,8 @@ var ScrollPicker = ({
 // src/components/user-action/ToggleableInput.tsx
 var import_react26 = require("react");
 var import_lucide_react21 = require("lucide-react");
-var import_clsx44 = __toESM(require("clsx"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_clsx45 = __toESM(require("clsx"), 1);
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ToggleableInput = ({
   type = "text",
   value,
@@ -5438,14 +5496,14 @@ var ToggleableInput = ({
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       "div",
       {
-        className: (0, import_clsx44.default)("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: (0, import_clsx45.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_runtime57.jsx)("div", { className: (0, import_clsx44.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__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)(
             "input",
             {
               ref,
@@ -5473,16 +5531,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: (0, import_clsx44.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_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`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: (0, import_clsx44.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          ) : /* @__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_react21.Pencil,
             {
-              className: (0, import_clsx44.default)(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: (0, import_clsx45.default)(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -5490,7 +5548,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -5502,7 +5560,7 @@ var ToggleableInputUncontrolled = ({
   (0, import_react26.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     ToggleableInput,
     {
       value,
@@ -5571,6 +5629,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   ChipList,
   Circle,
   ConfirmDialog,
+  ConfirmModal,
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
@@ -5605,7 +5664,6 @@ var filterNews = (localizedNews, requiredKeys) => {
   Menu,
   MenuItem,
   Modal,
-  ModalHeader,
   MultiSearchWithMapping,
   MultiSelect,
   MultiSelectProperty,
@@ -5613,6 +5671,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   NumberProperty,
   OutlineButton,
   Overlay,
+  OverlayHeader,
   Pagination,
   ProgressIndicator,
   PropertyBase,