@helpwave/hightide 0.1.18 → 0.1.20

package/dist/index.mjs

@@ -2894,7 +2894,7 @@ var Tile = ({
   description,
   onClick,
   isSelected = false,
-  isDisabled = false,
+  disabled = false,
   prefix,
   suffix,
   normalClassName = "hover:bg-primary/40 cursor-pointer",
@@ -2906,18 +2906,18 @@ var Tile = ({
     "div",
     {
       className: clsx(
-        "row gap-x-2 w-full items-center",
+        "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !isDisabled,
-          [selectedClassName]: isSelected && !isDisabled,
-          [disabledClassName]: isDisabled
+          [normalClassName]: !!onClick && !disabled,
+          [selectedClassName]: isSelected && !disabled,
+          [disabledClassName]: disabled
         },
         className
       ),
-      onClick: isDisabled ? void 0 : onClick,
+      onClick: disabled ? void 0 : onClick,
       children: [
         prefix,
-        /* @__PURE__ */ jsxs("div", { className: "col gap-y-0 w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-col-0 w-full", children: [
           /* @__PURE__ */ jsx("h4", { className: clsx(title.className ?? "textstyle-title-normal"), children: title.value }),
           !!description && /* @__PURE__ */ jsx("span", { className: clsx(description.className ?? "textstyle-description"), children: description.value })
         ] }),
@@ -3454,6 +3454,7 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 import clsx8 from "clsx";
 
 // src/components/user-action/Button.tsx
+import { forwardRef } from "react";
 import clsx4 from "clsx";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var ButtonColorUtil = {
@@ -3479,7 +3480,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = forwardRef(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -3489,7 +3490,7 @@ var SolidButton = ({
   onClick,
   className,
   ...restProps
-}) => {
+}, ref) {
   const colorClasses = {
     primary: "bg-button-solid-primary-background text-button-solid-primary-text",
     secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
@@ -3511,8 +3512,9 @@ var SolidButton = ({
   return /* @__PURE__ */ jsxs3(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: clsx4(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -3547,7 +3549,7 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var OutlineButton = ({
   children,
   disabled = false,
@@ -3568,8 +3570,8 @@ var OutlineButton = ({
   return /* @__PURE__ */ jsxs3(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      onClick,
+      disabled,
       className: clsx4(
         {
           "text-disabled-text border-disabled-outline cursor-not-allowed": disabled,
@@ -3629,8 +3631,8 @@ var TextButton = ({
   return /* @__PURE__ */ jsxs3(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      onClick,
+      disabled,
       className: clsx4(
         {
           "text-disabled-text cursor-not-allowed": disabled,
@@ -3671,7 +3673,6 @@ var IconButton = ({
   disabled = false,
   color = "primary",
   size = "medium",
-  onClick,
   className,
   ...restProps
 }) => {
@@ -3688,8 +3689,7 @@ var IconButton = ({
   return /* @__PURE__ */ jsx5(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      disabled,
       className: clsx4(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
@@ -3712,12 +3712,23 @@ import { Scrollbars } from "react-custom-scrollbars-2";
 import clsx6 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useEffect as useEffect3, useState as useState3 } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import { ChevronDown } from "lucide-react";
 import clsx5 from "clsx";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx6(ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ jsx6(ChevronDown, { className: "min-w-4 w-4" });
-var Expandable = forwardRef(function Expandable2({
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ jsx6(
+    ChevronDown,
+    {
+      className: clsx5(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
+var Expandable = forwardRef2(function Expandable2({
   children,
   label,
   icon,
@@ -3727,24 +3738,26 @@ var Expandable = forwardRef(function Expandable2({
   disabled = false,
   className,
   headerClassName,
-  contentClassName
+  contentClassName,
+  contentExpandedClassName
 }, ref) {
-  icon ??= DefaultIcon;
+  const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx6(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
   return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref,
-      className: clsx5("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: clsx5("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
       children: [
         /* @__PURE__ */ jsxs4(
           "div",
           {
             className: clsx5(
-              "row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
-                "group-hover:brightness-95": !isExpanded,
-                "hover:brightness-95": isExpanded && !disabled,
+                "group-hover:brightness-97": !isExpanded,
+                "hover:brightness-97": isExpanded && !disabled,
                 "cursor-pointer": clickOnlyOnHeader && !disabled
               },
               headerClassName
@@ -3756,12 +3769,25 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx6("div", { className: clsx5("col px-4 pb-2", contentClassName), children })
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: clsx5(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [clsx5("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            children
+          }
+        )
       ]
     }
   );
 });
-var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
   isExpanded,
   onChange = noop,
   ...props
@@ -3813,7 +3839,7 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ jsx7("div", { className: clsx6("col select-none", className), children: /* @__PURE__ */ jsx7(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx7("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ jsx7("div", { className: clsx6("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx7(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx7("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ jsx7(
       ExpandableUncontrolled,
@@ -3822,7 +3848,7 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ jsx7("span", { className: clsx6({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx7("div", { className: "row gap-x-1", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx7("div", { className: "flex-row-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -3888,9 +3914,9 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ jsxs5("div", { className: clsx7("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ jsx8("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx8("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ jsx8("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs5("div", { className: clsx7("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx8("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx8("div", { className: "flex-row-2 text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
       const isToday = equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
@@ -4038,12 +4064,12 @@ var DatePicker = ({
   useEffect6(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ jsxs6("div", { className: clsx8("col gap-y-4", className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "row items-center justify-between h-7", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: clsx8("flex-col-4", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 items-center justify-between h-7", children: [
       /* @__PURE__ */ jsxs6(
         TextButton,
         {
-          className: clsx8("row gap-x-1 items-center cursor-pointer select-none", {
+          className: clsx8("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
@@ -4053,7 +4079,7 @@ var DatePicker = ({
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ jsxs6("div", { className: "row justify-end", children: [
+      displayMode === "day" && /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 justify-end", children: [
         /* @__PURE__ */ jsx9(
           SolidButton,
           {
@@ -4267,8 +4293,8 @@ var TimePicker = ({
     transformer(newDate);
     onChange(newDate);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: clsx9("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ jsx11(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx11("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
+  return /* @__PURE__ */ jsxs7("div", { className: clsx9("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ jsx11(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx11("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
       const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ jsx11(
         "button",
@@ -4281,7 +4307,7 @@ var TimePicker = ({
         hour
       );
     }) }) }),
-    /* @__PURE__ */ jsx11(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx11("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx11(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx11("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
       const currentMinute = minute === closestMinute;
       return /* @__PURE__ */ jsx11(
         "button",
@@ -4294,7 +4320,7 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs7("div", { className: "col gap-y-1", children: [
+    !is24HourFormat && /* @__PURE__ */ jsxs7("div", { className: "flex-col-1", children: [
       /* @__PURE__ */ jsx11(
         "button",
         {
@@ -4458,6 +4484,7 @@ import { X } from "lucide-react";
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -4470,6 +4497,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -4512,6 +4540,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -4524,6 +4553,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -4585,7 +4615,7 @@ var Overlay = ({
       /* @__PURE__ */ jsx13(
         "div",
         {
-          className: clsx11("fixed inset-0 h-screen w-screen bg-black/30", backgroundClassName),
+          className: clsx11("fixed inset-0 h-screen w-screen bg-overlay-shadow", backgroundClassName),
           onClick: onBackgroundClick
         }
       ),
@@ -4613,7 +4643,7 @@ var OverlayHeader = ({
 }) => {
   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: [
+  const titleRow = /* @__PURE__ */ jsxs9("div", { className: "flex-row-8 justify-between items-start", children: [
     title ?? /* @__PURE__ */ jsx13(
       "h2",
       {
@@ -4625,7 +4655,7 @@ var OverlayHeader = ({
     ),
     !!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: [
+  return /* @__PURE__ */ jsxs9("div", { className: "flex-col-2", children: [
     hasTitleRow && titleRow,
     description ?? (descriptionText && /* @__PURE__ */ jsx13("span", { className: "textstyle-description", children: descriptionText }))
   ] });
@@ -4688,7 +4718,7 @@ var Modal = ({
           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",
+            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl animate-pop-in",
             className
           ),
           role: "dialog",
@@ -4757,7 +4787,7 @@ var Dialog = ({
           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",
+            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl animate-pop-in",
             className
           ),
           role: "dialog",
@@ -4792,8 +4822,8 @@ var ConfirmDialog = ({
     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: [
+    /* @__PURE__ */ jsx14("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex-row-4 mt-3 justify-end", children: [
       onDecline && /* @__PURE__ */ jsx14(
         SolidButton,
         {
@@ -4868,7 +4898,7 @@ var AvatarGroup = ({
   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: [
+  return /* @__PURE__ */ jsxs11("div", { className: "flex-row-2 relative", style: { height: diameter + "px" }, children: [
     /* @__PURE__ */ jsx15("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx15(
       "div",
       {
@@ -4881,7 +4911,7 @@ var AvatarGroup = ({
     notDisplayedProfiles > 0 && /* @__PURE__ */ jsx15(
       "div",
       {
-        className: "truncate row items-center",
+        className: "flex-row-2 truncate items-center",
         style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
         children: /* @__PURE__ */ jsxs11("span", { children: [
           "+ ",
@@ -4917,7 +4947,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback2, useEffect as useEffect10, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useState as useState10 } from "react";
 import clsx15 from "clsx";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Ring = ({
@@ -4948,7 +4978,7 @@ var AnimatedRing = ({
 }) => {
   const [currentWidth, setCurrentWidth] = useState10(0);
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = useCallback2((timestamp, startTime) => {
+  const animate = useCallback3((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newWidth = Math.min(width * progress, width);
     setCurrentWidth(newWidth);
@@ -4970,7 +5000,7 @@ var AnimatedRing = ({
   return /* @__PURE__ */ jsx17(
     "div",
     {
-      className: "row items-center justify-center",
+      className: "flex-row-2 items-center justify-center",
       style: {
         width: `${innerSize + 2 * width}px`,
         height: `${innerSize + 2 * width}px`,
@@ -5000,7 +5030,7 @@ var RingWave = ({
   const [currentInnerSize, setCurrentInnerSize] = useState10(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = useCallback2((timestamp, startTime) => {
+  const animate = useCallback3((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newInnerSize = Math.min(
       startInnerSize + distance * progress,
@@ -5025,7 +5055,7 @@ var RingWave = ({
   return /* @__PURE__ */ jsx17(
     "div",
     {
-      className: "row items-center justify-center",
+      className: "flex-row-2 items-center justify-center",
       style: {
         width: `${endInnerSize + 2 * width}px`,
         height: `${endInnerSize + 2 * width}px`,
@@ -5205,7 +5235,7 @@ import clsx16 from "clsx";
 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 gap-x-0", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs13("div", { children: [
+  return /* @__PURE__ */ jsx19("div", { className: clsx16("flex-row-0", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs13("div", { children: [
     /* @__PURE__ */ jsx19(
       import_link.default,
       {
@@ -5219,7 +5249,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 };
 
 // src/components/layout-and-navigation/Carousel.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useMemo, useRef as useRef4, useState as useState11 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo, useRef as useRef4, useState as useState11 } from "react";
 import clsx17 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -5367,7 +5397,7 @@ var Carousel = ({
     const baseOffset = -50 + (index - currentPosition) * 100;
     return `${baseOffset}%`;
   };
-  const animation = useCallback3((time) => {
+  const animation = useCallback4((time) => {
     let keepAnimating = true;
     setCarouselInformation((state) => {
       const {
@@ -5566,7 +5596,7 @@ var Carousel = ({
     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: [
+  return /* @__PURE__ */ jsxs14("div", { className: "flex-col-2 items-center w-full", children: [
     /* @__PURE__ */ jsxs14("div", { className: clsx17(`relative w-full overflow-hidden`, heightClassName, className), children: [
       arrows && /* @__PURE__ */ jsxs14(Fragment, { children: [
         /* @__PURE__ */ jsx20(
@@ -5590,8 +5620,8 @@ var Carousel = ({
           }
         )
       ] }),
-      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(({
+      hintNext ? /* @__PURE__ */ jsxs14("div", { className: clsx17(`flex-row-2 relative h-full`, heightClassName), children: [
+        /* @__PURE__ */ jsx20("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
           item,
           index
         }, listIndex) => /* @__PURE__ */ jsx20(
@@ -5622,7 +5652,7 @@ var Carousel = ({
     dots && /* @__PURE__ */ jsx20(
       "div",
       {
-        className: "row items-center justify-center w-full my-2",
+        className: "flex-row-2 items-center justify-center w-full my-2",
         children: range(length).map((index) => /* @__PURE__ */ jsx20(
           "button",
           {
@@ -5692,7 +5722,7 @@ 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(
+  return /* @__PURE__ */ jsx21("div", { className: clsx18("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx21(
     Chip,
     {
       ...value,
@@ -5728,7 +5758,6 @@ var DividerInserter = ({
 
 // 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";
@@ -5967,14 +5996,13 @@ 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(
+  return /* @__PURE__ */ jsx24("div", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx24(
     ExpandableUncontrolled,
     {
       ...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" }),
+      icon: (expanded) => /* @__PURE__ */ jsx24(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
       className: clsx20("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ jsx24("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx24(MarkdownInterpreter, { text: content.value }) : content.value })
     },
@@ -5987,7 +6015,7 @@ import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as
 import clsx23 from "clsx";
 
 // src/components/user-action/Input.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect14, useImperativeHandle, useRef as useRef5, useState as useState13 } from "react";
+import { forwardRef as forwardRef3, useEffect as useEffect14, useImperativeHandle, useRef as useRef5, useState as useState13 } from "react";
 import clsx22 from "clsx";
 
 // src/hooks/useDelay.ts
@@ -6049,9 +6077,9 @@ var Label = ({
 };
 
 // src/hooks/useFocusManagement.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 function useFocusManagement() {
-  const getFocusableElements = useCallback4(() => {
+  const getFocusableElements = useCallback5(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -6060,7 +6088,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = useCallback4(() => {
+  const getNextFocusElement = useCallback5(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -6072,11 +6100,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = useCallback4(() => {
+  const focusNext = useCallback5(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = useCallback4(() => {
+  const getPreviousFocusElement = useCallback5(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -6092,7 +6120,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = useCallback4(() => {
+  const focusPrevious = useCallback5(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -6145,7 +6173,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = forwardRef2(function Input2({
+var Input = forwardRef3(function Input2({
   id,
   type = "text",
   value,
@@ -6241,7 +6269,7 @@ var InputUncontrolled = ({
     }
   );
 };
-var FormInput = forwardRef2(function FormInput2({
+var FormInput = forwardRef3(function FormInput2({
   id,
   labelText,
   errorText,
@@ -6302,10 +6330,10 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs17("div", { className: clsx23("row gap-x-1", className), style, children: [
+  return /* @__PURE__ */ jsxs17("div", { className: clsx23("flex-row-1", className), style, children: [
     /* @__PURE__ */ jsx27(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx27(ChevronFirst, {}) }),
     /* @__PURE__ */ jsx27(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx27(ChevronLeft2, {}) }),
-    /* @__PURE__ */ jsxs17("div", { className: "row min-w-56 gap-x-2 items-center justify-center mx-2 text-center", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
       /* @__PURE__ */ jsx27(
         Input,
         {
@@ -6335,7 +6363,7 @@ var Pagination = ({
       /* @__PURE__ */ jsx27(
         "span",
         {
-          className: "row flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
+          className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
           children: pageCount
         }
       )
@@ -6350,12 +6378,15 @@ import { Search } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/hooks/useSearch.ts
-import { useEffect as useEffect16, useMemo as useMemo2, useState as useState15 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect16, useMemo as useMemo2, useState as useState15 } from "react";
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
   return objects.filter((object) => {
-    const mappedSearchKeywords = mapping(object).map((value) => value ? value.toLowerCase().trim() : void 0);
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
     return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
   });
 };
@@ -6379,22 +6410,51 @@ var SimpleSearch = (search, objects) => {
 var useSearch = ({
   list,
   initialSearch,
-  searchMapping
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
 }) => {
-  const [items, setItems] = useState15(list);
-  const [search, setSearch] = useState15(initialSearch);
+  const [search, setSearch] = useState15(initialSearch ?? "");
+  const [result, setResult] = useState15(list);
+  const searchTags = useMemo2(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = useCallback6((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
   useEffect16(() => {
-    setItems(list);
-  }, [list]);
-  const result = useMemo2(
-    () => MultiSearchWithMapping(search, items, searchMapping),
-    [search, items, searchMapping]
-  );
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = useMemo2(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = useMemo2(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = useMemo2(() => {
+    if (!disabled) {
+      return sortedAndFilteredResult;
+    }
+    return list;
+  }, [disabled, list, sortedAndFilteredResult]);
   return {
-    result,
-    hasResult: result.length > 0,
-    allItems: items,
-    setItems,
+    result: usedResult,
+    hasResult: usedResult.length > 0,
+    allItems: list,
+    updateSearch,
     search,
     setSearch
   };
@@ -6422,9 +6482,9 @@ var SearchableList = ({
   resultListClassName
 }) => {
   const translation = useTranslation([defaultSearchableListTranslation, formTranslation], overwriteTranslation);
-  const { result, hasResult, search, setSearch } = useSearch({ list, initialSearch, searchMapping });
-  return /* @__PURE__ */ jsxs18("div", { className: clsx24("col gap-y-2", className), children: [
-    list.length > minimumItemsForSearch && /* @__PURE__ */ jsxs18("div", { className: "row justify-between gap-x-4 items-center", children: [
+  const { result, hasResult, search, setSearch, updateSearch } = useSearch({ list, initialSearch, searchMapping });
+  return /* @__PURE__ */ jsxs18("div", { className: clsx24("flex-col-2", className), children: [
+    list.length > minimumItemsForSearch && /* @__PURE__ */ jsxs18("div", { className: "flex-row-2 justify-between items-center", children: [
       /* @__PURE__ */ jsx28(
         Input,
         {
@@ -6435,9 +6495,9 @@ var SearchableList = ({
           className: "w-full"
         }
       ),
-      /* @__PURE__ */ jsx28(IconButton, { color: "neutral", disabled: search.length === 0, children: /* @__PURE__ */ jsx28(Search, { className: "w-full h-full" }) })
+      /* @__PURE__ */ jsx28(IconButton, { color: "neutral", onClick: () => updateSearch(), children: /* @__PURE__ */ jsx28(Search, { className: "w-full h-full" }) })
     ] }),
-    hasResult ? /* @__PURE__ */ jsx28("div", { className: clsx24("col gap-y-1", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ jsx28("div", { className: "row text-description py-2 px-2", children: translation("nothingFound") })
+    hasResult ? /* @__PURE__ */ jsx28("div", { className: clsx24("flex-col-1 overflow-y-auto", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ jsx28("div", { className: "flex-row-2 text-description py-2 px-2", children: translation("nothingFound") })
   ] });
 };
 
@@ -6471,23 +6531,23 @@ var StepperBar = ({
   return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: clsx25("row justify-between", className),
+      className: clsx25("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ jsx29("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx29("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
             onClick: () => {
               update(currentStep - 1);
             },
-            className: "row gap-x-1 items-center justify-center",
+            className: "flex-row-1 items-center justify-center",
             children: [
               /* @__PURE__ */ jsx29(ChevronLeft3, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx29("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx29("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
           return /* @__PURE__ */ jsx29(
             "div",
@@ -6509,11 +6569,11 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ jsx29("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx29("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
             onClick: () => update(currentStep + 1),
-            className: "row gap-x-1 items-center justify-center",
+            className: "flex-row-1 items-center justify-center",
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
@@ -6521,12 +6581,12 @@ var StepperBar = ({
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ jsx29("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx29("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
-            className: "row gap-x-1 items-center justify-center",
+            className: "flex-row-1 items-center justify-center",
             children: [
               /* @__PURE__ */ jsx29(Check2, { size: 14 }),
               finishText ?? translation("confirm")
@@ -6591,14 +6651,14 @@ var TextImage = ({
       children: /* @__PURE__ */ jsxs20(
         "div",
         {
-          className: clsx26(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: clsx26(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
             badge && /* @__PURE__ */ jsx30("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx30("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ jsxs20("div", { className: "col gap-y-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ jsx30("span", { className: "textstyle-title-xl", children: title }),
               /* @__PURE__ */ jsx30("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ jsx30("div", { className: "row mt-2 underline", children: /* @__PURE__ */ jsx30("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+            onShowMoreClicked && /* @__PURE__ */ jsx30("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx30("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
           ]
         }
       )
@@ -6677,7 +6737,7 @@ var ErrorComponent = ({
   classname
 }) => {
   const translation = useTranslation([defaultErrorComponentTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsxs22("div", { className: clsx27("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs22("div", { className: clsx27("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx32(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -6686,30 +6746,24 @@ var ErrorComponent = ({
 // src/components/loading-states/LoadingAndErrorComponent.tsx
 import { useState as useState17 } from "react";
 
-// src/components/loading-states/LoadingAnimation.tsx
-import clsx28 from "clsx";
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
-var LoadingAnimation = ({
-  overwriteTranslation,
-  loadingText,
-  classname
-}) => {
-  const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsxs23("div", { className: clsx28("col items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx33(Helpwave, { animate: "loading" }),
-    loadingText ?? `${translation("loading")}...`
-  ] });
+// src/components/loading-states/LoadingContainer.tsx
+import { clsx as clsx28 } from "clsx";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var LoadingContainer = ({ className }) => {
+  return /* @__PURE__ */ jsx33("div", { className: clsx28("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
+import { clsx as clsx29 } from "clsx";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
   hasError = false,
-  errorProps,
-  loadingProps,
-  minimumLoadingDuration
+  loadingComponent,
+  errorComponent,
+  minimumLoadingDuration,
+  className
 }) => {
   const [isInMinimumLoading, setIsInMinimumLoading] = useState17(false);
   const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState17(false);
@@ -6721,27 +6775,42 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx34(LoadingAnimation, { ...loadingProps });
+    return loadingComponent ?? /* @__PURE__ */ jsx34(LoadingContainer, { className: clsx29(className) });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx34(ErrorComponent, { ...errorProps });
+    return errorComponent ?? /* @__PURE__ */ jsx34(LoadingContainer, { className: clsx29("bg-negative", className) });
   }
   return children;
 };
 
+// src/components/loading-states/LoadingAnimation.tsx
+import clsx30 from "clsx";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+var LoadingAnimation = ({
+  overwriteTranslation,
+  loadingText,
+  classname
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  return /* @__PURE__ */ jsxs23("div", { className: clsx30("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx35(Helpwave, { animate: "loading" }),
+    loadingText ?? `${translation("loading")}...`
+  ] });
+};
+
 // src/components/loading-states/LoadingButton.tsx
-import clsx29 from "clsx";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
   return /* @__PURE__ */ jsxs24("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx35("div", { className: clsx29("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx35(Helpwave, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ jsx35(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
+    isLoading && /* @__PURE__ */ jsx36("div", { className: clsx31("flex-row-2 absolute inset-0 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 })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -6767,7 +6836,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "circle",
           {
             cx: center,
@@ -6778,7 +6847,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "circle",
           {
             cx: center,
@@ -6797,8 +6866,8 @@ var ProgressIndicator = ({
 };
 
 // src/components/modals/ConfirmModal.tsx
-import clsx30 from "clsx";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import clsx32 from "clsx";
+import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 var ConfirmModal = ({
   overwriteTranslation,
   children,
@@ -6817,10 +6886,10 @@ var ConfirmModal = ({
     positive: "positive",
     primary: "primary"
   };
-  return /* @__PURE__ */ jsxs26(Modal, { ...restProps, onClose: onCancel, className: clsx30("justify-between", className), children: [
-    /* @__PURE__ */ jsx37("div", { className: "col grow", children }),
-    /* @__PURE__ */ jsxs26("div", { className: "row mt-3 gap-x-4 justify-end", children: [
-      onCancel && /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs26(Modal, { ...restProps, onClose: onCancel, className: clsx32("justify-between", className), children: [
+    /* @__PURE__ */ jsx38("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ jsxs26("div", { className: "flex-row-4 mt-3 justify-end", children: [
+      onCancel && /* @__PURE__ */ jsx38(
         SolidButton,
         {
           color: buttonOverwrites?.[0].color ?? "neutral",
@@ -6829,7 +6898,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[0].text ?? translation("cancel")
         }
       ),
-      onDecline && /* @__PURE__ */ jsx37(
+      onDecline && /* @__PURE__ */ jsx38(
         SolidButton,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
@@ -6838,7 +6907,7 @@ var ConfirmModal = ({
           children: buttonOverwrites?.[1].text ?? translation("decline")
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         SolidButton,
         {
           autoFocus: true,
@@ -6853,7 +6922,7 @@ var ConfirmModal = ({
 };
 
 // src/components/modals/DiscardChangesModal.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var DiscardChangesModal = ({
   overwriteTranslation,
   children,
@@ -6864,7 +6933,7 @@ var DiscardChangesModal = ({
   ...modalProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     ConfirmModal,
     {
       headerProps: {
@@ -6883,26 +6952,34 @@ var DiscardChangesModal = ({
 };
 
 // src/components/modals/InputModal.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var InputModal = ({
   inputs,
   buttonOverwrites,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     ConfirmModal,
     {
       buttonOverwrites,
       ...restProps,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx39(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx40(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
 
 // src/components/user-action/Select.tsx
-import { ChevronDown as ChevronDown4, ChevronUp as ChevronUp3 } from "lucide-react";
-import { useEffect as useEffect19, useRef as useRef6, useState as useState18 } from "react";
-import clsx31 from "clsx";
+import { useCallback as useCallback7 } from "react";
+import { useEffect as useEffect20, useState as useState19 } from "react";
+import clsx35 from "clsx";
+
+// src/components/user-action/Menu.tsx
+import {
+  useEffect as useEffect19,
+  useRef as useRef6,
+  useState as useState18
+} from "react";
+import clsx33 from "clsx";
 
 // src/hooks/useOutsideClick.ts
 import { useEffect as useEffect18 } from "react";
@@ -6924,83 +7001,305 @@ var useOutsideClick = (refs, handler) => {
   }, [refs, handler]);
 };
 
+// src/util/PropsWithFunctionChildren.ts
+var resolve = (children, bag) => {
+  if (typeof children === "function") {
+    return children(bag);
+  }
+  return children ?? void 0;
+};
+var BagFunctionUtil = {
+  resolve
+};
+
+// src/hooks/usePopoverPosition.ts
+var defaultPopoverPositionOptions = {
+  edgePadding: 16,
+  outerGap: 4,
+  horizontalAlignment: "leftInside",
+  verticalAlignment: "bottomOutside",
+  disabled: false
+};
+var usePopoverPosition = (trigger, options) => {
+  const {
+    edgePadding,
+    outerGap,
+    verticalAlignment,
+    horizontalAlignment,
+    disabled
+  } = { ...defaultPopoverPositionOptions, ...options };
+  if (disabled || !trigger) {
+    return {};
+  }
+  const left = {
+    leftOutside: trigger.left - outerGap,
+    leftInside: trigger.left,
+    rightOutside: trigger.right + outerGap,
+    rightInside: trigger.right,
+    center: trigger.left + trigger.width / 2
+  }[horizontalAlignment];
+  const top = {
+    topOutside: trigger.top - outerGap,
+    topInside: trigger.top,
+    bottomOutside: trigger.bottom + outerGap,
+    bottomInside: trigger.bottom,
+    center: trigger.top + trigger.height / 2
+  }[verticalAlignment];
+  const translateX = {
+    leftOutside: "-100%",
+    leftInside: void 0,
+    rightOutside: void 0,
+    rightInside: "-100%",
+    center: "-50%"
+  }[horizontalAlignment];
+  const translateY = {
+    topOutside: "-100%",
+    topInside: void 0,
+    bottomOutside: void 0,
+    bottomInside: "-100%",
+    center: "-50%"
+  }[verticalAlignment];
+  return {
+    left: Math.max(left, edgePadding),
+    top: Math.max(top, edgePadding),
+    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
+  };
+};
+
+// src/components/user-action/Menu.tsx
+import { createPortal } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+var MenuItem = ({
+  children,
+  onClick,
+  alignment = "left",
+  isDisabled = false,
+  className
+}) => /* @__PURE__ */ jsx41(
+  "div",
+  {
+    className: clsx33("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
+      "text-right": alignment === "right",
+      "text-left": alignment === "left",
+      "text-disabled-text cursor-not-allowed": isDisabled,
+      "text-menu-text hover:bg-primary/20": !isDisabled,
+      "cursor-pointer": !!onClick
+    }, className),
+    onClick,
+    children
+  }
+);
+function getScrollableParents(element) {
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    scrollables.push(parent);
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
+var Menu = ({
+  trigger,
+  children,
+  alignmentHorizontal = "leftInside",
+  alignmentVertical = "bottomOutside",
+  showOnHover = false,
+  disabled = false,
+  menuClassName = ""
+}) => {
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
+  const triggerRef = useRef6(null);
+  const menuRef = useRef6(null);
+  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+  const [isHidden, setIsHidden] = useState18(true);
+  const bag = {
+    isOpen,
+    close: () => setIsOpen(false),
+    toggleOpen: () => setIsOpen((prevState) => !prevState),
+    disabled
+  };
+  const menuPosition = usePopoverPosition(
+    triggerRef.current?.getBoundingClientRect(),
+    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
+  );
+  useEffect19(() => {
+    if (!isOpen) return;
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+    const scrollableParents = getScrollableParents(triggerEl);
+    const close = () => setIsOpen(false);
+    scrollableParents.forEach((parent) => {
+      parent.addEventListener("scroll", close);
+    });
+    window.addEventListener("resize", close);
+    return () => {
+      scrollableParents.forEach((parent) => {
+        parent.removeEventListener("scroll", close);
+      });
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen, setIsOpen]);
+  useEffect19(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs27(Fragment3, { children: [
+    trigger(bag, triggerRef),
+    createPortal(/* @__PURE__ */ jsx41(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: clsx33(
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
+          {
+            "animate-pop-in": isOpen,
+            "animate-pop-out": !isOpen,
+            "hidden": isHidden
+          },
+          menuClassName
+        ),
+        onAnimationEnd: () => {
+          if (!isOpen) {
+            setIsHidden(true);
+          }
+        },
+        style: {
+          ...menuPosition
+        },
+        children: BagFunctionUtil.resolve(children, bag)
+      }
+    ), document.body)
+  ] });
+};
+
+// src/components/user-action/SearchBar.tsx
+import { Search as Search2 } from "lucide-react";
+import { clsx as clsx34 } from "clsx";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+var SearchBar = ({
+  placeholder,
+  onSearch,
+  disableOnSearch,
+  containerClassName,
+  ...inputProps
+}) => {
+  const translation = useTranslation([formTranslation]);
+  return /* @__PURE__ */ jsxs28("div", { className: clsx34("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ jsx42(
+      Input,
+      {
+        ...inputProps,
+        placeholder: placeholder ?? translation("search")
+      }
+    ),
+    onSearch && /* @__PURE__ */ jsx42(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ jsx42(Search2, { className: "w-full h-full" }) })
+  ] });
+};
+
 // src/components/user-action/Select.tsx
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+var SelectTile = ({
+  className,
+  disabledClassName,
+  title,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx43(
+    Tile,
+    {
+      ...restProps,
+      className: clsx35("px-2 py-1 rounded-md", className),
+      disabledClassName: disabledClassName ?? "text-disabled-text cursor-not-allowed",
+      title: { ...title, className: title.className ?? "font-semibold" }
+    }
+  );
+};
 var Select = ({
   value,
   label,
   options,
   onChange,
   hintText = "",
-  isDisabled,
-  isSearchEnabled = false,
+  selectedDisplayOverwrite,
+  searchOptions,
+  additionalItems,
   className,
-  selectedDisplayOverwrite
+  triggerClassName,
+  hintTextClassName,
+  ...menuProps
 }) => {
-  const triggerRef = useRef6(null);
-  const menuRef = useRef6(null);
-  const [isOpen, setIsOpen] = useState18(false);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const selectedOption = options.find((option) => option.value === value);
   if (value !== void 0 && selectedOption === void 0 && selectedDisplayOverwrite === void 0) {
     console.warn("The selected value is not found in the options list. This might be an error on your part or default behavior if it is complex data type on which === does not work. In case of the latter use selectedDisplayOverwrite to set your selected text or component");
   }
   const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label;
-  return /* @__PURE__ */ jsxs27("div", { className: clsx31(className), children: [
-    label && /* @__PURE__ */ jsx40(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx31("mb-1", label.className) }),
-    /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs27(
-        "button",
-        {
-          ref: triggerRef,
-          className: clsx31(
-            "btn-md justify-between w-full border-2",
-            {
-              "rounded-b-lg": !open,
-              "bg-menu-background border-menu-border hover:border-primary": !isDisabled,
-              "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": isDisabled
-            }
-          ),
-          onClick: () => setIsOpen(!isOpen),
-          disabled: isDisabled,
-          children: [
-            !isShowingHint && /* @__PURE__ */ jsx40("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
-            isShowingHint && /* @__PURE__ */ jsx40("span", { className: "textstyle-description", children: hintText }),
-            isOpen ? /* @__PURE__ */ jsx40(ChevronUp3, {}) : /* @__PURE__ */ jsx40(ChevronDown4, {})
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ jsx40(
-        "div",
-        {
-          ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
-          children: /* @__PURE__ */ jsx40(
-            SearchableList,
-            {
-              list: options,
-              minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
-              searchMapping: (item) => item.searchTags,
-              itemMapper: (option, index) => /* @__PURE__ */ jsx40(
-                Tile,
+  const { result, search, setSearch } = useSearch({
+    list: options,
+    searchMapping: useCallback7((item) => item.searchTags, []),
+    ...searchOptions
+  });
+  return /* @__PURE__ */ jsxs29("div", { className: clsx35(className), children: [
+    label && /* @__PURE__ */ jsx43(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx35("mb-1", label.className) }),
+    /* @__PURE__ */ jsx43(
+      Menu,
+      {
+        ...menuProps,
+        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ jsxs29(
+          "button",
+          {
+            ref,
+            className: clsx35(
+              "btn-md justify-between w-full border-2",
+              {
+                "rounded-b-lg": !open,
+                "bg-menu-background text-menu-text border-menu-border hover:border-primary": !disabled,
+                "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
+              },
+              triggerClassName
+            ),
+            onClick: toggleOpen,
+            disabled,
+            children: [
+              !isShowingHint && /* @__PURE__ */ jsx43("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? selectedOption?.label }),
+              isShowingHint && /* @__PURE__ */ jsx43("span", { className: clsx35("textstyle-description", hintTextClassName), children: hintText }),
+              /* @__PURE__ */ jsx43(ExpansionIcon, { isExpanded: isOpen })
+            ]
+          }
+        ),
+        menuClassName: clsx35("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
+        children: (bag) => {
+          const { close } = bag;
+          return /* @__PURE__ */ jsxs29(Fragment4, { children: [
+            !searchOptions?.disabled && /* @__PURE__ */ jsx43(
+              SearchBar,
+              {
+                value: search,
+                onChangeText: setSearch,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsxs29("div", { className: "flex-col-2 overflow-y-auto", children: [
+              result.map((option, index) => /* @__PURE__ */ jsx43(
+                SelectTile,
                 {
-                  isSelected: selectedOption?.value === option.value,
-                  className: "px-2 py-1 rounded-md",
-                  disabledClassName: "text-disabled-text cursor-not-allowed",
-                  title: { value: option.label, className: "font-semibold" },
+                  isSelected: option === selectedOption,
+                  title: { value: option.label },
                   onClick: () => {
                     onChange(option.value);
-                    setIsOpen(false);
+                    close();
                   },
-                  isDisabled: option.disabled
+                  disabled: option.disabled
                 },
                 index
-              )
-            }
-          )
+              )),
+              additionalItems && additionalItems({ ...bag, search, selected: value })
+            ] })
+          ] });
         }
-      )
-    ] })
+      }
+    )
   ] });
 };
 var SelectUncontrolled = ({
@@ -7010,13 +7309,13 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = useState18(value);
-  useEffect19(() => {
+  const [selected, setSelected] = useState19(value);
+  useEffect20(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx43(
     Select,
     {
       value: selected,
@@ -7032,7 +7331,7 @@ var SelectUncontrolled = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var defaultLanguageModalTranslation = {
   en: {
     language: "Language",
@@ -7055,7 +7354,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation([defaultLanguageModalTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx44(
     Modal,
     {
       headerProps: {
@@ -7065,8 +7364,8 @@ var LanguageModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ jsxs28("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsxs30("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx44(
           Select,
           {
             className: "mt-2",
@@ -7075,15 +7374,15 @@ var LanguageModal = ({
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ jsx41("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx41(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx44("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx44(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/theming/useTheme.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect20, useState as useState19 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect21, useState as useState20 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -7112,22 +7411,22 @@ var ThemeContext = createContext2({
   setTheme: noop
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = useState19(initialTheme);
-  useEffect20(() => {
+  const [theme, setTheme] = useState20(initialTheme);
+  useEffect21(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  useEffect20(() => {
+  useEffect21(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ jsx42(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ jsx45(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
 var useTheme = () => useContext2(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var defaultConfirmDialogTranslation = {
   en: {
     chooseTheme: "Choose your preferred theme"
@@ -7144,7 +7443,7 @@ var ThemeModal = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useTranslation([defaultConfirmDialogTranslation, formTranslation, ThemeUtil.translation], overwriteTranslation);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx46(
     Modal,
     {
       headerProps: {
@@ -7154,8 +7453,8 @@ var ThemeModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ jsxs29("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsxs31("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx46(
           Select,
           {
             className: "mt-2",
@@ -7164,7 +7463,7 @@ var ThemeModal = ({
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ jsx43("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ jsx43(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx46("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx46(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -7174,18 +7473,18 @@ var ThemeModal = ({
 import { Check as Check4 } from "lucide-react";
 
 // src/components/user-action/Checkbox.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check3, Minus } from "lucide-react";
-import clsx32 from "clsx";
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import clsx36 from "clsx";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 var checkboxSizeMapping = {
-  small: "size-4",
+  small: "size-5",
   medium: "size-6",
   large: "size-8"
 };
 var checkboxIconSizeMapping = {
-  small: "size-3",
+  small: "size-4",
   medium: "size-5",
   large: "size-7"
 };
@@ -7214,36 +7513,27 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ jsxs30("div", { className: clsx32("row justify-center items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs32("div", { className: clsx36("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
+    /* @__PURE__ */ jsx47(
       CheckboxPrimitive.Root,
       {
         onCheckedChange: propagateChange,
         checked,
         disabled,
         id,
-        className: clsx32(usedSizeClass, `items-center border-2 rounded outline-none `, {
+        className: clsx36(usedSizeClass, `items-center border-2 rounded outline-none `, {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary": !disabled,
+          "focus:border-primary group-hover:border-primary ": !disabled,
           "bg-surface": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate",
-          "hover:border-primary focus:hover:border-primary": !disabled && !checked
+          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
         }, className),
-        children: /* @__PURE__ */ jsxs30(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ jsx44(Check3, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ jsx44(Minus, { className: innerIconSize })
+        children: /* @__PURE__ */ jsxs32(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ jsx47(Check3, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ jsx47(Minus, { className: innerIconSize })
         ] })
       }
     ),
-    label && /* @__PURE__ */ jsx44(
-      Label,
-      {
-        ...label,
-        className: clsx32("cursor-pointer", label.className),
-        htmlFor: id,
-        onClick: changeValue
-      }
-    )
+    label && /* @__PURE__ */ jsx47(Label, { ...label, className: clsx36(label.className), htmlFor: id })
   ] });
 };
 var CheckboxUncontrolled = ({
@@ -7252,7 +7542,7 @@ var CheckboxUncontrolled = ({
   defaultValue = false,
   ...props
 }) => {
-  const [checked, setChecked] = useState20(defaultValue);
+  const [checked, setChecked] = useState21(defaultValue);
   const handleChange = (checked2) => {
     if (onChangeTristate) {
       onChangeTristate(checked2);
@@ -7262,7 +7552,7 @@ var CheckboxUncontrolled = ({
     }
     setChecked(checked2);
   };
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx47(
     Checkbox,
     {
       ...props,
@@ -7274,8 +7564,8 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
-import clsx33 from "clsx";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import clsx37 from "clsx";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var PropertyBase = ({
   overwriteTranslation,
   name,
@@ -7289,36 +7579,44 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ jsxs31("div", { className: clsx33("row gap-x-0 group", className), children: [
-    /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs33("div", { className: clsx37("flex-row-0 group", className), children: [
+    /* @__PURE__ */ jsxs33(
       "div",
       {
-        className: clsx33("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
-          "bg-property-title-background property-title-text group-hover:border-primary": !requiredAndNoValue,
-          "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
-        }, className),
+        className: clsx37(
+          "flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
+          {
+            "bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
+            "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
+          },
+          className
+        ),
         children: [
-          icon,
-          name
+          /* @__PURE__ */ jsx48("div", { className: "max-w-6 min-w-6 text-text-default", children: icon }),
+          /* @__PURE__ */ jsx48("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs31(
+    /* @__PURE__ */ jsxs33(
       "div",
       {
-        className: clsx33("row gap-x-0 grow justify-between items-center rounded-r-xl border-2 border-l-0", {
-          "bg-surface group-hover:border-primary": !requiredAndNoValue,
-          "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
-        }, className),
+        className: clsx37(
+          "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
+          {
+            "bg-surface group-hover:border-primary": !requiredAndNoValue,
+            "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__ */ jsx48("div", { className: "text-warning", children: /* @__PURE__ */ jsx48(AlertTriangle, { size: 24 }) }),
+          onRemove && hasValue && /* @__PURE__ */ jsx48(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: clsx33("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              className: clsx37("items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
               children: translation("remove")
             }
@@ -7330,7 +7628,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   overwriteTranslation,
   value,
@@ -7339,30 +7637,31 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx49(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ jsx46(Check4, { size: 16 }),
-      input: () => /* @__PURE__ */ jsx46("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ jsx46(
+      icon: /* @__PURE__ */ jsx49(Check4, { size: 24 }),
+      input: () => /* @__PURE__ */ jsx49(
         Checkbox,
         {
           checked: value ?? true,
           disabled: readOnly,
           onChange,
-          label: { name: `${translation("yes")}/${translation("no")}`, labelType: "labelMedium" }
+          label: { name: `${translation("yes")}/${translation("no")}`, labelType: "labelMedium" },
+          containerClassName: "w-full"
         }
-      ) })
+      )
     }
   );
 };
 
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import clsx34 from "clsx";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import clsx38 from "clsx";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onChange = noop,
@@ -7373,35 +7672,29 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx50(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx47(CalendarDays, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx47(
-        "div",
+      icon: /* @__PURE__ */ jsx50(CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx50(
+        Input,
         {
-          className: clsx34("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ jsx47(
-            Input,
-            {
-              className: clsx34("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
-              value: dateText,
-              type: type === "dateTime" ? "datetime-local" : "date",
-              readOnly,
-              onChange: (event) => {
-                const value2 = event.target.value;
-                if (!value2) {
-                  event.preventDefault();
-                  return;
-                }
-                const dueDate = new Date(value2);
-                onChange(dueDate);
-              },
-              onEditCompleted: (value2) => onEditComplete(new Date(value2))
+          className: clsx38("!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,
+          onChange: (event) => {
+            const value2 = event.target.value;
+            if (!value2) {
+              event.preventDefault();
+              return;
             }
-          )
+            const dueDate = new Date(value2);
+            onChange(dueDate);
+          },
+          onEditCompleted: (value2) => onEditComplete(new Date(value2))
         }
       )
     }
@@ -7409,14 +7702,15 @@ var DateProperty = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-import { List } from "lucide-react";
-import clsx36 from "clsx";
+import { List, Plus as Plus2 } from "lucide-react";
+import clsx40 from "clsx";
 
 // src/components/user-action/MultiSelect.tsx
-import { useEffect as useEffect21, useRef as useRef7, useState as useState21 } from "react";
-import { ChevronDown as ChevronDown5, ChevronUp as ChevronUp4 } from "lucide-react";
-import clsx35 from "clsx";
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useCallback as useCallback8 } from "react";
+import { useEffect as useEffect22, useState as useState22 } from "react";
+import clsx39 from "clsx";
+import { Plus } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 var defaultMultiSelectTranslation = {
   en: {
     selected: `{{amount}} selected`
@@ -7427,89 +7721,107 @@ var defaultMultiSelectTranslation = {
 };
 var MultiSelect = ({
   overwriteTranslation,
-  options,
   label,
+  options,
   onChange,
   hintText,
-  isDisabled = false,
-  isSearchEnabled = false,
   selectedDisplayOverwrite,
+  searchOptions,
+  additionalItems,
   useChipDisplay = false,
-  className = ""
+  className,
+  triggerClassName,
+  hintTextClassName,
+  ...menuProps
 }) => {
   const translation = useTranslation([formTranslation, defaultMultiSelectTranslation], overwriteTranslation);
-  const triggerRef = useRef7(null);
-  const menuRef = useRef7(null);
-  const [isOpen, setIsOpen] = useState21(false);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+  const { result, search, setSearch } = useSearch({
+    list: options,
+    searchMapping: useCallback8((item) => item.searchTags, []),
+    ...searchOptions
+  });
   const selectedItems = options.filter((value) => value.selected);
   const isShowingHint = !selectedDisplayOverwrite && selectedItems.length === 0;
-  return /* @__PURE__ */ jsxs32("div", { className: clsx35(className), children: [
-    label && /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs34("div", { className: clsx39(className), children: [
+    label && /* @__PURE__ */ jsx51(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: clsx35(" mb-1", label.className),
+        className: clsx39(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
-    /* @__PURE__ */ jsxs32("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs32(
-        "button",
-        {
-          ref: triggerRef,
-          className: clsx35(
-            "btn-md justify-between w-full border-2 h-auto",
-            {
-              "rounded-b-lg": !open,
-              "bg-menu-background border-menu-border hover:border-primary": !isDisabled,
-              "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": isDisabled
-            }
-          ),
-          onClick: () => setIsOpen(!isOpen),
-          disabled: isDisabled,
-          children: [
-            !isShowingHint && /* @__PURE__ */ jsx48("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ jsx48(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
-            isShowingHint && /* @__PURE__ */ jsx48("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
-            isOpen ? /* @__PURE__ */ jsx48(ChevronUp4, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ jsx48(ChevronDown5, { className: "min-w-6" })
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ jsxs32(
-        "div",
-        {
-          ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
-          children: [
-            /* @__PURE__ */ jsx48(
-              SearchableList,
+    /* @__PURE__ */ jsx51(
+      Menu,
+      {
+        ...menuProps,
+        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ jsx51(
+          "button",
+          {
+            ref,
+            className: clsx39(
+              "btn-md justify-between w-full border-2 h-auto",
               {
-                list: options,
-                minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
-                searchMapping: (item) => item.searchTags,
-                itemMapper: (option, index) => /* @__PURE__ */ jsx48(
-                  Tile,
+                "min-h-14": useChipDisplay,
+                "bg-menu-background text-menu-text border-menu-border hover:border-primary": !disabled,
+                "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
+              },
+              triggerClassName
+            ),
+            onClick: toggleOpen,
+            disabled,
+            children: useChipDisplay ? /* @__PURE__ */ jsx51(Fragment5, { children: isShowingHint ? /* @__PURE__ */ jsx51(IconButton, { disabled, size: "small", color: "neutral", children: /* @__PURE__ */ jsx51(Plus, {}) }) : /* @__PURE__ */ jsx51(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ jsxs34(Fragment5, { children: [
+              !isShowingHint && /* @__PURE__ */ jsx51("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
+              isShowingHint && /* @__PURE__ */ jsx51("span", { className: clsx39("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
+              /* @__PURE__ */ jsx51(ExpansionIcon, { isExpanded: isOpen })
+            ] })
+          }
+        ),
+        menuClassName: clsx39("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
+        children: (bag) => {
+          const { close } = bag;
+          return /* @__PURE__ */ jsxs34(Fragment5, { children: [
+            !searchOptions?.disabled && /* @__PURE__ */ jsx51(
+              SearchBar,
+              {
+                value: search,
+                onChangeText: setSearch,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsxs34("div", { className: "flex-col-2 overflow-y-auto", children: [
+              result.map((option, index) => {
+                const update = () => {
+                  onChange(options.map((value) => value.value === option.value ? {
+                    ...option,
+                    selected: !value.selected
+                  } : value));
+                };
+                return /* @__PURE__ */ jsx51(
+                  SelectTile,
                   {
-                    isSelected: option.selected,
-                    className: "px-2 py-1 rounded-md",
-                    disabledClassName: "text-disabled-text cursor-not-allowed",
-                    title: { value: option.label, className: "font-semibold" },
-                    onClick: () => {
-                      onChange(options.map((value) => value.value === option.value ? {
-                        ...option,
-                        selected: !value.selected
-                      } : value));
-                    },
-                    isDisabled: option.disabled
+                    prefix: /* @__PURE__ */ jsx51(
+                      Checkbox,
+                      {
+                        checked: option.selected,
+                        onChange: update,
+                        size: "small",
+                        disabled: option.disabled
+                      }
+                    ),
+                    title: { value: option.label },
+                    onClick: update,
+                    disabled: option.disabled
                   },
                   index
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs32("div", { className: "row justify-between mt-2", children: [
-              /* @__PURE__ */ jsxs32("div", { className: "row gap-x-2", children: [
-                /* @__PURE__ */ jsx48(
+                );
+              }),
+              additionalItems && additionalItems({ ...bag, search })
+            ] }),
+            /* @__PURE__ */ jsxs34("div", { className: "flex-row-2 justify-between", children: [
+              /* @__PURE__ */ jsxs34("div", { className: "flex-row-2", children: [
+                /* @__PURE__ */ jsx51(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7524,7 +7836,7 @@ var MultiSelect = ({
                     children: translation("all")
                   }
                 ),
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx51(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7539,12 +7851,12 @@ var MultiSelect = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx48(SolidButton, { size: "small", onClick: () => setIsOpen(false), children: "Done" })
+              /* @__PURE__ */ jsx51(SolidButton, { size: "small", onClick: close, children: "Done" })
             ] })
-          ]
+          ] });
         }
-      )
-    ] })
+      }
+    )
   ] });
 };
 var MultiSelectUncontrolled = ({
@@ -7552,11 +7864,11 @@ var MultiSelectUncontrolled = ({
   onChange,
   ...props
 }) => {
-  const [usedOptions, setUsedOptions] = useState21(options);
-  useEffect21(() => {
+  const [usedOptions, setUsedOptions] = useState22(options);
+  useEffect22(() => {
     setUsedOptions(options);
   }, [options]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx51(
     MultiSelect,
     {
       ...props,
@@ -7570,7 +7882,7 @@ var MultiSelectUncontrolled = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   overwriteTranslation,
   options,
@@ -7578,11 +7890,12 @@ var MultiSelectProperty = ({
   readOnly = false,
   softRequired,
   onRemove,
+  onAddNew,
   ...multiSelectProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = options.some((value) => value.selected);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx52(
     PropertyBase,
     {
       name,
@@ -7590,20 +7903,42 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ jsx49(List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx49(
-        "div",
+      icon: /* @__PURE__ */ jsx52(List, { size: 24 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx52(
+        MultiSelect,
         {
-          className: clsx36("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ jsx49(
-            MultiSelect,
+          ...multiSelectProps,
+          className: clsx40("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
+          options,
+          disabled: readOnly,
+          useChipDisplay: true,
+          hintText: `${translation("select")}...`,
+          searchOptions: {
+            sortingFunction: (a, b) => a.value.localeCompare(b.value),
+            ...multiSelectProps?.searchOptions
+          },
+          additionalItems: ({ close, search }) => {
+            if (!onAddNew && !search.trim()) {
+              return void 0;
+            }
+            return /* @__PURE__ */ jsx52(
+              SelectTile,
+              {
+                prefix: /* @__PURE__ */ jsx52(Plus2, {}),
+                title: { value: `${translation("add")} ${search.trim()}` },
+                onClick: () => {
+                  onAddNew(search);
+                  close();
+                },
+                disabled: options.some((value) => value.value === search.trim())
+              }
+            );
+          },
+          triggerClassName: clsx40(
+            "!border-none !p-0 !min-h-10",
             {
-              ...multiSelectProps,
-              className: clsx36("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
-              options,
-              isDisabled: readOnly,
-              useChipDisplay: true,
-              hintText: `${translation("select")}...`
+              "!bg-warning !text-surface-warning": softRequired2 && !hasValue,
+              "": !softRequired2 || hasValue
             }
           )
         }
@@ -7614,8 +7949,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import clsx37 from "clsx";
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import clsx41 from "clsx";
+import { jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -7636,23 +7971,23 @@ var NumberProperty = ({
 }) => {
   const translation = useTranslation([defaultNumberPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx53(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx50(Binary, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsxs33(
+      icon: /* @__PURE__ */ jsx53(Binary, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsxs35(
         "div",
         {
-          className: clsx37("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          className: clsx41("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx53(
               Input,
               {
                 expanded: false,
-                className: clsx37("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: clsx41("!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,
@@ -7675,7 +8010,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx50("span", { className: clsx37("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ jsx53("span", { className: clsx41("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -7684,9 +8019,9 @@ var NumberProperty = ({
 };
 
 // src/components/properties/SelectProperty.tsx
-import { List as List2 } from "lucide-react";
-import clsx38 from "clsx";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { List as List2, Plus as Plus3 } from "lucide-react";
+import clsx42 from "clsx";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   overwriteTranslation,
   value,
@@ -7695,11 +8030,12 @@ var SingleSelectProperty = ({
   readOnly = false,
   softRequired,
   onRemove,
+  onAddNew,
   ...selectProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx54(
     PropertyBase,
     {
       name,
@@ -7707,22 +8043,45 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ jsx51(List2, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx51(
-        "div",
+      icon: /* @__PURE__ */ jsx54(List2, { size: 24 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ jsx54(
+        Select,
         {
-          className: clsx38("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ jsx51(
-            Select,
+          ...selectProps,
+          value,
+          options,
+          disabled: readOnly,
+          className: clsx42("w-full"),
+          hintText: `${translation("select")}...`,
+          searchOptions: {
+            sortingFunction: (a, b) => a.value.localeCompare(b.value),
+            ...selectProps?.searchOptions
+          },
+          additionalItems: ({ close, search }) => {
+            if (!onAddNew && !search.trim()) {
+              return void 0;
+            }
+            return /* @__PURE__ */ jsx54(
+              SelectTile,
+              {
+                prefix: /* @__PURE__ */ jsx54(Plus3, {}),
+                title: { value: `${translation("add")} ${search.trim()}` },
+                onClick: () => {
+                  onAddNew(search);
+                  close();
+                },
+                disabled: options.some((value2) => value2.value === search.trim())
+              }
+            );
+          },
+          triggerClassName: clsx42(
+            "!border-none",
             {
-              ...selectProps,
-              value,
-              options,
-              isDisabled: readOnly,
-              className: clsx38("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
-              hintText: `${translation("select")}...`
+              "!bg-warning !text-surface-warning": softRequired2 && !hasValue,
+              "!bg-property-title-background": !softRequired2 || hasValue
             }
-          )
+          ),
+          hintTextClassName: softRequired2 && !hasValue ? "text-surface-warning" : void 0
         }
       )
     }
@@ -7731,12 +8090,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import clsx40 from "clsx";
+import clsx44 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { useEffect as useEffect22, useState as useState22 } from "react";
-import clsx39 from "clsx";
-import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useEffect as useEffect23, useState as useState23 } from "react";
+import clsx43 from "clsx";
+import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
 var Textarea = ({
   label,
   headline,
@@ -7749,39 +8108,48 @@ var Textarea = ({
   onEditCompleted = noop,
   saveDelayOptions,
   defaultStyle = true,
+  disabled = false,
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = useState22(false);
+  const [hasFocus, setHasFocus] = useState23(false);
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  return /* @__PURE__ */ jsxs34("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs36("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx55(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: clsx39("mb-1", label.className),
+        className: clsx43("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
-    /* @__PURE__ */ jsxs34(
+    /* @__PURE__ */ jsxs36(
       "div",
       {
-        className: `${clsx39(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: clsx43(
+          "bg-surface text-on-surface relative",
+          {
+            "shadow border-2 rounded-lg": defaultStyle,
+            "hover:border-primary focus-within:border-primary": defaultStyle && !disabled,
+            "border-disabled-border cursor-not-allowed": defaultStyle && !disabled
+          }
+        ),
         children: [
-          headline && /* @__PURE__ */ jsx52("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
-          /* @__PURE__ */ jsx52(
+          headline && /* @__PURE__ */ jsx55("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
+          /* @__PURE__ */ jsx55(
             "textarea",
             {
               id,
-              className: clsx39("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", {
+              className: clsx43("pt-0 px-3 border-transparent appearance-none w-full leading-tight focus:ring-0 focus:outline-none", {
                 "resize-none": !resizable,
                 "h-32": defaultStyle,
-                "mt-3": !headline
+                "mt-3": !headline,
+                "text-disabled-text": disabled
               }, className),
               onChange: (event) => {
                 const value = event.target.value;
@@ -7799,13 +8167,14 @@ var Textarea = ({
                 onEditCompletedWrapper(event.target.value);
                 setHasFocus(false);
               },
+              disabled,
               ...props
             }
           )
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ jsx52("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ jsx55("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -7813,11 +8182,11 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = useState22(value);
-  useEffect22(() => {
+  const [text, setText] = useState23(value);
+  useEffect23(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx55(
     Textarea,
     {
       ...props,
@@ -7831,7 +8200,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var defaultTextPropertyTranslation = {
   en: {
     text: "Text"
@@ -7851,42 +8220,36 @@ var TextProperty = ({
 }) => {
   const translation = useTranslation([defaultTextPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx56(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx53(Text, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx53(
-        "div",
+      icon: /* @__PURE__ */ jsx56(Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx56(
+        Textarea,
         {
-          className: clsx40("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ jsx53(
-            Textarea,
-            {
-              className: clsx40("ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
-              rows: 5,
-              defaultStyle: false,
-              value: value ?? "",
-              readOnly,
-              placeholder: `${translation("text")}...`,
-              onChangeText: (value2) => {
-                if (!value2) {
-                  onRemove();
-                } else {
-                  onChange(value2);
-                }
-              },
-              onEditCompleted: (value2) => {
-                if (!value2) {
-                  onRemove();
-                } else {
-                  onEditComplete(value2);
-                }
-              }
+          className: clsx44("ring-0 border-0 outline-0 !px-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+          rows: 5,
+          defaultStyle: false,
+          value: value ?? "",
+          readOnly,
+          placeholder: `${translation("text")}...`,
+          onChangeText: (value2) => {
+            if (!value2) {
+              onRemove();
+            } else {
+              onChange(value2);
             }
-          )
+          },
+          onEditCompleted: (value2) => {
+            if (!value2) {
+              onRemove();
+            } else {
+              onEditComplete(value2);
+            }
+          }
         }
       )
     }
@@ -7894,12 +8257,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-import { clsx as clsx41 } from "clsx";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { clsx as clsx45 } from "clsx";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: clsx41("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
+  return /* @__PURE__ */ jsx57("div", { className: clsx45("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -7917,8 +8280,8 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback5, useEffect as useEffect25, useMemo as useMemo3, useRef as useRef9, useState as useState24 } from "react";
-import clsx45 from "clsx";
+import { useCallback as useCallback9, useEffect as useEffect26, useMemo as useMemo3, useRef as useRef7, useState as useState25 } from "react";
+import clsx48 from "clsx";
 import {
   flexRender,
   getCoreRowModel,
@@ -7931,90 +8294,8 @@ import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 
 // src/components/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-
-// src/components/user-action/Menu.tsx
-import { useRef as useRef8 } from "react";
-import clsx42 from "clsx";
-
-// src/util/PropsWithFunctionChildren.ts
-var resolve = (children, bag) => {
-  if (typeof children === "function") {
-    return children(bag);
-  }
-  return children ?? void 0;
-};
-var BagFunctionUtil = {
-  resolve
-};
-
-// src/components/user-action/Menu.tsx
-import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
-var MenuItem = ({
-  children,
-  onClick,
-  alignment = "left",
-  isDisabled = false,
-  className
-}) => /* @__PURE__ */ jsx55(
-  "div",
-  {
-    className: clsx42("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
-      "text-right": alignment === "right",
-      "text-left": alignment === "left",
-      "text-disabled-text cursor-not-allowed": isDisabled,
-      "text-menu-text hover:bg-primary/20": !isDisabled,
-      "cursor-pointer": !!onClick
-    }, className),
-    onClick,
-    children
-  }
-);
-var Menu = ({
-  trigger,
-  children,
-  alignment = "tl",
-  showOnHover = false,
-  menuClassName = ""
-}) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
-  const triggerRef = useRef8(null);
-  const menuRef = useRef8(null);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ jsxs35(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ jsx55(
-          "div",
-          {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: clsx42(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
-              {
-                "top-0": alignment[0] === "t",
-                "bottom-0": alignment[0] === "b",
-                "left-0": alignment[1] === "l",
-                "right-0": alignment[1] === "r",
-                "hidden": !isOpen
-              },
-              menuClassName
-            ),
-            children: BagFunctionUtil.resolve(children, bag)
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect23, useState as useState23 } from "react";
-import { Fragment as Fragment3, jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useEffect as useEffect24, useState as useState24 } from "react";
+import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
     filter: "Filter",
@@ -8039,17 +8320,17 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState23(columnFilterValue);
+  const [filterValue, setFilterValue] = useState24(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect23(() => {
+  useEffect24(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx58(
     Menu,
     {
-      trigger: (onClick, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx56(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ jsx56(FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ jsx56(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs37("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx58(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ jsx58(FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ jsx58(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -8057,9 +8338,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ jsxs36("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx56("h4", { className: "textstyle-title-sm", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx56(
+      children: ({ close }) => /* @__PURE__ */ jsxs37("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx58("h4", { className: "textstyle-title-sm", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx58(
           Input,
           {
             value: filterValue ?? "",
@@ -8069,8 +8350,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs36("div", { className: "row gap-x-2 items-center", children: [
-          /* @__PURE__ */ jsx56(
+        filterType === "range" && /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -8083,8 +8364,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx56("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx58("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -8098,8 +8379,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs36(Fragment3, { children: [
-          /* @__PURE__ */ jsx56(
+        filterType === "dateRange" && /* @__PURE__ */ jsxs37(Fragment6, { children: [
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -8112,7 +8393,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -8126,12 +8407,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "row justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx56(SolidButton, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx58(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx56(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ jsx58(SolidButton, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -8142,9 +8423,9 @@ var TableFilterButton = ({
 };
 
 // src/components/table/TableSortButton.tsx
-import { ChevronDown as ChevronDown6, ChevronsUpDown, ChevronUp as ChevronUp5 } from "lucide-react";
-import clsx43 from "clsx";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp } from "lucide-react";
+import clsx46 from "clsx";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -8152,20 +8433,20 @@ var TableSortButton = ({
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ jsx57(ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ jsx59(ChevronsUpDown, { className: "w-full h-full" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx57(ChevronUp5, { className: "w-full h-full" }) : /* @__PURE__ */ jsx57(ChevronDown6, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx59(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx59(ChevronDown3, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     IconButton,
     {
       size: "tiny",
       color,
-      className: clsx43(className),
+      className: clsx46(className),
       ...buttonProps,
       children: icon
     }
@@ -8173,9 +8454,9 @@ var TableSortButton = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect24 } from "react";
+import { useEffect as useEffect25 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect24(() => {
+  useEffect25(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -8184,17 +8465,17 @@ var useResizeCallbackWrapper = (callback) => {
 };
 
 // src/components/table/TableCell.tsx
-import { clsx as clsx44 } from "clsx";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { clsx as clsx47 } from "clsx";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx58("span", { className: clsx44("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx60("span", { className: clsx47("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/components/table/Table.tsx
-import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -8207,21 +8488,21 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = useRef9(null);
-  const tableRef = useRef9(null);
-  const [columnSizing, setColumnSizing] = useState24(columns.reduce((previousValue, currentValue) => {
+  const ref = useRef7(null);
+  const tableRef = useRef7(null);
+  const [columnSizing, setColumnSizing] = useState25(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState24();
-  const [pagination, setPagination] = useState24({
+  const [columnSizingInfo, setColumnSizingInfo] = useState25();
+  const [pagination, setPagination] = useState25({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState24(initialState?.columnFilters);
+  const [columnFilters, setColumnFilters] = useState25(initialState?.columnFilters);
   const computedColumnMinWidths = useMemo3(() => {
     return columns.reduce((previousValue, column) => {
       return {
@@ -8313,7 +8594,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx59(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx61(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -8361,18 +8642,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState24(false);
-  useEffect25(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = useState25(false);
+  useEffect26(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper(useCallback5(() => {
+  useResizeCallbackWrapper(useCallback9(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect25(() => {
+  useEffect26(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -8393,98 +8674,106 @@ var Table = ({
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      colSizes[`--header-${header.id}-size`] = header.getSize();
-      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+      colSizes[`--header-${header.id}-size`] = Math.floor(header.getSize());
+      colSizes[`--col-${header.column.id}-size`] = Math.floor(header.column.getSize());
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx45("col gap-y-4", className), children: [
-    /* @__PURE__ */ jsx59(Scrollbars3, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ jsxs37(
-      "table",
+  return /* @__PURE__ */ jsxs38("div", { ref, className: clsx48("flex-col-4", className), children: [
+    /* @__PURE__ */ jsx61(
+      Scrollbars3,
       {
-        ref: tableRef,
-        className: clsx45(tableClassName),
-        style: {
-          ...columnSizeVars,
-          width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
-        },
-        children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx59(
-            "col",
-            {
-              style: {
-                width: `calc(var(--header-${header?.id}-size) * 1px)`,
-                minWidth: header.column.columnDef.minSize,
-                maxWidth: header.column.columnDef.maxSize
-              }
+        autoHeight: true,
+        autoHeightMax: tableRef.current?.offsetHeight + 2,
+        autoHide: true,
+        children: /* @__PURE__ */ jsxs38(
+          "table",
+          {
+            ref: tableRef,
+            className: clsx48(tableClassName),
+            style: {
+              ...columnSizeVars,
+              width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
-            header.id
-          )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx59("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ jsxs37(
-              "th",
-              {
-                colSpan: header.colSpan,
-                className: clsx45("relative group", header.column.columnDef.meta?.className),
-                children: [
-                  /* @__PURE__ */ jsx59("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "row gap-x-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ jsx59(
-                      TableSortButton,
-                      {
-                        sortDirection: header.column.getIsSorted(),
-                        onClick: () => header.column.toggleSorting()
-                      }
-                    ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx59(
-                      TableFilterButton,
-                      {
-                        column: header.column,
-                        filterType: header.column.columnDef.meta.filterType
-                      }
-                    ) : null,
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ jsx59(
-                    "div",
-                    {
-                      onMouseDown: header.getResizeHandler(),
-                      onTouchStart: header.getResizeHandler(),
-                      onDoubleClick: () => {
-                        header.column.resetSize();
-                      },
-                      className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
-                      style: {
-                        opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
-                      }
-                    }
-                  )
-                ]
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxs37("tbody", { children: [
-            table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx59("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                return /* @__PURE__ */ jsx59("td", { children: flexRender(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id);
-              }) }, row.id);
-            }),
-            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx59("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx59("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx59(FillerRowElement, {}) }, column.id);
-              }) }, "filler-row-" + index);
-            })
-          ] })
-        ]
+            children: [
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx61("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx61(
+                "col",
+                {
+                  style: {
+                    width: `calc(var(--header-${header?.id}-size) * 1px)`,
+                    minWidth: header.column.columnDef.minSize,
+                    maxWidth: header.column.columnDef.maxSize
+                  }
+                },
+                header.id
+              )) }, headerGroup.id)),
+              /* @__PURE__ */ jsx61("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx61("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ jsxs38(
+                  "th",
+                  {
+                    colSpan: header.colSpan,
+                    className: clsx48("relative group", header.column.columnDef.meta?.className),
+                    children: [
+                      /* @__PURE__ */ jsx61("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs38("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ jsx61(
+                          TableSortButton,
+                          {
+                            sortDirection: header.column.getIsSorted(),
+                            onClick: () => header.column.toggleSorting()
+                          }
+                        ),
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx61(
+                          TableFilterButton,
+                          {
+                            column: header.column,
+                            filterType: header.column.columnDef.meta.filterType
+                          }
+                        ) : null,
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )
+                      ] }) }),
+                      header.column.getCanResize() && /* @__PURE__ */ jsx61(
+                        "div",
+                        {
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          onDoubleClick: () => {
+                            header.column.resetSize();
+                          },
+                          className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
+                          style: {
+                            opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                          }
+                        }
+                      )
+                    ]
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsxs38("tbody", { children: [
+                table.getRowModel().rows.map((row) => {
+                  return /* @__PURE__ */ jsx61("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ jsx61("td", { children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id);
+                  }) }, row.id);
+                }),
+                range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+                  return /* @__PURE__ */ jsx61("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ jsx61("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx61(FillerRowElement, {}) }, column.id);
+                  }) }, "filler-row-" + index);
+                })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
-    /* @__PURE__ */ jsx59("div", { className: "row justify-center", children: /* @__PURE__ */ jsx59(
+    ),
+    /* @__PURE__ */ jsx61("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx61(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -8495,11 +8784,11 @@ var Table = ({
   ] });
 };
 var TableUncontrolled = ({ data, ...props }) => {
-  const [usedDate, setUsedData] = useState24(data);
-  useEffect25(() => {
+  const [usedDate, setUsedData] = useState25(data);
+  useEffect26(() => {
     setUsedData(data);
   }, [data]);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     Table,
     {
       ...props,
@@ -8523,7 +8812,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx59(
+          return /* @__PURE__ */ jsx61(
             Checkbox,
             {
               checked: table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected(),
@@ -8536,7 +8825,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx59(
+          return /* @__PURE__ */ jsx61(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -8555,15 +8844,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx59(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
+          return /* @__PURE__ */ jsx61(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx59(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx61(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -8577,7 +8866,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: clsx45(
+        bodyRowClassName: clsx48(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -8588,8 +8877,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-import { useState as useState25 } from "react";
-import { clsx as clsx46 } from "clsx";
+import { useState as useState26 } from "react";
+import { clsx as clsx49 } from "clsx";
 
 // src/util/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -8598,7 +8887,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 import { CheckIcon, Copy } from "lucide-react";
-import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -8608,8 +8897,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useTranslation([formTranslation]);
-  const [isShowingIndication, setIsShowingIndication] = useState25(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState25(false);
+  const [isShowingIndication, setIsShowingIndication] = useState26(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState26(false);
   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]`,
@@ -8629,10 +8918,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
-      className: clsx46("relative inline-block cursor-copy", containerClassName),
+      className: clsx49("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -8647,10 +8936,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39(
           "div",
           {
-            className: clsx46(
+            className: clsx49(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -8662,18 +8951,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ jsxs38("div", { className: "row gap-x-1", children: [
-                /* @__PURE__ */ jsx60(CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ jsxs39("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ jsx62(CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ jsxs38("div", { className: "row gap-x-1 text-description", children: [
-                /* @__PURE__ */ jsx60(Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ jsxs39("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ jsx62(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsx62(
                 "div",
                 {
-                  className: clsx46(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx49(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -8686,8 +8975,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-import clsx47 from "clsx";
-import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
+import clsx50 from "clsx";
+import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -8706,7 +8995,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx61(
+    dateDisplay = /* @__PURE__ */ jsx63(
       DatePicker,
       {
         ...datePickerProps,
@@ -8720,25 +9009,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx61(
+    timeDisplay = /* @__PURE__ */ jsx63(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx47("h-full", { "justify-between w-full": mode === "time" }),
+        className: clsx50("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ jsxs39("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ jsxs39("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx61("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs39("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ jsx61(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx63("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs40("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ jsx63(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ jsx63(
         SolidButton,
         {
           size: "medium",
@@ -8751,9 +9040,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback6, useEffect as useEffect26, useState as useState26 } from "react";
-import clsx48 from "clsx";
-import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect27, useState as useState27 } from "react";
+import clsx51 from "clsx";
+import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8772,7 +9061,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState26({
+  }, setAnimation] = useState27({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -8788,7 +9077,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = useCallback6((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = useCallback10((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -8798,7 +9087,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = useCallback6((timestamp, startTime) => {
+  const animate = useCallback10((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -8871,7 +9160,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect26(() => {
+  useEffect27(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -8892,7 +9181,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx64(
     "div",
     {
       className: "relative overflow-hidden",
@@ -8902,27 +9191,27 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs40("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsxs41("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx64(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx64(
           "div",
           {
-            className: "col select-none",
+            className: "flex-col-2 select-none",
             style: {
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx62(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx64(
               "div",
               {
-                className: clsx48(
-                  `col items-center justify-center rounded-md`,
+                className: clsx51(
+                  `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
                     "text-on-background": currentIndex === index,
@@ -8948,10 +9237,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-import { useEffect as useEffect27, useRef as useRef10, useState as useState27 } from "react";
+import { useEffect as useEffect28, useRef as useRef8, useState as useState28 } from "react";
 import { Pencil } from "lucide-react";
-import clsx49 from "clsx";
-import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
+import clsx52 from "clsx";
+import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
 var ToggleableInput = ({
   type = "text",
   value,
@@ -8966,26 +9255,26 @@ var ToggleableInput = ({
   saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = useState27(initialState !== "display");
+  const [isEditing, setIsEditing] = useState28(initialState !== "display");
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
-  const ref = useRef10(null);
+  const ref = useRef8(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (isEditing) {
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs41("div", { children: [
-    /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42("div", { children: [
+    /* @__PURE__ */ jsxs42(
       "div",
       {
-        className: clsx49("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: clsx52("flex-row-2 items-center w-full overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ jsx63("div", { className: clsx49("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx65("div", { className: clsx52("flex-row-2 overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx65(
             "input",
             {
               ref,
@@ -9013,16 +9302,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: clsx49(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: clsx52(`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__ */ jsx63("span", { className: clsx49("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ jsx63(
+          ) : /* @__PURE__ */ jsx65("span", { className: clsx52("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ jsx65(
             Pencil,
             {
-              className: clsx49(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: clsx52(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -9030,7 +9319,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ jsx63("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ jsx65("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -9038,11 +9327,11 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = useState27(initialValue);
-  useEffect27(() => {
+  const [value, setValue] = useState28(initialValue);
+  useEffect28(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx65(
     ToggleableInput,
     {
       value,
@@ -9137,6 +9426,7 @@ export {
   ErrorComponent,
   Expandable,
   ExpandableUncontrolled,
+  ExpansionIcon,
   FAQSection,
   FillerRowElement,
   FormInput,
@@ -9155,6 +9445,7 @@ export {
   LoadingAndErrorComponent,
   LoadingAnimation,
   LoadingButton,
+  LoadingContainer,
   LocalStorageService,
   LoopingArrayCalculator,
   MarkdownInterpreter,
@@ -9177,8 +9468,10 @@ export {
   Ring,
   RingWave,
   ScrollPicker,
+  SearchBar,
   SearchableList,
   Select,
+  SelectTile,
   SelectUncontrolled,
   SessionStorageService,
   SimpleSearch,
@@ -9255,6 +9548,7 @@ export {
   useLocalStorage,
   useLocale,
   useOutsideClick,
+  usePopoverPosition,
   useRerender,
   useResizeCallbackWrapper,
   useSearch,