@helpwave/hightide 0.1.0 → 0.1.1

package/dist/index.js

@@ -1336,1504 +1336,1555 @@ var TimePickerUncontrolled = ({
   );
 };
 
-// src/components/icons-and-geometry/Avatar.tsx
-import Image2 from "next/image";
-import clsx10 from "clsx";
-import { jsx as jsx12, jsxs as jsxs8 } from "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__ */ jsx12("div", { className: clsx10(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ jsx12(
-      Image2,
-      {
-        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__ */ jsxs8("div", { className: "row relative", style: { height: diameter + "px" }, children: [
-    /* @__PURE__ */ jsx12("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx12(
-      "div",
-      {
-        className: "absolute",
-        style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
-        children: /* @__PURE__ */ jsx12(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
-      },
-      index
-    )) }),
-    notDisplayedProfiles > 0 && /* @__PURE__ */ jsx12(
-      "div",
-      {
-        className: "truncate row items-center",
-        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
-        children: /* @__PURE__ */ jsxs8("span", { children: [
-          "+ ",
-          notDisplayedProfiles
-        ] })
-      }
-    )
-  ] });
-};
+// src/components/dialogs/ConfirmDialog.tsx
+import clsx12 from "clsx";
 
-// src/components/icons-and-geometry/Circle.tsx
+// src/components/layout-and-navigation/Overlay.tsx
+import { useEffect as useEffect8, useRef as useRef3, useState as useState9 } from "react";
+import ReactDOM from "react-dom";
 import clsx11 from "clsx";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Circle = ({
-  radius = 20,
-  className = "bg-primary",
-  style,
-  ...restProps
-}) => {
-  const size = radius * 2;
-  return /* @__PURE__ */ jsx13(
-    "div",
-    {
-      className: clsx11(`rounded-full`, className),
-      style: {
-        width: `${size}px`,
-        height: `${size}px`,
-        ...style
-      },
-      ...restProps
+
+// src/hooks/useHoverState.ts
+import { useEffect as useEffect7, useState as useState8 } from "react";
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = useState8(false);
+  const [timer, setTimer] = useState8();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
     }
-  );
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  useEffect7(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  useEffect7(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
 };
 
-// src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useState as useState8 } from "react";
-import clsx12 from "clsx";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var Ring = ({
-  innerSize = 20,
-  width = 7,
-  className = "outline-primary"
+// src/components/user-action/Tooltip.tsx
+import { clsx as clsx10 } from "clsx";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
 }) => {
-  return /* @__PURE__ */ jsx14(
+  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__ */ jsxs8(
     "div",
     {
-      className: clsx12(`bg-transparent rounded-full outline`, className),
-      style: {
-        width: `${innerSize}px`,
-        height: `${innerSize}px`,
-        outlineWidth: `${width}px`
-      }
+      className: clsx10("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: clsx10(
+              `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__ */ jsx12(
+                "div",
+                {
+                  className: clsx10(`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
+import { X } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var Overlay = ({
+  children,
+  isOpen,
+  onBackgroundClick,
+  backgroundClassName
 }) => {
-  const [currentWidth, setCurrentWidth] = useState8(0);
-  const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = useCallback2((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]);
-  useEffect7(() => {
-    if (currentWidth < width) {
-      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
-    }
+  const [root, setRoot] = useState9();
+  useEffect8(() => {
+    setRoot(document.body);
   }, []);
-  return /* @__PURE__ */ jsx14(
-    "div",
-    {
-      className: "row items-center justify-center",
-      style: {
-        width: `${innerSize + 2 * width}px`,
-        height: `${innerSize + 2 * width}px`,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx14(
-        Ring,
+  if (!root || !isOpen) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs9("div", { className: clsx11("fixed inset-0 z-[9999]"), children: [
+      /* @__PURE__ */ jsx13(
+        "div",
         {
-          innerSize,
-          width: currentWidth,
-          className
+          className: clsx11("fixed inset-0 h-screen w-screen bg-black/30", backgroundClassName),
+          onClick: onBackgroundClick
         }
-      )
-    }
+      ),
+      children
+    ] }),
+    root
   );
 };
-var RingWave = ({
-  startInnerSize = 20,
-  endInnerSize = 30,
-  width,
-  className,
-  fillAnimationDuration = 3,
-  repeating = false,
-  onAnimationFinished = noop,
-  style
+var overlayStack = [];
+var defaultModalHeaderTranslation = {
+  en: {
+    close: "Close"
+  },
+  de: {
+    close: "Schlie\xDFen"
+  }
+};
+var OverlayHeader = ({
+  overwriteTranslation,
+  onClose,
+  title,
+  titleText = "",
+  description,
+  descriptionText = ""
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = useState8(startInnerSize);
-  const distance = endInnerSize - startInnerSize;
-  const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = useCallback2((timestamp, startTime) => {
-    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
-    const newInnerSize = Math.min(
-      startInnerSize + distance * progress,
-      endInnerSize
+  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  const hasTitleRow = !!title || !!titleText || !!onClose;
+  const titleRow = /* @__PURE__ */ jsxs9("div", { className: "row justify-between items-start gap-x-8", children: [
+    title ?? /* @__PURE__ */ jsx13(
+      "h2",
+      {
+        className: clsx11("textstyle-title-lg", {
+          "mb-1": description || descriptionText
+        }),
+        children: titleText
+      }
+    ),
+    !!onClose && /* @__PURE__ */ jsx13(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ jsx13(IconButton, { color: "neutral", size: "small", onClick: onClose, children: /* @__PURE__ */ jsx13(X, { className: "w-full h-full" }) }) })
+  ] });
+  return /* @__PURE__ */ jsxs9("div", { className: "col", children: [
+    hasTitleRow && titleRow,
+    description ?? (descriptionText && /* @__PURE__ */ jsx13("span", { className: "textstyle-description", children: descriptionText }))
+  ] });
+};
+var Modal = ({
+  children,
+  isOpen,
+  onClose,
+  className,
+  backgroundClassName,
+  headerProps
+}) => {
+  const ref = useRef3(null);
+  useEffect8(() => {
+    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__ */ jsx13(
+    Overlay,
+    {
+      isOpen,
+      onBackgroundClick: onClose,
+      backgroundClassName,
+      children: /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          ref,
+          tabIndex: -1,
+          className: clsx11(
+            "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__ */ jsx13(OverlayHeader, { ...headerProps, onClose }),
+            children
+          ]
+        }
+      )
     }
-  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  useEffect7(() => {
-    if (currentInnerSize < endInnerSize) {
-      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+  );
+};
+var Dialog = ({
+  children,
+  isOpen,
+  className,
+  backgroundClassName,
+  headerProps
+}) => {
+  const ref = useRef3(null);
+  useEffect8(() => {
+    if (!isOpen) return;
+    const dialog = ref.current;
+    if (!dialog) {
+      console.error("dialog open, but no ref found");
+      return;
     }
-  }, []);
-  return /* @__PURE__ */ jsx14(
-    "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__ */ jsx13(
+    Overlay,
     {
-      className: "row items-center justify-center",
-      style: {
-        width: `${endInnerSize + 2 * width}px`,
-        height: `${endInnerSize + 2 * width}px`,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx14(
-        Ring,
+      isOpen,
+      backgroundClassName,
+      children: /* @__PURE__ */ jsxs9(
+        "div",
         {
-          innerSize: currentInnerSize,
-          width,
-          className
+          ref,
+          tabIndex: -1,
+          className: clsx11(
+            "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__ */ jsx13(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
+import { jsx as jsx14, jsxs as jsxs10 } from "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] = useState8(0);
-  const size = sizeCircle3;
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      className: "relative",
-      style: {
-        width: `${sizeCircle3}px`,
-        height: `${sizeCircle3}px`
-      },
-      children: [
-        /* @__PURE__ */ jsx14(
-          Circle,
-          {
-            radius: sizeCircle1 / 2,
-            className: clsx12(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`
-            }
-          }
-        ),
-        currentRing === 0 ? /* @__PURE__ */ jsx14(
-          AnimatedRing,
-          {
-            innerSize: sizeCircle1,
-            width: (sizeCircle2 - sizeCircle1) / 2,
-            onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
-            repeating: true,
-            className: clsx12(
-              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__ */ jsx14(
-          RingWave,
-          {
-            startInnerSize: sizeCircle1 - waveWidth,
-            endInnerSize: sizeCircle2,
-            width: waveWidth,
-            repeating: true,
-            className: clsx12(waveBaseColor, `opacity-5`),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 9
-            }
-          }
-        ) : null,
-        /* @__PURE__ */ jsx14(
-          Circle,
-          {
-            radius: sizeCircle2 / 2,
-            className: clsx12(
-              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__ */ jsx14(
-          AnimatedRing,
-          {
-            innerSize: sizeCircle2 - 1,
-            width: (sizeCircle3 - sizeCircle2) / 2,
-            onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
-            repeating: true,
-            className: clsx12(circle3ClassName),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 7
-            }
-          }
-        ) : null,
-        currentRing === 2 ? /* @__PURE__ */ jsx14(
-          RingWave,
-          {
-            startInnerSize: sizeCircle2,
-            endInnerSize: sizeCircle3 - waveWidth,
-            width: waveWidth,
-            repeating: true,
-            className: clsx12(waveBaseColor, `opacity-5`),
-            style: {
-              left: `${size / 2}px`,
-              top: `${size / 2}px`,
-              position: "absolute",
-              translate: `-50% -50%`,
-              zIndex: 7
-            }
-          }
-        ) : null,
-        /* @__PURE__ */ jsx14(
-          Circle,
-          {
-            radius: sizeCircle3 / 2,
-            className: clsx12(
-              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__ */ jsxs10(Dialog, { ...restProps, className: clsx12("justify-between", className), children: [
+    /* @__PURE__ */ jsx14("div", { className: "col grow", children }),
+    /* @__PURE__ */ jsxs10("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+      onDecline && /* @__PURE__ */ jsx14(
+        SolidButton,
+        {
+          color: buttonOverwrites?.[0].color ?? "negative",
+          onClick: onDecline,
+          disabled: buttonOverwrites?.[0].disabled ?? false,
+          children: buttonOverwrites?.[0].text ?? translation.decline
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        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
-import Image3 from "next/image";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var TagIcon = ({
-  className,
-  width = 16,
-  height = 16,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx15(
-    Image3,
-    {
-      ...props,
-      width,
-      height,
-      alt: "",
-      src: "https://cdn.helpwave.de/icons/label.png",
-      className
-    }
+// src/components/icons-and-geometry/Avatar.tsx
+import Image2 from "next/image";
+import clsx13 from "clsx";
+import { jsx as jsx15, jsxs as jsxs11 } from "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__ */ jsx15("div", { className: clsx13(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ jsx15(
+      Image2,
+      {
+        className: "rounded-full border border-gray-200",
+        style,
+        src: avatarUrl,
+        alt,
+        width: avtarSize,
+        height: avtarSize
+      }
+    ) })
   );
 };
-
-// src/components/layout-and-navigation/BreadCrumb.tsx
-import Link from "next/link";
-import clsx13 from "clsx";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  const color = "text-description";
-  return /* @__PURE__ */ jsx16("div", { className: clsx13("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs10("div", { children: [
-    /* @__PURE__ */ jsx16(
-      Link,
+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__ */ jsxs11("div", { className: "row relative", style: { height: diameter + "px" }, children: [
+    /* @__PURE__ */ jsx15("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx15(
+      "div",
       {
-        href: crumb.link,
-        className: clsx13(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__ */ jsx15(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
+      },
+      index
+    )) }),
+    notDisplayedProfiles > 0 && /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: "truncate row items-center",
+        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
+        children: /* @__PURE__ */ jsxs11("span", { children: [
+          "+ ",
+          notDisplayedProfiles
+        ] })
       }
-    ),
-    index !== crumbs.length - 1 && /* @__PURE__ */ jsx16("span", { className: clsx13(`px-1`, color), children: "/" })
-  ] }, index)) });
+    )
+  ] });
 };
 
-// src/components/layout-and-navigation/Carousel.tsx
-import { useCallback as useCallback3, useEffect as useEffect8, useMemo, useRef as useRef3, useState as useState9 } from "react";
+// src/components/icons-and-geometry/Circle.tsx
 import clsx14 from "clsx";
-import { ChevronLeft, ChevronRight } from "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);
-  }
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Circle = ({
+  radius = 20,
+  className = "bg-primary",
+  style,
+  ...restProps
+}) => {
+  const size = radius * 2;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: clsx14(`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));
+// src/components/icons-and-geometry/Ring.tsx
+import { useCallback as useCallback2, useEffect as useEffect9, useState as useState10 } from "react";
+import clsx15 from "clsx";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var Ring = ({
+  innerSize = 20,
+  width = 7,
+  className = "outline-primary"
+}) => {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: clsx15(`bg-transparent rounded-full outline`, className),
+      style: {
+        width: `${innerSize}px`,
+        height: `${innerSize}px`,
+        outlineWidth: `${width}px`
+      }
     }
-    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
-import { Fragment, jsx as jsx17, jsxs as jsxs11 } from "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 AnimatedRing = ({
+  innerSize,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
 }) => {
-  if (isAutoLooping && !isLooping) {
-    console.error("When isAutoLooping is true, isLooping should also be true");
-    isLooping = true;
-  }
-  const [{
-    currentPosition,
-    dragState,
-    animationState
-  }, setCarouselInformation] = useState9({
-    currentPosition: 0
-  });
-  const animationId = useRef3(void 0);
-  const timeOut = useRef3(void 0);
-  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
-  const length = children.length;
-  const paddingItemCount = 3;
-  const util = 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 = useCallback3((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));
-    }
-  }, [animationTime, autoLoopAnimationTime, util]);
-  useEffect8(() => {
-    if (animationState) {
-      animationId.current = requestAnimationFrame(animation);
-    }
-    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
-    }
-  }));
-  useEffect8(() => {
-    if (!animationId.current && !animationState && !dragState && !timeOut.current) {
-      if (autoLoopingTimeOut > 0) {
-        timeOut.current = setTimeout(() => {
-          startAutoLoop();
-          timeOut.current = void 0;
-        }, autoLoopingTimeOut);
-      } else {
-        startAutoLoop();
+  const [currentWidth, setCurrentWidth] = useState10(0);
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = useCallback2((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));
       }
     }
-  }, [animationState, dragState, animationId.current, timeOut.current]);
-  const startAnimation = (targetPosition) => {
-    if (targetPosition === void 0) {
-      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition);
-    }
-    if (targetPosition === currentPosition) {
-      return;
-    }
-    const direction = util.getBestDirection(currentPosition, targetPosition);
-    clearTimeout(timeOut.current);
-    timeOut.current = void 0;
-    if (animationId.current) {
-      cancelAnimationFrame(animationId.current);
-      animationId.current = void 0;
+  }, [milliseconds, onAnimationFinished, repeating, width]);
+  useEffect9(() => {
+    if (currentWidth < width) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
-    setCarouselInformation((prevState) => ({
-      ...prevState,
-      dragState: void 0,
-      animationState: {
-        targetPosition,
-        direction,
-        startPosition: currentPosition,
-        isAutoLooping: false
+  }, []);
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${innerSize + 2 * width}px`,
+        height: `${innerSize + 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;
+      children: /* @__PURE__ */ jsx17(
+        Ring,
+        {
+          innerSize,
+          width: currentWidth,
+          className
+        }
+      )
     }
-    const offsetUpdate = (dragState.lastX - x) / width;
-    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate);
-    setCarouselInformation((prevState) => ({
-      ...prevState,
-      currentPosition: newPosition,
-      dragState: {
-        ...dragState,
-        lastX: x
+  );
+};
+var RingWave = ({
+  startInnerSize = 20,
+  endInnerSize = 30,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentInnerSize, setCurrentInnerSize] = useState10(startInnerSize);
+  const distance = endInnerSize - startInnerSize;
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = useCallback2((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));
       }
-    }));
-  };
-  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;
-      }
+  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
+  useEffect9(() => {
+    if (currentInnerSize < endInnerSize) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
-    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__ */ jsxs11("div", { className: "col items-center w-full gap-y-2", children: [
-    /* @__PURE__ */ jsxs11("div", { className: clsx14(`relative w-full overflow-hidden`, heightClassName, className), children: [
-      arrows && /* @__PURE__ */ jsxs11(Fragment, { children: [
+  }, []);
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${endInnerSize + 2 * width}px`,
+        height: `${endInnerSize + 2 * width}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx17(
+        Ring,
+        {
+          innerSize: currentInnerSize,
+          width,
+          className
+        }
+      )
+    }
+  );
+};
+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] = useState10(0);
+  const size = sizeCircle3;
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: "relative",
+      style: {
+        width: `${sizeCircle3}px`,
+        height: `${sizeCircle3}px`
+      },
+      children: [
         /* @__PURE__ */ jsx17(
-          "div",
+          Circle,
           {
-            className: clsx14("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__ */ jsx17(ChevronLeft, { size: 32 })
+            radius: sizeCircle1 / 2,
+            className: clsx15(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
           }
         ),
-        /* @__PURE__ */ jsx17(
-          "div",
+        currentRing === 0 ? /* @__PURE__ */ jsx17(
+          AnimatedRing,
           {
-            className: clsx14("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__ */ jsx17(ChevronRight, { size: 32 })
+            innerSize: sizeCircle1,
+            width: (sizeCircle2 - sizeCircle1) / 2,
+            onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
+            repeating: true,
+            className: clsx15(
+              circle2ClassName,
+              { "opacity-5": currentRing !== 0 }
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
           }
-        )
-      ] }),
-      hintNext ? /* @__PURE__ */ jsxs11("div", { className: clsx14(`relative row h-full`, heightClassName), children: [
-        /* @__PURE__ */ jsx17("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
-          item,
-          index
-        }, listIndex) => /* @__PURE__ */ jsx17(
-          "div",
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ jsx17(
+          RingWave,
           {
-            className: clsx14(`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: clsx15(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
+          }
+        ) : null,
         /* @__PURE__ */ jsx17(
-          "div",
+          Circle,
           {
-            className: clsx14(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+            radius: sizeCircle2 / 2,
+            className: clsx15(
+              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__ */ jsx17(
+          AnimatedRing,
+          {
+            innerSize: sizeCircle2 - 1,
+            width: (sizeCircle3 - sizeCircle2) / 2,
+            onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
+            repeating: true,
+            className: clsx15(circle3ClassName),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ jsx17(
+          RingWave,
+          {
+            startInnerSize: sizeCircle2,
+            endInnerSize: sizeCircle3 - waveWidth,
+            width: waveWidth,
+            repeating: true,
+            className: clsx15(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
         /* @__PURE__ */ jsx17(
-          "div",
+          Circle,
           {
-            className: clsx14(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+            radius: sizeCircle3 / 2,
+            className: clsx15(
+              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__ */ jsx17("div", { className: clsx14("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
-    ] }),
-    dots && /* @__PURE__ */ jsx17(
-      "div",
-      {
-        className: "row items-center justify-center w-full my-2",
-        children: range(0, length - 1).map((index) => /* @__PURE__ */ jsx17(
-          "button",
-          {
-            className: clsx14("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
-import clsx15 from "clsx";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-var Chip = ({
-  children,
-  trailingIcon,
-  color = "default",
-  variant = "normal",
-  className = "",
-  ...restProps
+// src/components/icons-and-geometry/Tag.tsx
+import Image3 from "next/image";
+import { jsx as jsx18 } from "react/jsx-runtime";
+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__ */ jsxs12(
-    "div",
+  return /* @__PURE__ */ jsx18(
+    Image3,
     {
-      ...restProps,
-      className: clsx15(
-        `row w-fit px-2 py-1`,
-        colorMapping,
-        {
-          "rounded-md": variant === "normal",
-          "rounded-full": variant === "fullyRounded"
-        },
-        className
-      ),
-      children: [
-        children,
-        trailingIcon && /* @__PURE__ */ jsx18("span", { className: colorMappingIcon, children: trailingIcon })
-      ]
+      ...props,
+      width,
+      height,
+      alt: "",
+      src: "https://cdn.helpwave.de/icons/label.png",
+      className
     }
   );
 };
-var ChipList = ({
-  list,
-  className = ""
-}) => {
-  return /* @__PURE__ */ jsx18("div", { className: clsx15("flex flex-wrap gap-x-4 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx18(
-    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
+import Link from "next/link";
 import clsx16 from "clsx";
-import { jsx as jsx19 } from "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));
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
+  const color = "text-description";
+  return /* @__PURE__ */ jsx19("div", { className: clsx16("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsx19(
+      Link,
+      {
+        href: crumb.link,
+        className: clsx16(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }),
+        children: crumb.display
       }
-    }
-  }
-  return /* @__PURE__ */ jsx19("div", { className: clsx16(className), ...restProps, children: nodes });
+    ),
+    index !== crumbs.length - 1 && /* @__PURE__ */ jsx19("span", { className: clsx16(`px-1`, color), children: "/" })
+  ] }, index)) });
 };
 
-// src/components/layout-and-navigation/FAQSection.tsx
+// src/components/layout-and-navigation/Carousel.tsx
+import { useCallback as useCallback3, useEffect as useEffect10, useMemo, useRef as useRef4, useState as useState11 } from "react";
 import clsx17 from "clsx";
-import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2 } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
-// src/components/layout-and-navigation/MarkdownInterpreter.tsx
-import { Fragment as Fragment2, jsx as jsx20 } from "react/jsx-runtime";
-var astNodeInserterType = ["helpwave", "newline"];
-var ASTNodeInterpreter = ({
-  node,
-  isRoot = false,
-  className = ""
-}) => {
-  switch (node.type) {
-    case "newline":
-      return /* @__PURE__ */ jsx20("br", {});
-    case "text":
-      return isRoot ? /* @__PURE__ */ jsx20("span", { className, children: node.text }) : node.text;
-    case "helpwave":
-      return /* @__PURE__ */ jsx20("span", { className: "font-bold font-space no-underline", children: "helpwave" });
-    case "none":
-      return isRoot ? /* @__PURE__ */ jsx20("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) }) : /* @__PURE__ */ jsx20(Fragment2, { children: node.children.map((value, index) => /* @__PURE__ */ jsx20(ASTNodeInterpreter, { node: value }, index)) });
-    case "bold":
-      return /* @__PURE__ */ jsx20("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx20(ASTNodeInterpreter, { node: value }, index)) });
-    case "italic":
-      return /* @__PURE__ */ jsx20("i", { children: node.children.map((value, index) => /* @__PURE__ */ jsx20(ASTNodeInterpreter, { node: value }, index)) });
-    case "underline":
-      return /* @__PURE__ */ jsx20("u", { children: node.children.map((value, index) => /* @__PURE__ */ jsx20(ASTNodeInterpreter, { node: value }, index)) });
-    case "font-space":
-      return /* @__PURE__ */ jsx20("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "primary":
-      return /* @__PURE__ */ jsx20("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "secondary":
-      return /* @__PURE__ */ jsx20("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "warn":
-      return /* @__PURE__ */ jsx20("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "positive":
-      return /* @__PURE__ */ jsx20("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        ASTNodeInterpreter,
-        {
-          node: value
-        },
-        index
-      )) });
-    case "negative":
-      return /* @__PURE__ */ jsx20("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ jsx20(
-        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;
-    }
-    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;
-      }
+
+// 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({
-      type: "text",
-      text: text[0]
-    });
-    text = text.substring(1);
-    start = text.indexOf(commandStart);
+    this.length = length;
+    this.isLooping = isLooping;
+    this.allowedOverScroll = allowedOverScroll;
   }
-  return {
-    type: "none",
-    children
-  };
-};
-var optimizeTree = (node) => {
-  if (node.type === "text") {
-    return !node.text ? void 0 : node;
+  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;
   }
-  if (astNodeInserterType.some((value) => value === node.type)) {
-    return node;
+  static withoutOffset(position) {
+    return position + _LoopingArrayCalculator.getOffset(position);
   }
-  const currentNode = node;
-  if (currentNode.children.length === 0) {
-    return void 0;
+  static getOffset(position) {
+    return Math.round(position) - position;
   }
-  let children = [];
-  for (let i = 0; i < currentNode.children.length; i++) {
-    const child = optimizeTree(currentNode.children[i]);
-    if (!child) {
-      continue;
+  /**
+   * @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.");
     }
-    if (child.type === "none") {
-      children.push(...child.children);
-    } else {
-      children.push(child);
+    const isForwardInvalid = direction === 1 && position > target;
+    const isBackwardInvalid = direction === -1 && target < position;
+    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {
+      return Infinity;
     }
-  }
-  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);
-      }
+    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;
   }
-  currentNode.children = children;
-  return currentNode;
-};
-var MarkdownInterpreter = ({ text, className }) => {
-  const tree = parseMarkdown(text);
-  const optimizedTree = optimizeTree(tree);
-  return /* @__PURE__ */ jsx20(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
 };
 
-// src/components/layout-and-navigation/FAQSection.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var FAQSection = ({
-  entries,
-  expandableClassName
+// src/components/layout-and-navigation/Carousel.tsx
+import { Fragment, jsx as jsx20, jsxs as jsxs14 } from "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"
 }) => {
-  const chevronSize = 28;
-  return /* @__PURE__ */ jsx21("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx21(
-    Expandable,
-    {
-      ...restProps,
-      label: /* @__PURE__ */ jsx21("h3", { id, className: "textstyle-title-md", children: title }),
-      clickOnlyOnHeader: false,
-      icon: (expanded) => expanded ? /* @__PURE__ */ jsx21(ChevronUp2, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } }) : /* @__PURE__ */ jsx21(ChevronDown3, { size: chevronSize, className: "text-primary" }),
-      className: clsx17("rounded-xl", expandableClassName),
-      headerClassName: "px-6 py-4",
-      children: /* @__PURE__ */ jsx21("div", { className: "mt-2 px-6 pb-4", children: content.type === "markdown" ? /* @__PURE__ */ jsx21(MarkdownInterpreter, { text: content.value }) : content.value })
-    },
-    id
-  )) });
-};
-
-// src/components/layout-and-navigation/Overlay.tsx
-import { useEffect as useEffect10, useRef as useRef4, useState as useState11 } from "react";
-import ReactDOM from "react-dom";
-import clsx19 from "clsx";
-
-// src/hooks/useHoverState.ts
-import { useEffect as useEffect9, useState as useState10 } from "react";
-var defaultUseHoverStateProps = {
-  closingDelay: 200,
-  isDisabled: false
-};
-var useHoverState = (props = void 0) => {
-  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState10(false);
-  const [timer, setTimer] = useState10();
-  const onMouseEnter = () => {
-    if (isDisabled) {
+  if (isAutoLooping && !isLooping) {
+    console.error("When isAutoLooping is true, isLooping should also be true");
+    isLooping = true;
+  }
+  const [{
+    currentPosition,
+    dragState,
+    animationState
+  }, setCarouselInformation] = useState11({
+    currentPosition: 0
+  });
+  const animationId = useRef4(void 0);
+  const timeOut = useRef4(void 0);
+  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
+  const length = children.length;
+  const paddingItemCount = 3;
+  const util = 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 = useCallback3((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));
+    }
+  }, [animationTime, autoLoopAnimationTime, util]);
+  useEffect10(() => {
+    if (animationState) {
+      animationId.current = requestAnimationFrame(animation);
+    }
+    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
+    }
+  }));
+  useEffect10(() => {
+    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;
     }
-    clearTimeout(timer);
-    setIsHovered(true);
+    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 onMouseLeave = () => {
-    if (isDisabled) {
+  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;
     }
-    setTimer(setTimeout(() => {
-      setIsHovered(false);
-    }, closingDelay));
+    const offsetUpdate = (dragState.lastX - x) / width;
+    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate);
+    setCarouselInformation((prevState) => ({
+      ...prevState,
+      currentPosition: newPosition,
+      dragState: {
+        ...dragState,
+        lastX: x
+      }
+    }));
   };
-  useEffect9(() => {
-    if (timer) {
-      return () => {
-        clearTimeout(timer);
-      };
+  const onDragEnd = (x, width) => {
+    if (!dragState) {
+      return;
     }
-  });
-  useEffect9(() => {
-    if (timer) {
-      clearTimeout(timer);
+    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;
+      }
     }
-  }, [isDisabled]);
-  return {
-    isHovered,
-    setIsHovered,
-    handlers: { onMouseEnter, onMouseLeave }
+    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__ */ jsxs14("div", { className: "col items-center w-full gap-y-2", children: [
+    /* @__PURE__ */ jsxs14("div", { className: clsx17(`relative w-full overflow-hidden`, heightClassName, className), children: [
+      arrows && /* @__PURE__ */ jsxs14(Fragment, { children: [
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: clsx17("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__ */ jsx20(ChevronLeft, { size: 32 })
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: clsx17("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__ */ jsx20(ChevronRight, { size: 32 })
+          }
+        )
+      ] }),
+      hintNext ? /* @__PURE__ */ jsxs14("div", { className: clsx17(`relative row h-full`, heightClassName), children: [
+        /* @__PURE__ */ jsx20("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
+          item,
+          index
+        }, listIndex) => /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: clsx17(`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__ */ jsx20(
+          "div",
+          {
+            className: clsx17(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: clsx17(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx20("div", { className: clsx17("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
+    ] }),
+    dots && /* @__PURE__ */ jsx20(
+      "div",
+      {
+        className: "row items-center justify-center w-full my-2",
+        children: range(0, length - 1).map((index) => /* @__PURE__ */ jsx20(
+          "button",
+          {
+            className: clsx17("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/user-action/Tooltip.tsx
-import { clsx as clsx18 } from "clsx";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
-var Tooltip = ({
-  tooltip,
+// src/components/layout-and-navigation/Chip.tsx
+import clsx18 from "clsx";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var Chip = ({
   children,
-  animationDelay = 650,
-  tooltipClassName = "",
-  containerClassName = "",
-  position = "bottom",
-  zIndex = 10
+  trailingIcon,
+  color = "default",
+  variant = "normal",
+  className = "",
+  ...restProps
 }) => {
-  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__ */ jsxs13(
+  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__ */ jsxs15(
     "div",
     {
-      className: clsx18("relative inline-block", containerClassName),
-      ...handlers,
+      ...restProps,
+      className: clsx18(
+        `row w-fit px-2 py-1`,
+        colorMapping,
+        {
+          "rounded-md": variant === "normal",
+          "rounded-full": variant === "fullyRounded"
+        },
+        className
+      ),
       children: [
         children,
-        isHovered && /* @__PURE__ */ jsxs13(
-          "div",
-          {
-            className: clsx18(
-              `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__ */ jsx22(
-                "div",
-                {
-                  className: clsx18(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex }
-                }
-              )
-            ]
-          }
-        )
+        trailingIcon && /* @__PURE__ */ jsx21("span", { className: colorMappingIcon, children: trailingIcon })
       ]
     }
-  );
+  );
+};
+var ChipList = ({
+  list,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx21("div", { className: clsx18("flex flex-wrap gap-x-4 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx21(
+    Chip,
+    {
+      ...value,
+      color: value.color ?? "dark",
+      variant: value.variant ?? "normal",
+      children: value.children
+    },
+    index
+  )) });
+};
+
+// src/components/layout-and-navigation/DividerInserter.tsx
+import clsx19 from "clsx";
+import { jsx as jsx22 } from "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__ */ jsx22("div", { className: clsx19(className), ...restProps, children: nodes });
 };
 
-// src/components/layout-and-navigation/Overlay.tsx
-import { X } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
-var Overlay = ({
-  children,
-  isOpen,
-  onBackgroundClick,
-  backgroundClassName
+// src/components/layout-and-navigation/FAQSection.tsx
+import clsx20 from "clsx";
+import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2 } from "lucide-react";
+
+// src/components/layout-and-navigation/MarkdownInterpreter.tsx
+import { Fragment as Fragment2, jsx as jsx23 } from "react/jsx-runtime";
+var astNodeInserterType = ["helpwave", "newline"];
+var ASTNodeInterpreter = ({
+  node,
+  isRoot = false,
+  className = ""
 }) => {
-  const [root, setRoot] = useState11();
-  useEffect10(() => {
-    setRoot(document.body);
-  }, []);
-  if (!root || !isOpen) return null;
-  return ReactDOM.createPortal(
-    /* @__PURE__ */ jsxs14("div", { className: clsx19("fixed inset-0 z-[9999]"), children: [
-      /* @__PURE__ */ jsx23(
-        "div",
+  switch (node.type) {
+    case "newline":
+      return /* @__PURE__ */ jsx23("br", {});
+    case "text":
+      return isRoot ? /* @__PURE__ */ jsx23("span", { className, children: node.text }) : node.text;
+    case "helpwave":
+      return /* @__PURE__ */ jsx23("span", { className: "font-bold font-space no-underline", children: "helpwave" });
+    case "none":
+      return isRoot ? /* @__PURE__ */ jsx23("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
         {
-          className: clsx19("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"
+          node: value
+        },
+        index
+      )) }) : /* @__PURE__ */ jsx23(Fragment2, { children: node.children.map((value, index) => /* @__PURE__ */ jsx23(ASTNodeInterpreter, { node: value }, index)) });
+    case "bold":
+      return /* @__PURE__ */ jsx23("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx23(ASTNodeInterpreter, { node: value }, index)) });
+    case "italic":
+      return /* @__PURE__ */ jsx23("i", { children: node.children.map((value, index) => /* @__PURE__ */ jsx23(ASTNodeInterpreter, { node: value }, index)) });
+    case "underline":
+      return /* @__PURE__ */ jsx23("u", { children: node.children.map((value, index) => /* @__PURE__ */ jsx23(ASTNodeInterpreter, { node: value }, index)) });
+    case "font-space":
+      return /* @__PURE__ */ jsx23("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "primary":
+      return /* @__PURE__ */ jsx23("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "secondary":
+      return /* @__PURE__ */ jsx23("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "warn":
+      return /* @__PURE__ */ jsx23("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "positive":
+      return /* @__PURE__ */ jsx23("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "negative":
+      return /* @__PURE__ */ jsx23("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ jsx23(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    default:
+      return null;
   }
 };
-var ModalHeader = ({
-  overwriteTranslation,
-  onCloseClick,
-  title,
-  titleText = "",
-  description,
-  descriptionText = ""
-}) => {
-  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
-  const hasTitleRow = !!title || !!titleText || !!onCloseClick;
-  const titleRow = /* @__PURE__ */ jsxs14("div", { className: "row justify-between items-start gap-x-8", children: [
-    title ?? /* @__PURE__ */ jsx23(
-      "h2",
-      {
-        className: clsx19("textstyle-title-lg", {
-          "mb-1": description || descriptionText
-        }),
-        children: titleText
-      }
-    ),
-    !!onCloseClick && /* @__PURE__ */ jsx23(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ jsx23(IconButton, { color: "neutral", size: "small", onClick: onCloseClick, children: /* @__PURE__ */ jsx23(X, { className: "w-full h-full" }) }) })
-  ] });
-  return /* @__PURE__ */ jsxs14("div", { className: "col", children: [
-    hasTitleRow && titleRow,
-    description ?? (descriptionText && /* @__PURE__ */ jsx23("span", { className: "textstyle-description", children: descriptionText }))
-  ] });
-};
-var Modal = ({
-  children,
-  isOpen,
-  onClose,
-  className,
-  backgroundClassName,
-  headerProps
-}) => {
-  const ref = useRef4(null);
-  useEffect10(() => {
-    if (!isOpen) return;
-    const modal = ref.current;
-    if (!modal) {
-      console.error("modal open, but no ref found");
-      return;
+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;
     }
-    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();
-        }
+    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;
       }
-    };
-    modal.focus();
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      overlayStack = overlayStack.filter((m) => m !== modal);
-    };
-  }, [isOpen, onClose]);
-  return /* @__PURE__ */ jsx23(
-    Overlay,
-    {
-      isOpen,
-      onBackgroundClick: onClose,
-      backgroundClassName,
-      children: /* @__PURE__ */ jsxs14(
-        "div",
-        {
-          ref,
-          tabIndex: -1,
-          className: clsx19(
-            "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__ */ jsx23(ModalHeader, { ...headerProps, onCloseClick: onClose }),
-            children
-          ]
+      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 Dialog = ({
-  children,
-  isOpen,
-  className,
-  backgroundClassName,
-  title,
-  titleText
-}) => {
-  const ref = useRef4(null);
-  useEffect10(() => {
-    if (!isOpen) return;
-    const dialog = ref.current;
-    if (!dialog) {
-      console.error("dialog open, but no ref found");
-      return;
+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;
     }
-    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();
-        }
+    if (child.type === "none") {
+      children.push(...child.children);
+    } else {
+      children.push(child);
+    }
+  }
+  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__ */ jsx23(
-    Overlay,
-    {
-      isOpen,
-      backgroundClassName,
-      children: /* @__PURE__ */ jsxs14(
-        "div",
-        {
-          ref,
-          tabIndex: -1,
-          className: clsx19(
-            "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__ */ jsx23(
-              "h2",
-              {
-                className: clsx19("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__ */ jsx23(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
+};
+
+// src/components/layout-and-navigation/FAQSection.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var FAQSection = ({
+  entries,
+  expandableClassName
+}) => {
+  const chevronSize = 28;
+  return /* @__PURE__ */ jsx24("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx24(
+    Expandable,
+    {
+      ...restProps,
+      label: /* @__PURE__ */ jsx24("h3", { id, className: "textstyle-title-md", children: title }),
+      clickOnlyOnHeader: false,
+      icon: (expanded) => expanded ? /* @__PURE__ */ jsx24(ChevronUp2, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } }) : /* @__PURE__ */ jsx24(ChevronDown3, { size: chevronSize, className: "text-primary" }),
+      className: clsx20("rounded-xl", expandableClassName),
+      headerClassName: "px-6 py-4",
+      children: /* @__PURE__ */ jsx24("div", { className: "mt-2 px-6 pb-4", children: content.type === "markdown" ? /* @__PURE__ */ jsx24(MarkdownInterpreter, { text: content.value }) : content.value })
+    },
+    id
+  )) });
 };
 
 // src/components/layout-and-navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-import clsx20 from "clsx";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import clsx21 from "clsx";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultPaginationTranslations = {
   en: {
     of: "of"
@@ -2855,23 +2906,23 @@ var Pagination = ({
   const noPages = numberOfPages === 0;
   const onFirstPage = page === 0 && !noPages;
   const onLastPage = page === numberOfPages - 1;
-  return /* @__PURE__ */ jsxs15("div", { className: clsx20("row", { "opacity-30": noPages }), children: [
-    /* @__PURE__ */ jsx24("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ jsx24(ChevronFirst, { className: clsx20({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ jsx24("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ jsx24(ChevronLeft2, { className: clsx20({ "opacity-30": onFirstPage }) }) }),
-    /* @__PURE__ */ jsxs15("div", { className: "min-w-[80px] justify-center mx-2", children: [
-      /* @__PURE__ */ jsx24("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
-      /* @__PURE__ */ jsx24("span", { className: "select-none mx-2", children: translation.of }),
-      /* @__PURE__ */ jsx24("span", { className: "select-none text-left flex-1", children: numberOfPages })
+  return /* @__PURE__ */ jsxs16("div", { className: clsx21("row", { "opacity-30": noPages }), children: [
+    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ jsx25(ChevronFirst, { className: clsx21({ "opacity-30": onFirstPage }) }) }),
+    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ jsx25(ChevronLeft2, { className: clsx21({ "opacity-30": onFirstPage }) }) }),
+    /* @__PURE__ */ jsxs16("div", { className: "min-w-[80px] justify-center mx-2", children: [
+      /* @__PURE__ */ jsx25("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
+      /* @__PURE__ */ jsx25("span", { className: "select-none mx-2", children: translation.of }),
+      /* @__PURE__ */ jsx25("span", { className: "select-none text-left flex-1", children: numberOfPages })
     ] }),
-    /* @__PURE__ */ jsx24("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx24(ChevronRight2, { className: clsx20({ "opacity-30": onLastPage }) }) }),
-    /* @__PURE__ */ jsx24("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx24(ChevronLast, { className: clsx20({ "opacity-30": onLastPage }) }) })
+    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx25(ChevronRight2, { className: clsx21({ "opacity-30": onLastPage }) }) }),
+    /* @__PURE__ */ jsx25("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx25(ChevronLast, { className: clsx21({ "opacity-30": onLastPage }) }) })
   ] });
 };
 
 // src/components/layout-and-navigation/SearchableList.tsx
 import { useEffect as useEffect13, useMemo as useMemo2, useState as useState14 } from "react";
 import { Search } from "lucide-react";
-import clsx23 from "clsx";
+import clsx24 from "clsx";
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -2895,7 +2946,7 @@ var SimpleSearch = (search, objects) => {
 
 // src/components/user-action/Input.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect12, useRef as useRef5, useState as useState13 } from "react";
-import clsx22 from "clsx";
+import clsx23 from "clsx";
 
 // src/hooks/useSaveDelay.ts
 import { useEffect as useEffect11, useState as useState12 } from "react";
@@ -2938,8 +2989,8 @@ function useSaveDelay(setNotificationStatus, delay) {
 }
 
 // src/components/user-action/Label.tsx
-import clsx21 from "clsx";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import clsx22 from "clsx";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var styleMapping = {
   labelSmall: "textstyle-label-sm",
   labelMedium: "textstyle-label-md",
@@ -2952,11 +3003,11 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx25("label", { ...props, className: clsx21(styleMapping[labelType], className), children: children ? children : name });
+  return /* @__PURE__ */ jsx26("label", { ...props, className: clsx22(styleMapping[labelType], className), children: children ? children : name });
 };
 
 // src/components/user-action/Input.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var Input = ({
   id,
   type = "text",
@@ -2982,9 +3033,9 @@ var Input = ({
       ref.current?.focus();
     }
   }, [autoFocus]);
-  return /* @__PURE__ */ jsxs16("div", { className: clsx22({ "w-full": expanded }, containerClassName), children: [
-    label && /* @__PURE__ */ jsx26(Label, { ...label, htmlFor: id, className: clsx22("mb-1", label.className) }),
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs17("div", { className: clsx23({ "w-full": expanded }, containerClassName), children: [
+    label && /* @__PURE__ */ jsx27(Label, { ...label, htmlFor: id, className: clsx23("mb-1", label.className) }),
+    /* @__PURE__ */ jsx27(
       "input",
       {
         ref,
@@ -3023,7 +3074,7 @@ var InputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useState13(defaultValue);
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Input,
     {
       ...props,
@@ -3046,13 +3097,13 @@ var FormInput = forwardRef2(function FormInput2({
   required,
   ...restProps
 }, ref) {
-  const input = /* @__PURE__ */ jsx26(
+  const input = /* @__PURE__ */ jsx27(
     "input",
     {
       ref,
       id,
       ...restProps,
-      className: clsx22(
+      className: clsx23(
         {
           "focus:border-primary focus:ring-primary": !errorText,
           "focus:border-negative focus:ring-negative text-negative": !!errorText
@@ -3061,18 +3112,18 @@ var FormInput = forwardRef2(function FormInput2({
       )
     }
   );
-  return /* @__PURE__ */ jsxs16("div", { className: clsx22("flex flex-col gap-y-1", containerClassName), children: [
-    labelText && /* @__PURE__ */ jsxs16("label", { htmlFor: id, className: clsx22("textstyle-label-md", labelClassName), children: [
+  return /* @__PURE__ */ jsxs17("div", { className: clsx23("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ jsxs17("label", { htmlFor: id, className: clsx23("textstyle-label-md", labelClassName), children: [
       labelText,
-      required && /* @__PURE__ */ jsx26("span", { className: "text-primary font-bold", children: "*" })
+      required && /* @__PURE__ */ jsx27("span", { className: "text-primary font-bold", children: "*" })
     ] }),
     input,
-    errorText && /* @__PURE__ */ jsx26("label", { htmlFor: id, className: clsx22("text-negative", errorClassName), children: errorText })
+    errorText && /* @__PURE__ */ jsx27("label", { htmlFor: id, className: clsx23("text-negative", errorClassName), children: errorText })
   ] });
 });
 
 // src/components/layout-and-navigation/SearchableList.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var defaultSearchableListTranslation = {
   en: {
     search: "Search",
@@ -3095,20 +3146,20 @@ var SearchableList = ({
   const [search, setSearch] = useState14(initialSearch);
   useEffect13(() => setSearch(initialSearch), [initialSearch]);
   const filteredEntries = useMemo2(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
-  return /* @__PURE__ */ jsxs17("div", { className: clsx23("col gap-y-2", className), children: [
-    /* @__PURE__ */ jsxs17("div", { className: "row justify-between gap-x-2 items-center", children: [
-      /* @__PURE__ */ jsx27("div", { className: "flex-1", children: /* @__PURE__ */ jsx27(Input, { value: search, onChangeText: setSearch, placeholder: translation.search }) }),
-      /* @__PURE__ */ jsx27(Search, { size: 20 })
+  return /* @__PURE__ */ jsxs18("div", { className: clsx24("col gap-y-2", className), children: [
+    /* @__PURE__ */ jsxs18("div", { className: "row justify-between gap-x-2 items-center", children: [
+      /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(Input, { value: search, onChangeText: setSearch, placeholder: translation.search }) }),
+      /* @__PURE__ */ jsx28(Search, { size: 20 })
     ] }),
-    filteredEntries.length > 0 && /* @__PURE__ */ jsx27("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) }),
-    !filteredEntries.length && /* @__PURE__ */ jsx27("div", { className: "row justify-center", children: translation.nothingFound })
+    filteredEntries.length > 0 && /* @__PURE__ */ jsx28("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) }),
+    !filteredEntries.length && /* @__PURE__ */ jsx28("div", { className: "row justify-center", children: translation.nothingFound })
   ] });
 };
 
 // src/components/layout-and-navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
-import clsx24 from "clsx";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import clsx25 from "clsx";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultStepperBarTranslation = {
   en: {
     back: "Back",
@@ -3136,12 +3187,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ step: newStep, seenSteps, lastStep });
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: clsx24("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
+      className: clsx25("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
       children: [
-        /* @__PURE__ */ jsx28("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx29("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
             disabled: step === 0,
@@ -3150,18 +3201,18 @@ var StepperBar = ({
             },
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx28(ChevronLeft3, { size: 14 }),
+              /* @__PURE__ */ jsx29(ChevronLeft3, { size: 14 }),
               translation.back
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx28("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx29("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__ */ jsx28(
+          return /* @__PURE__ */ jsx29(
             "div",
             {
               onClick: () => seen && update(index),
-              className: clsx24(
+              className: clsx25(
                 "rounded-full w-4 h-4",
                 {
                   "bg-primary hover:brightness-75": index === step && seen,
@@ -3177,25 +3228,25 @@ var StepperBar = ({
             index
           );
         }) }),
-        step !== lastStep && /* @__PURE__ */ jsx28("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs18(
+        step !== lastStep && /* @__PURE__ */ jsx29("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
             onClick: () => update(step + 1),
             className: "row gap-x-1 items-center justify-center",
             children: [
               translation.next,
-              /* @__PURE__ */ jsx28(ChevronRight3, { size: 14 })
+              /* @__PURE__ */ jsx29(ChevronRight3, { size: 14 })
             ]
           }
         ) }),
-        step === lastStep && /* @__PURE__ */ jsx28("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs18(
+        step === lastStep && /* @__PURE__ */ jsx29("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
             disabled: false,
             onClick: onFinish,
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx28(Check, { size: 14 }),
+              /* @__PURE__ */ jsx29(Check, { size: 14 }),
               translation.confirm
             ]
           }
@@ -3213,8 +3264,8 @@ import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 import { useState as useState15 } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check2, Minus } from "lucide-react";
-import clsx25 from "clsx";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import clsx26 from "clsx";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var checkboxSizeMapping = {
   small: "size-4",
   medium: "size-6",
@@ -3250,31 +3301,31 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ jsxs19("div", { className: clsx25("row justify-center items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs20("div", { className: clsx26("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ jsx30(
       CheckboxPrimitive.Root,
       {
         onCheckedChange: propagateChange,
         checked,
         disabled,
         id,
-        className: clsx25(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
+        className: clsx26(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__ */ jsxs19(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ jsx29(Check2, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ jsx29(Minus, { className: innerIconSize })
+        children: /* @__PURE__ */ jsxs20(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ jsx30(Check2, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ jsx30(Minus, { className: innerIconSize })
         ] })
       }
     ),
-    label && /* @__PURE__ */ jsx29(
+    label && /* @__PURE__ */ jsx30(
       Label,
       {
         ...label,
-        className: clsx25("cursor-pointer", label.className),
+        className: clsx26("cursor-pointer", label.className),
         htmlFor: id,
         onClick: changeValue
       }
@@ -3297,7 +3348,7 @@ var CheckboxUncontrolled = ({
     }
     setChecked(checked2);
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Checkbox,
     {
       ...props,
@@ -3308,9 +3359,9 @@ var CheckboxUncontrolled = ({
 };
 
 // src/components/layout-and-navigation/Table.tsx
-import clsx26 from "clsx";
+import clsx27 from "clsx";
 import { ChevronDown as ChevronDown4, ChevronsUpDown, ChevronUp as ChevronUp3 } from "lucide-react";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var defaultTableStatePagination = {
   currentPage: 0,
   entriesPerPage: 5
@@ -3481,20 +3532,20 @@ var Table = ({
       window.removeEventListener("resize", handleResize);
     };
   }, [data, currentPage]);
-  return /* @__PURE__ */ jsxs20("div", { className: clsx26("col gap-y-4 overflow-hidden", className), children: [
-    /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Scrollbars3, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ jsxs20("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
-      /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs20("tr", { className: headerRow, children: [
-        header && tableState.selection && /* @__PURE__ */ jsx30("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs21("div", { className: clsx27("col gap-y-4 overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsx31(Scrollbars3, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ jsxs21("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
+      /* @__PURE__ */ jsx31("thead", { children: /* @__PURE__ */ jsxs21("tr", { className: headerRow, children: [
+        header && tableState.selection && /* @__PURE__ */ jsx31("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx31(
           Checkbox,
           {
             checked: tableState.selection.hasSelectedSome ? "indeterminate" : tableState.selection.hasSelectedAll,
             onChange: () => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))
           }
         ) }),
-        header && header.map((value, index) => /* @__PURE__ */ jsx30("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx30("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
+        header && header.map((value, index) => /* @__PURE__ */ jsx31("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx31("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
       ] }) }),
-      /* @__PURE__ */ jsx30("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ jsxs20("tr", { children: [
-        tableState.selection && /* @__PURE__ */ jsx30("td", { className: clsx26(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ jsxs21("tr", { children: [
+        tableState.selection && /* @__PURE__ */ jsx31("td", { className: clsx27(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ jsx31(
           Checkbox,
           {
             checked: isDataObjectSelected(tableState, value, identifierMapping),
@@ -3503,17 +3554,17 @@ var Table = ({
             }
           }
         ) }),
-        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ jsx30(
+        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ jsx31(
           "td",
           {
-            className: clsx26(cellPadding, { [headerPaddingBody]: rowIndex === 0 }),
+            className: clsx27(cellPadding, { [headerPaddingBody]: rowIndex === 0 }),
             children: value1
           },
           index
         ))
       ] }, identifierMapping(value))) })
     ] }) }) }),
-    /* @__PURE__ */ jsx30("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ jsx30(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
+    /* @__PURE__ */ jsx31("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ jsx31(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
       ...tableState,
       pagination: { entriesPerPage, currentPage: page }
     }) }) })
@@ -3526,23 +3577,23 @@ var SortButton = ({
   onClick,
   ...buttonProps
 }) => {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     TextButton,
     {
       color,
       onClick: () => onClick(ascending === "descending" ? "ascending" : "descending"),
       ...buttonProps,
-      children: /* @__PURE__ */ jsxs20("div", { className: "row gap-x-2", children: [
+      children: /* @__PURE__ */ jsxs21("div", { className: "row gap-x-2", children: [
         children,
-        ascending === "ascending" ? /* @__PURE__ */ jsx30(ChevronUp3, {}) : !ascending ? /* @__PURE__ */ jsx30(ChevronsUpDown, {}) : /* @__PURE__ */ jsx30(ChevronDown4, {})
+        ascending === "ascending" ? /* @__PURE__ */ jsx31(ChevronUp3, {}) : !ascending ? /* @__PURE__ */ jsx31(ChevronsUpDown, {}) : /* @__PURE__ */ jsx31(ChevronDown4, {})
       ] })
     }
   );
 };
 
 // src/components/layout-and-navigation/TextImage.tsx
-import clsx27 from "clsx";
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import clsx28 from "clsx";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var defaultTextImageTranslation = {
   de: {
     showMore: "Mehr anzeigen"
@@ -3573,25 +3624,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__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
-      className: clsx27("rounded-2xl w-full", className),
+      className: clsx28("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
       },
-      children: /* @__PURE__ */ jsxs21(
+      children: /* @__PURE__ */ jsxs22(
         "div",
         {
-          className: clsx27(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: clsx28(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ jsx31("div", { className: clsx27(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx31("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ jsxs21("div", { className: "col gap-y-1 text-white overflow-hidden", children: [
-              /* @__PURE__ */ jsx31("span", { className: "textstyle-title-xl", children: title }),
-              /* @__PURE__ */ jsx31("span", { className: "text-ellipsis overflow-hidden", children: description })
+            badge && /* @__PURE__ */ jsx32("div", { className: clsx28(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx32("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ jsxs22("div", { className: "col gap-y-1 text-white overflow-hidden", children: [
+              /* @__PURE__ */ jsx32("span", { className: "textstyle-title-xl", children: title }),
+              /* @__PURE__ */ jsx32("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ jsx31("div", { className: "row mt-2 text-white underline", children: /* @__PURE__ */ jsx31("button", { onClick: onShowMoreClicked, children: translation.showMore }) })
+            onShowMoreClicked && /* @__PURE__ */ jsx32("div", { className: "row mt-2 text-white underline", children: /* @__PURE__ */ jsx32("button", { onClick: onShowMoreClicked, children: translation.showMore }) })
           ]
         }
       )
@@ -3600,7 +3651,7 @@ var TextImage = ({
 };
 
 // src/components/layout-and-navigation/VerticalDivider.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -3608,7 +3659,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ jsx32("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx33("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs23(
     "svg",
     {
       width,
@@ -3617,7 +3668,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "line",
           {
             opacity: "0.5",
@@ -3631,7 +3682,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs23(
           "linearGradient",
           {
             id: "paint_linear",
@@ -3641,9 +3692,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx32("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx32("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx32("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ jsx33("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx33("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx33("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -3654,8 +3705,8 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
-import clsx28 from "clsx";
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import clsx29 from "clsx";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var defaultErrorComponentTranslation = {
   en: {
     errorOccurred: "An error occurred"
@@ -3670,8 +3721,8 @@ var ErrorComponent = ({
   classname
 }) => {
   const translation = useTranslation(defaultErrorComponentTranslation, overwriteTranslation);
-  return /* @__PURE__ */ jsxs23("div", { className: clsx28("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx33(AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ jsxs24("div", { className: clsx29("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx34(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation.errorOccurred} :(`
   ] });
 };
@@ -3680,8 +3731,8 @@ var ErrorComponent = ({
 import { useState as useState17 } from "react";
 
 // src/components/loading-states/LoadingAnimation.tsx
-import clsx29 from "clsx";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import clsx30 from "clsx";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var defaultLoadingAnimationTranslation = {
   en: {
     loading: "Loading data"
@@ -3696,14 +3747,14 @@ var LoadingAnimation = ({
   classname
 }) => {
   const translation = useTranslation(defaultLoadingAnimationTranslation, overwriteTranslation);
-  return /* @__PURE__ */ jsxs24("div", { className: clsx29("col items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx34(Helpwave, { animate: "loading" }),
+  return /* @__PURE__ */ jsxs25("div", { className: clsx30("col items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx35(Helpwave, { animate: "loading" }),
     loadingText ?? `${translation.loading}...`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -3722,27 +3773,27 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx35(LoadingAnimation, { ...loadingProps });
+    return /* @__PURE__ */ jsx36(LoadingAnimation, { ...loadingProps });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx35(ErrorComponent, { ...errorProps });
+    return /* @__PURE__ */ jsx36(ErrorComponent, { ...errorProps });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingButton.tsx
-import clsx30 from "clsx";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ jsxs25("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx36("div", { className: clsx30("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx36(Helpwave, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ jsx36(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
+  return /* @__PURE__ */ jsxs26("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ jsx37("div", { className: clsx31("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx37(Helpwave, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ jsx37(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -3759,7 +3810,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "svg",
     {
       style: {
@@ -3768,7 +3819,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "circle",
           {
             cx: center,
@@ -3779,7 +3830,7 @@ var ProgressIndicator = ({
             className: "stroke-primary"
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "circle",
           {
             cx: center,
@@ -3797,10 +3848,10 @@ var ProgressIndicator = ({
   );
 };
 
-// src/components/modals/ConfirmDialog.tsx
-import clsx31 from "clsx";
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
-var defaultConfirmDialogTranslation = {
+// src/components/modals/ConfirmModal.tsx
+import clsx32 from "clsx";
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+var defaultConfirmDialogTranslation2 = {
   en: {
     confirm: "Confirm",
     cancel: "Cancel",
@@ -3812,7 +3863,7 @@ var defaultConfirmDialogTranslation = {
     decline: "Ablehnen"
   }
 };
-var ConfirmDialog = ({
+var ConfirmModal = ({
   overwriteTranslation,
   children,
   onCancel,
@@ -3823,25 +3874,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__ */ jsxs27(Dialog, { ...restProps, className: clsx31("justify-between", className), children: [
-    /* @__PURE__ */ jsx38("div", { className: "col grow", children }),
-    /* @__PURE__ */ jsxs27("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-      onCancel && /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs28(Modal, { ...restProps, onClose: onCancel, className: clsx32("justify-between", className), children: [
+    /* @__PURE__ */ jsx39("div", { className: "col grow", children }),
+    /* @__PURE__ */ jsxs28("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+      onCancel && /* @__PURE__ */ jsx39(
         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__ */ jsx38(
+      onDecline && /* @__PURE__ */ jsx39(
         SolidButton,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
@@ -3850,7 +3902,7 @@ var ConfirmDialog = ({
           children: buttonOverwrites?.[1].text ?? translation.decline
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         SolidButton,
         {
           autoFocus: true,
@@ -3865,7 +3917,7 @@ var ConfirmDialog = ({
 };
 
 // src/components/modals/DiscardChangesModal.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var defaultDiscardChangesModalTranslation = {
   en: {
     save: "Save",
@@ -3892,40 +3944,37 @@ var DiscardChangesModal = ({
   ...modalProps
 }) => {
   const translation = useTranslation(defaultDiscardChangesModalTranslation, overwriteTranslation);
-  return /* @__PURE__ */ jsxs28(
-    Modal,
+  return /* @__PURE__ */ jsx40(
+    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__ */ jsxs28("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-          /* @__PURE__ */ jsx39(SolidButton, { color: "positive", onClick: onSave, children: translation.save }),
-          /* @__PURE__ */ jsx39(SolidButton, { color: "negative", onClick: onDontSave, children: translation.dontSave }),
-          /* @__PURE__ */ jsx39(SolidButton, { autoFocus: true, color: "primary", onClick: onCancel, children: translation.cancel })
-        ] })
-      ]
+      children
     }
   );
 };
 
 // src/components/modals/InputModal.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var InputModal = ({
   inputs,
   buttonOverwrites,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     ConfirmDialog,
     {
       buttonOverwrites,
       ...restProps,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx40(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx41(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
@@ -3934,8 +3983,8 @@ var InputModal = ({
 import { Menu } from "@headlessui/react";
 import { ChevronDown as ChevronDown5, ChevronUp as ChevronUp4, Search as Search2 } from "lucide-react";
 import { useEffect as useEffect15, useState as useState18 } from "react";
-import clsx32 from "clsx";
-import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import clsx33 from "clsx";
+import { Fragment as Fragment3, jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var Select = ({
   value,
   label,
@@ -3960,13 +4009,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__ */ jsxs29("div", { className: clsx32(className), children: [
-    label && /* @__PURE__ */ jsx41(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx32("mb-1", label.className) }),
-    /* @__PURE__ */ jsx41(Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ jsxs29(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs29("div", { className: clsx33(className), children: [
+    label && /* @__PURE__ */ jsx42(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx33("mb-1", label.className) }),
+    /* @__PURE__ */ jsx42(Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ jsxs29(Fragment3, { children: [
       /* @__PURE__ */ jsxs29(
         Menu.Button,
         {
-          className: clsx32(
+          className: clsx33(
             "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,
@@ -3978,8 +4027,8 @@ var Select = ({
           ),
           disabled: isDisabled,
           children: [
-            /* @__PURE__ */ jsx41("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
-            open ? /* @__PURE__ */ jsx41(ChevronUp4, {}) : /* @__PURE__ */ jsx41(ChevronDown5, {})
+            /* @__PURE__ */ jsx42("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
+            open ? /* @__PURE__ */ jsx42(ChevronUp4, {}) : /* @__PURE__ */ jsx42(ChevronDown5, {})
           ]
         }
       ),
@@ -3988,20 +4037,20 @@ var Select = ({
         {
           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__ */ jsx41(
+            (additionalItems ?? []).map((item, index) => /* @__PURE__ */ jsx42(
               "div",
               {
-                className: clsx32(borderColor, "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0", {
+                className: clsx33(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__ */ jsx41(Menu.Item, { children: /* @__PURE__ */ jsx41(
+            filteredOptions.map((option, index) => /* @__PURE__ */ jsx42(Menu.Item, { children: /* @__PURE__ */ jsx42(
               "div",
               {
-                className: clsx32(
+                className: clsx33(
                   "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer",
                   option.className,
                   borderColor,
@@ -4040,7 +4089,7 @@ var SelectUncontrolled = ({
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Select,
     {
       value: selected,
@@ -4062,14 +4111,14 @@ var SearchableSelect = ({
 }) => {
   const [search, setSearch] = useState18("");
   const filteredOptions = MultiSearchWithMapping(search, options, searchMapping);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Select,
     {
       value,
       options: filteredOptions,
       additionalItems: [/* @__PURE__ */ jsxs29("div", { className: "row gap-x-2 items-center", children: [
-        /* @__PURE__ */ jsx41(Input, { autoFocus: true, value: search, onChangeText: setSearch }),
-        /* @__PURE__ */ jsx41(Search2, {})
+        /* @__PURE__ */ jsx42(Input, { autoFocus: true, value: search, onChangeText: setSearch }),
+        /* @__PURE__ */ jsx42(Search2, {})
       ] }, "selectSearch")],
       ...selectProps
     }
@@ -4077,7 +4126,7 @@ var SearchableSelect = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 var defaultLanguageModalTranslation = {
   en: {
     title: "Language",
@@ -4100,7 +4149,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation(defaultLanguageModalTranslation, overwriteTranslation);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Modal,
     {
       headerProps: {
@@ -4111,7 +4160,7 @@ var LanguageModal = ({
       onClose,
       ...modalProps,
       children: /* @__PURE__ */ jsxs30("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           Select,
           {
             className: "mt-2",
@@ -4120,7 +4169,7 @@ var LanguageModal = ({
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ jsx42("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx42(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation.done }) })
+        /* @__PURE__ */ jsx43("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx43(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation.done }) })
       ] })
     }
   );
@@ -4128,7 +4177,7 @@ var LanguageModal = ({
 
 // src/theming/useTheme.tsx
 import { createContext as createContext2, useContext as useContext2, useEffect as useEffect16, useState as useState19 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -4159,13 +4208,13 @@ var ThemeProvider = ({ children, initialTheme = "light" }) => {
   useEffect16(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ jsx43(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ jsx44(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
 var useTheme = () => useContext2(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
-var defaultConfirmDialogTranslation2 = {
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+var defaultConfirmDialogTranslation3 = {
   en: {
     title: "Theme",
     message: "Choose your preferred theme",
@@ -4186,8 +4235,8 @@ var ThemeModal = ({
   ...modalProps
 }) => {
   const { theme, setTheme } = useTheme();
-  const translation = useTranslation(defaultConfirmDialogTranslation2, overwriteTranslation);
-  return /* @__PURE__ */ jsx44(
+  const translation = useTranslation(defaultConfirmDialogTranslation3, overwriteTranslation);
+  return /* @__PURE__ */ jsx45(
     Modal,
     {
       headerProps: {
@@ -4198,7 +4247,7 @@ var ThemeModal = ({
       onClose,
       ...modalProps,
       children: /* @__PURE__ */ jsxs31("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           Select,
           {
             className: "mt-2",
@@ -4207,7 +4256,7 @@ var ThemeModal = ({
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ jsx44("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx44(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation.done }) })
+        /* @__PURE__ */ jsx45("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx45(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation.done }) })
       ] })
     }
   );
@@ -4218,8 +4267,8 @@ import { Check as Check3 } from "lucide-react";
 
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
-import clsx33 from "clsx";
-import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+import clsx34 from "clsx";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 var defaultPropertyBaseTranslation = {
   en: {
     remove: "Remove"
@@ -4241,11 +4290,11 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ jsxs32("div", { className: clsx33("row gap-x-0 group", className), children: [
+  return /* @__PURE__ */ jsxs32("div", { className: clsx34("row gap-x-0 group", className), children: [
     /* @__PURE__ */ jsxs32(
       "div",
       {
-        className: clsx33("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
+        className: clsx34("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),
@@ -4258,19 +4307,19 @@ var PropertyBase = ({
     /* @__PURE__ */ jsxs32(
       "div",
       {
-        className: clsx33("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
+        className: clsx34("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__ */ jsx45("div", { className: "text-warning pr-4", children: /* @__PURE__ */ jsx45(AlertTriangle, { size: 24 }) }),
-          onRemove && /* @__PURE__ */ jsx45(
+          requiredAndNoValue && /* @__PURE__ */ jsx46("div", { className: "text-warning pr-4", children: /* @__PURE__ */ jsx46(AlertTriangle, { size: 24 }) }),
+          onRemove && /* @__PURE__ */ jsx46(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: clsx33("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              className: clsx34("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
               children: translation.remove
             }
@@ -4282,7 +4331,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var defaultCheckboxPropertyTranslation = {
   en: {
     yes: "Yes",
@@ -4301,14 +4350,14 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation(defaultCheckboxPropertyTranslation, overwriteTranslation);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ jsx46(Check3, { size: 16 }),
-      input: () => /* @__PURE__ */ jsx46("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ jsx46(
+      icon: /* @__PURE__ */ jsx47(Check3, { size: 16 }),
+      input: () => /* @__PURE__ */ jsx47("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ jsx47(
         Checkbox,
         {
           checked: value ?? true,
@@ -4323,8 +4372,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import clsx34 from "clsx";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import clsx35 from "clsx";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onChange = noop,
@@ -4335,20 +4384,20 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx47(CalendarDays, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx47(
+      icon: /* @__PURE__ */ jsx48(CalendarDays, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx48(
         "div",
         {
-          className: clsx34("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ jsx47(
+          className: clsx35("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ jsx48(
             Input,
             {
-              className: clsx34("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+              className: clsx35("!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,
@@ -4372,16 +4421,16 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import clsx37 from "clsx";
+import clsx38 from "clsx";
 
 // src/components/user-action/MultiSelect.tsx
 import { useState as useState20 } from "react";
 import { Search as Search3 } from "lucide-react";
-import clsx36 from "clsx";
+import clsx37 from "clsx";
 
 // src/components/user-action/Menu.tsx
 import { useRef as useRef7 } from "react";
-import clsx35 from "clsx";
+import clsx36 from "clsx";
 
 // src/hooks/useOutsideClick.ts
 import { useEffect as useEffect17 } from "react";
@@ -4404,16 +4453,16 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   className
-}) => /* @__PURE__ */ jsx48(
+}) => /* @__PURE__ */ jsx49(
   "div",
   {
-    className: clsx35("block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90", {
+    className: clsx36("block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90", {
       "text-right": alignment === "right",
       "text-left": alignment === "left"
     }, className),
@@ -4439,12 +4488,12 @@ var Menu2 = ({
       ...handlers,
       children: [
         trigger(() => setIsOpen(!isOpen), triggerRef),
-        isOpen ? /* @__PURE__ */ jsx48(
+        isOpen ? /* @__PURE__ */ jsx49(
           "div",
           {
             ref: menuRef,
             onClick: (e) => e.stopPropagation(),
-            className: clsx35("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: clsx36("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",
@@ -4459,7 +4508,7 @@ var Menu2 = ({
 };
 
 // src/components/user-action/MultiSelect.tsx
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 var defaultMultiSelectTranslation = {
   en: {
     select: "Select",
@@ -4500,15 +4549,15 @@ var MultiSelect = ({
     filteredOptions = filteredOptions.filter((value) => !value.disabled);
   }
   const selectedItems = options.filter((value) => value.selected);
-  const menuButtonText = selectedItems.length === 0 ? hintText ?? translation.select : /* @__PURE__ */ jsx49("span", { children: `${selectedItems.length} ${translation.selected}` });
+  const menuButtonText = selectedItems.length === 0 ? hintText ?? translation.select : /* @__PURE__ */ jsx50("span", { children: `${selectedItems.length} ${translation.selected}` });
   const borderColor = "border-menu-border";
-  return /* @__PURE__ */ jsxs34("div", { className: clsx36(className), children: [
-    label && /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs34("div", { className: clsx37(className), children: [
+    label && /* @__PURE__ */ jsx50(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: clsx36(" mb-1", label.className),
+        className: clsx37(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
@@ -4516,12 +4565,12 @@ var MultiSelect = ({
       Menu2,
       {
         alignment: "t_",
-        trigger: (onClick, ref) => /* @__PURE__ */ jsx49(
+        trigger: (onClick, ref) => /* @__PURE__ */ jsx50(
           "div",
           {
             ref,
             onClick: disabled ? void 0 : onClick,
-            className: clsx36(
+            className: clsx37(
               borderColor,
               "bg-menu-background text-menu-text inline-w-full justify-between items-center rounded-lg border-2 px-4 py-2 font-medium",
               {
@@ -4533,27 +4582,27 @@ var MultiSelect = ({
             children: selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText
           }
         ),
-        menuClassName: clsx36(
+        menuClassName: clsx37(
           "!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__ */ jsxs34("div", { className: "row gap-x-2 items-center px-2 py-2", children: [
-            /* @__PURE__ */ jsx49(Input, { autoFocus: true, className: "w-full", value: searchText, onChangeText: setSearchText }),
-            /* @__PURE__ */ jsx49(Search3, {})
+            /* @__PURE__ */ jsx50(Input, { autoFocus: true, className: "w-full", value: searchText, onChangeText: setSearchText }),
+            /* @__PURE__ */ jsx50(Search3, {})
           ] }, "selectSearch"),
-          filteredOptions.map((option, index) => /* @__PURE__ */ jsx49(
+          filteredOptions.map((option, index) => /* @__PURE__ */ jsx50(
             MenuItem,
             {
-              className: clsx36({
+              className: clsx37({
                 "cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100": !!option.disabled,
                 "cursor-pointer": !option.disabled
               }),
               children: /* @__PURE__ */ jsxs34(
                 "div",
                 {
-                  className: clsx36("overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2", option.className),
+                  className: clsx37("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 ? {
@@ -4563,7 +4612,7 @@ var MultiSelect = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsx49(Checkbox, { checked: option.selected, disabled: option.disabled, size: "small" }),
+                    /* @__PURE__ */ jsx50(Checkbox, { checked: option.selected, disabled: option.disabled, size: "small" }),
                     option.label
                   ]
                 }
@@ -4578,7 +4627,7 @@ var MultiSelect = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var defaultMultiSelectPropertyTranslation = {
   en: {
     select: "Select"
@@ -4602,7 +4651,7 @@ var MultiSelectProperty = ({
   if (softRequired && !hasValue) {
     triggerClassName = "border-warning hover:brightness-90";
   }
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     PropertyBase,
     {
       name,
@@ -4610,23 +4659,23 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ jsx50(List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx50(
+      icon: /* @__PURE__ */ jsx51(List, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx51(
         "div",
         {
-          className: clsx37("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ jsx50(
+          className: clsx38("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ jsx51(
             MultiSelect,
             {
               ...multiSelectProps,
-              className: clsx37("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: clsx38("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               triggerClassName,
               selectedDisplay: ({ items }) => {
                 const selected = items.filter((value) => value.selected);
                 if (selected.length === 0) {
-                  return /* @__PURE__ */ jsx50("span", { children: "Select" });
+                  return /* @__PURE__ */ jsx51("span", { children: "Select" });
                 }
-                return /* @__PURE__ */ jsx50(ChipList, { list: selected.map((value) => ({ children: value.label })) });
+                return /* @__PURE__ */ jsx51(ChipList, { list: selected.map((value) => ({ children: value.label })) });
               },
               options,
               disabled: readOnly,
@@ -4641,8 +4690,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import clsx38 from "clsx";
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import clsx39 from "clsx";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -4663,23 +4712,23 @@ var NumberProperty = ({
 }) => {
   const translation = useTranslation(defaultNumberPropertyTranslation, overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx51(Binary, { size: 16 }),
+      icon: /* @__PURE__ */ jsx52(Binary, { size: 16 }),
       input: ({ softRequired }) => /* @__PURE__ */ jsxs35(
         "div",
         {
-          className: clsx38("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          className: clsx39("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx52(
               Input,
               {
                 expanded: false,
-                className: clsx38("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: clsx39("!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,
@@ -4702,7 +4751,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx51("span", { className: clsx38("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ jsx52("span", { className: clsx39("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -4712,8 +4761,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import clsx39 from "clsx";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import clsx40 from "clsx";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var defaultSingleSelectPropertyTranslation = {
   en: {
     select: "Select"
@@ -4734,7 +4783,7 @@ var SingleSelectProperty = ({
 }) => {
   const translation = useTranslation(defaultSingleSelectPropertyTranslation, overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     PropertyBase,
     {
       name,
@@ -4742,19 +4791,19 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ jsx52(List2, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx52(
+      icon: /* @__PURE__ */ jsx53(List2, { size: 16 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx53(
         "div",
         {
-          className: clsx39("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ jsx52(
+          className: clsx40("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
+          children: /* @__PURE__ */ jsx53(
             SearchableSelect,
             {
               ...multiSelectProps,
               value,
               options,
               isDisabled: readOnly,
-              className: clsx39("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+              className: clsx40("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
               hintText: `${translation.select}...`
             }
           )
@@ -4766,12 +4815,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import clsx41 from "clsx";
+import clsx42 from "clsx";
 
 // src/components/user-action/Textarea.tsx
 import { useEffect as useEffect18, useState as useState21 } from "react";
-import clsx40 from "clsx";
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import clsx41 from "clsx";
+import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 var Textarea = ({
   label,
   headline,
@@ -4793,26 +4842,26 @@ var Textarea = ({
     clearUpdateTimer();
   };
   return /* @__PURE__ */ jsxs36("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx53(
+    label && /* @__PURE__ */ jsx54(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: clsx40("mb-1", label.className),
+        className: clsx41("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
     /* @__PURE__ */ jsxs36(
       "div",
       {
-        className: `${clsx40(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: `${clsx41(" 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__ */ jsx53("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
-          /* @__PURE__ */ jsx53(
+          headline && /* @__PURE__ */ jsx54("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
+          /* @__PURE__ */ jsx54(
             "textarea",
             {
               id,
-              className: clsx40("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", {
+              className: clsx41("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
@@ -4839,7 +4888,7 @@ var Textarea = ({
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ jsx53("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ jsx54("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -4851,7 +4900,7 @@ var TextareaUncontrolled = ({
   useEffect18(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Textarea,
     {
       ...props,
@@ -4865,7 +4914,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var defaultTextPropertyTranslation = {
   en: {
     value: "Text"
@@ -4885,21 +4934,21 @@ var TextProperty = ({
 }) => {
   const translation = useTranslation(defaultTextPropertyTranslation, overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx54(Text, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx54(
+      icon: /* @__PURE__ */ jsx55(Text, { size: 16 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx55(
         "div",
         {
-          className: clsx41("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ jsx54(
+          className: clsx42("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          children: /* @__PURE__ */ jsx55(
             Textarea,
             {
-              className: clsx41("ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+              className: clsx42("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 ?? "",
@@ -4928,8 +4977,8 @@ var TextProperty = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-import clsx42 from "clsx";
-import { jsx as jsx55, jsxs as jsxs37 } from "react/jsx-runtime";
+import clsx43 from "clsx";
+import { jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultTimeTranslation = {
   en: {
     clear: "Clear",
@@ -4988,7 +5037,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx55(
+    dateDisplay = /* @__PURE__ */ jsx56(
       DatePicker,
       {
         ...datePickerProps,
@@ -5002,11 +5051,11 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx55(
+    timeDisplay = /* @__PURE__ */ jsx56(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx42("h-full", { "justify-between w-full": mode === "time" }),
+        className: clsx43("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
@@ -5018,9 +5067,9 @@ var DateTimePicker = ({
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx55("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs37("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ jsx55(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
-      /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs37("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ jsx56(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
+      /* @__PURE__ */ jsx56(
         SolidButton,
         {
           size: "medium",
@@ -5034,8 +5083,8 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 import { useCallback as useCallback4, useEffect as useEffect19, useState as useState22 } from "react";
-import clsx43 from "clsx";
-import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
+import clsx44 from "clsx";
+import { jsx as jsx57, jsxs as jsxs38 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -5174,7 +5223,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       className: "relative overflow-hidden",
@@ -5185,14 +5234,14 @@ var ScrollPicker = ({
         }
       },
       children: /* @__PURE__ */ jsxs38("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx57(
           "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__ */ jsx56(
+        /* @__PURE__ */ jsx57(
           "div",
           {
             className: "col select-none",
@@ -5200,10 +5249,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx56(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx57(
               "div",
               {
-                className: clsx43(
+                className: clsx44(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -5232,8 +5281,8 @@ var ScrollPicker = ({
 // src/components/user-action/ToggleableInput.tsx
 import { useEffect as useEffect20, useRef as useRef8, useState as useState23 } from "react";
 import { Pencil } from "lucide-react";
-import clsx44 from "clsx";
-import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import clsx45 from "clsx";
+import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
 var ToggleableInput = ({
   type = "text",
   value,
@@ -5263,10 +5312,10 @@ var ToggleableInput = ({
     /* @__PURE__ */ jsxs39(
       "div",
       {
-        className: clsx44("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: clsx45("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ jsx57("div", { className: clsx44("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58("div", { className: clsx45("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx58(
             "input",
             {
               ref,
@@ -5294,16 +5343,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: clsx44(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: clsx45(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ jsx57("span", { className: clsx44("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ jsx57(
+          ) : /* @__PURE__ */ jsx58("span", { className: clsx45("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ jsx58(
             Pencil,
             {
-              className: clsx44(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: clsx45(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -5311,7 +5360,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ jsx57("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ jsx58("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -5323,7 +5372,7 @@ var ToggleableInputUncontrolled = ({
   useEffect20(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     ToggleableInput,
     {
       value,
@@ -5391,6 +5440,7 @@ export {
   ChipList,
   Circle,
   ConfirmDialog,
+  ConfirmModal,
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
@@ -5425,7 +5475,6 @@ export {
   Menu2 as Menu,
   MenuItem,
   Modal,
-  ModalHeader,
   MultiSearchWithMapping,
   MultiSelect,
   MultiSelectProperty,
@@ -5433,6 +5482,7 @@ export {
   NumberProperty,
   OutlineButton,
   Overlay,
+  OverlayHeader,
   Pagination,
   ProgressIndicator,
   PropertyBase,