@helpwave/hightide 0.1.18 → 0.1.19

package/dist/index.js

@@ -2872,6 +2872,7 @@ __export(index_exports, {
   ErrorComponent: () => ErrorComponent,
   Expandable: () => Expandable,
   ExpandableUncontrolled: () => ExpandableUncontrolled,
+  ExpansionIcon: () => ExpansionIcon,
   FAQSection: () => FAQSection,
   FillerRowElement: () => FillerRowElement,
   FormInput: () => FormInput,
@@ -2912,8 +2913,10 @@ __export(index_exports, {
   Ring: () => Ring,
   RingWave: () => RingWave,
   ScrollPicker: () => ScrollPicker,
+  SearchBar: () => SearchBar,
   SearchableList: () => SearchableList,
   Select: () => Select,
+  SelectTile: () => SelectTile,
   SelectUncontrolled: () => SelectUncontrolled,
   SessionStorageService: () => SessionStorageService,
   SimpleSearch: () => SimpleSearch,
@@ -2990,6 +2993,7 @@ __export(index_exports, {
   useLocalStorage: () => useLocalStorage,
   useLocale: () => useLocale,
   useOutsideClick: () => useOutsideClick,
+  usePopoverPosition: () => usePopoverPosition,
   useRerender: () => useRerender,
   useResizeCallbackWrapper: () => useResizeCallbackWrapper,
   useSearch: () => useSearch,
@@ -3057,7 +3061,7 @@ var Tile = ({
   description,
   onClick,
   isSelected = false,
-  isDisabled = false,
+  disabled = false,
   prefix,
   suffix,
   normalClassName = "hover:bg-primary/40 cursor-pointer",
@@ -3069,18 +3073,18 @@ var Tile = ({
     "div",
     {
       className: (0, import_clsx.default)(
-        "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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col gap-y-0 w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-col-0 w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_clsx.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
           !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(description.className ?? "textstyle-description"), children: description.value })
         ] }),
@@ -3187,7 +3191,7 @@ var HelpwaveBadge = ({
 };
 
 // src/components/date/DatePicker.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/localization/LanguageProvider.tsx
@@ -3617,6 +3621,7 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 var import_clsx8 = __toESM(require("clsx"));
 
 // src/components/user-action/Button.tsx
+var import_react3 = require("react");
 var import_clsx4 = __toESM(require("clsx"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ButtonColorUtil = {
@@ -3642,7 +3647,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -3652,7 +3657,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",
@@ -3674,8 +3679,9 @@ var SolidButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: (0, import_clsx4.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -3710,7 +3716,7 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var OutlineButton = ({
   children,
   disabled = false,
@@ -3731,8 +3737,8 @@ var OutlineButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      onClick,
+      disabled,
       className: (0, import_clsx4.default)(
         {
           "text-disabled-text border-disabled-outline cursor-not-allowed": disabled,
@@ -3792,8 +3798,8 @@ var TextButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      onClick,
+      disabled,
       className: (0, import_clsx4.default)(
         {
           "text-disabled-text cursor-not-allowed": disabled,
@@ -3834,7 +3840,6 @@ var IconButton = ({
   disabled = false,
   color = "primary",
   size = "medium",
-  onClick,
   className,
   ...restProps
 }) => {
@@ -3851,8 +3856,7 @@ var IconButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      disabled,
       className: (0, import_clsx4.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
@@ -3870,17 +3874,28 @@ var IconButton = ({
 };
 
 // src/components/date/YearMonthPicker.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
 var import_clsx6 = __toESM(require("clsx"));
 
 // src/components/layout-and-navigation/Expandable.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronDown, { className: "min-w-4 w-4" });
-var Expandable = (0, import_react3.forwardRef)(function Expandable2({
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_lucide_react2.ChevronDown,
+    {
+      className: (0, import_clsx5.default)(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
+var Expandable = (0, import_react4.forwardRef)(function Expandable2({
   children,
   label,
   icon,
@@ -3892,22 +3907,23 @@ var Expandable = (0, import_react3.forwardRef)(function Expandable2({
   headerClassName,
   contentClassName
 }, ref) {
-  icon ??= DefaultIcon;
+  const defaultIcon = (0, import_react4.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx5.default)("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: (0, import_clsx5.default)("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__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             className: (0, import_clsx5.default)(
-              "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
@@ -3919,18 +3935,31 @@ var Expandable = (0, import_react3.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx5.default)("col px-4 pb-2", contentClassName), children })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: (0, import_clsx5.default)(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                "max-h-96 opacity-100 pb-2": isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            children
+          }
+        )
       ]
     }
   );
 });
-var ExpandableUncontrolled = (0, import_react3.forwardRef)(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = (0, import_react4.forwardRef)(function ExpandableUncontrolled2({
   isExpanded,
   onChange = noop,
   ...props
 }, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react3.useState)(isExpanded);
-  (0, import_react3.useEffect)(() => {
+  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react4.useState)(isExpanded);
+  (0, import_react4.useEffect)(() => {
     setUsedIsExpanded(isExpanded);
   }, [isExpanded]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -3959,8 +3988,8 @@ var YearMonthPicker = ({
   showValueOpen = true
 }) => {
   const locale = useLocale();
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const ref = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -3976,7 +4005,7 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx6.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx6.default)("flex-col-0 select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ExpandableUncontrolled,
@@ -3985,7 +4014,7 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx6.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "row gap-x-1", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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();
@@ -4019,8 +4048,8 @@ var YearMonthPickerUncontrolled = ({
   onChange = noop,
   ...props
 }) => {
-  const [yearMonth, setYearMonth] = (0, import_react4.useState)(displayedYearMonth ?? /* @__PURE__ */ new Date());
-  (0, import_react4.useEffect)(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
+  const [yearMonth, setYearMonth] = (0, import_react5.useState)(displayedYearMonth ?? /* @__PURE__ */ new Date());
+  (0, import_react5.useEffect)(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     YearMonthPicker,
     {
@@ -4036,7 +4065,7 @@ var YearMonthPickerUncontrolled = ({
 
 // src/components/date/DayPicker.tsx
 var import_clsx7 = __toESM(require("clsx"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth,
@@ -4051,9 +4080,9 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx7.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx7.default)("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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;
@@ -4088,9 +4117,9 @@ var DayPickerUncontrolled = ({
   onChange = noop,
   ...restProps
 }) => {
-  const [date, setDate] = (0, import_react5.useState)(selected);
-  const [usedDisplayedMonth, setUsedDDisplayedMonth] = (0, import_react5.useState)(displayedMonth);
-  (0, import_react5.useEffect)(() => {
+  const [date, setDate] = (0, import_react6.useState)(selected);
+  const [usedDisplayedMonth, setUsedDDisplayedMonth] = (0, import_react6.useState)(displayedMonth);
+  (0, import_react6.useEffect)(() => {
     setDate(selected);
     setUsedDDisplayedMonth(selected);
   }, [selected]);
@@ -4196,17 +4225,17 @@ var DatePicker = ({
 }) => {
   const locale = useLocale();
   const translation = useTranslation([timeTranslation], overwriteTranslation);
-  const [displayedMonth, setDisplayedMonth] = (0, import_react6.useState)(value);
-  const [displayMode, setDisplayMode] = (0, import_react6.useState)(initialDisplay);
-  (0, import_react6.useEffect)(() => {
+  const [displayedMonth, setDisplayedMonth] = (0, import_react7.useState)(value);
+  const [displayMode, setDisplayMode] = (0, import_react7.useState)(initialDisplay);
+  (0, import_react7.useEffect)(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_clsx8.default)("col gap-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "row items-center justify-between h-7", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_clsx8.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-row-2 items-center justify-between h-7", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         TextButton,
         {
-          className: (0, import_clsx8.default)("row gap-x-1 items-center cursor-pointer select-none", {
+          className: (0, import_clsx8.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
@@ -4216,7 +4245,7 @@ var DatePicker = ({
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "row justify-end", children: [
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-row-2 justify-end", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           SolidButton,
           {
@@ -4289,8 +4318,8 @@ var DatePickerUncontrolled = ({
   onChange = noop,
   ...props
 }) => {
-  const [date, setDate] = (0, import_react6.useState)(value);
-  (0, import_react6.useEffect)(() => setDate(value), [value]);
+  const [date, setDate] = (0, import_react7.useState)(value);
+  (0, import_react7.useEffect)(() => setDate(value), [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     DatePicker,
     {
@@ -4359,7 +4388,7 @@ var TimeDisplay = ({
 };
 
 // src/components/date/TimePicker.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
 var import_clsx9 = __toESM(require("clsx"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -4371,12 +4400,12 @@ var TimePicker = ({
   maxHeight = 300,
   className = ""
 }) => {
-  const minuteRef = (0, import_react7.useRef)(null);
-  const hourRef = (0, import_react7.useRef)(null);
+  const minuteRef = (0, import_react8.useRef)(null);
+  const hourRef = (0, import_react8.useRef)(null);
   const isPM = time.getHours() >= 11;
   const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
   let minutes = range(60);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
         const container = minuteRef.current.parentElement;
@@ -4391,7 +4420,7 @@ var TimePicker = ({
     };
     scrollToItem();
   }, [minuteRef, minuteRef.current]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const scrollToItem = () => {
       if (hourRef.current) {
         const container = hourRef.current.parentElement;
@@ -4430,8 +4459,8 @@ var TimePicker = ({
     transformer(newDate);
     onChange(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_clsx9.default)("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_clsx9.default)("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
       const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
@@ -4444,7 +4473,7 @@ var TimePicker = ({
         hour
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
       const currentMinute = minute === closestMinute;
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
@@ -4457,7 +4486,7 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "col gap-y-1", children: [
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex-col-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
@@ -4482,8 +4511,8 @@ var TimePickerUncontrolled = ({
   onChange = noop,
   ...props
 }) => {
-  const [value, setValue] = (0, import_react7.useState)(time);
-  (0, import_react7.useEffect)(() => setValue(time), [time]);
+  const [value, setValue] = (0, import_react8.useState)(time);
+  (0, import_react8.useEffect)(() => setValue(time), [time]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     TimePicker,
     {
@@ -4501,20 +4530,20 @@ var TimePickerUncontrolled = ({
 var import_clsx12 = __toESM(require("clsx"));
 
 // src/components/layout-and-navigation/Overlay.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom = __toESM(require("react-dom"));
 var import_clsx11 = __toESM(require("clsx"));
 
 // src/hooks/useHoverState.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
-  const [timer, setTimer] = (0, import_react8.useState)();
+  const [isHovered, setIsHovered] = (0, import_react9.useState)(false);
+  const [timer, setTimer] = (0, import_react9.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -4530,14 +4559,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -4621,6 +4650,7 @@ var import_lucide_react4 = require("lucide-react");
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -4633,6 +4663,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -4675,6 +4706,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -4687,6 +4719,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -4738,8 +4771,8 @@ var Overlay = ({
   onBackgroundClick,
   backgroundClassName
 }) => {
-  const [root, setRoot] = (0, import_react9.useState)();
-  (0, import_react9.useEffect)(() => {
+  const [root, setRoot] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
     setRoot(document.body);
   }, []);
   if (!root || !isOpen) return null;
@@ -4748,7 +4781,7 @@ var Overlay = ({
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
-          className: (0, import_clsx11.default)("fixed inset-0 h-screen w-screen bg-black/30", backgroundClassName),
+          className: (0, import_clsx11.default)("fixed inset-0 h-screen w-screen bg-overlay-shadow", backgroundClassName),
           onClick: onBackgroundClick
         }
       ),
@@ -4776,7 +4809,7 @@ var OverlayHeader = ({
 }) => {
   const translation = useTranslation([defaultModalHeaderTranslation], overwriteTranslation);
   const hasTitleRow = !!title || !!titleText || !!onClose;
-  const titleRow = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
+  const titleRow = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-row-8 justify-between items-start", children: [
     title ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "h2",
       {
@@ -4788,7 +4821,7 @@ var OverlayHeader = ({
     ),
     !!onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { tooltip: translation("close"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconButton, { color: "neutral", size: "small", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.X, { className: "w-full h-full" }) }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "col", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-col-2", children: [
     hasTitleRow && titleRow,
     description ?? (descriptionText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "textstyle-description", children: descriptionText }))
   ] });
@@ -4801,8 +4834,8 @@ var Modal = ({
   backgroundClassName,
   headerProps
 }) => {
-  const ref = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!isOpen) return;
     const modal = ref.current;
     if (!modal) {
@@ -4851,7 +4884,7 @@ var Modal = ({
           ref,
           tabIndex: -1,
           className: (0, import_clsx11.default)(
-            "fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl",
+            "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",
@@ -4872,8 +4905,8 @@ var Dialog = ({
   backgroundClassName,
   headerProps
 }) => {
-  const ref = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!isOpen) return;
     const dialog = ref.current;
     if (!dialog) {
@@ -4920,7 +4953,7 @@ var Dialog = ({
           ref,
           tabIndex: -1,
           className: (0, import_clsx11.default)(
-            "fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl",
+            "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",
@@ -4955,8 +4988,8 @@ var ConfirmDialog = ({
     primary: "primary"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Dialog, { ...restProps, className: (0, import_clsx12.default)("justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "col grow", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-row-4 mt-3 justify-end", children: [
       onDecline && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         SolidButton,
         {
@@ -5031,7 +5064,7 @@ var AvatarGroup = ({
   const stackingOverlap = 0.5;
   const notDisplayedProfiles = avatars.length - maxShownProfiles;
   const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "row relative", style: { height: diameter + "px" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-row-2 relative", style: { height: diameter + "px" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
@@ -5044,7 +5077,7 @@ var AvatarGroup = ({
     notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "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__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
           "+ ",
@@ -5080,7 +5113,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_clsx15 = __toESM(require("clsx"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Ring = ({
@@ -5109,9 +5142,9 @@ var AnimatedRing = ({
   onAnimationFinished = noop,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react10.useState)(0);
+  const [currentWidth, setCurrentWidth] = (0, import_react11.useState)(0);
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react10.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react11.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newWidth = Math.min(width * progress, width);
     setCurrentWidth(newWidth);
@@ -5125,7 +5158,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -5133,7 +5166,7 @@ var AnimatedRing = ({
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "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`,
@@ -5160,10 +5193,10 @@ var RingWave = ({
   onAnimationFinished = noop,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = (0, import_react10.useState)(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = (0, import_react11.useState)(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react10.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react11.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newInnerSize = Math.min(
       startInnerSize + distance * progress,
@@ -5180,7 +5213,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -5188,7 +5221,7 @@ var RingWave = ({
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "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`,
@@ -5215,7 +5248,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = (0, import_react10.useState)(0);
+  const [currentRing, setCurrentRing] = (0, import_react11.useState)(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
@@ -5368,7 +5401,7 @@ var import_clsx16 = __toESM(require("clsx"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx16.default)("row gap-x-0", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx16.default)("flex-row-0", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_link.default,
       {
@@ -5382,7 +5415,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 };
 
 // src/components/layout-and-navigation/Carousel.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_clsx17 = __toESM(require("clsx"));
 var import_lucide_react5 = require("lucide-react");
 
@@ -5514,15 +5547,15 @@ var Carousel = ({
     currentPosition,
     dragState,
     animationState
-  }, setCarouselInformation] = (0, import_react11.useState)({
+  }, setCarouselInformation] = (0, import_react12.useState)({
     currentPosition: 0
   });
-  const animationId = (0, import_react11.useRef)(void 0);
-  const timeOut = (0, import_react11.useRef)(void 0);
+  const animationId = (0, import_react12.useRef)(void 0);
+  const timeOut = (0, import_react12.useRef)(void 0);
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   const length = children.length;
   const paddingItemCount = 3;
-  const util = (0, import_react11.useMemo)(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
+  const util = (0, import_react12.useMemo)(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
   const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition));
   animationTime = Math.max(200, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
@@ -5530,7 +5563,7 @@ var Carousel = ({
     const baseOffset = -50 + (index - currentPosition) * 100;
     return `${baseOffset}%`;
   };
-  const animation = (0, import_react11.useCallback)((time) => {
+  const animation = (0, import_react12.useCallback)((time) => {
     let keepAnimating = true;
     setCarouselInformation((state) => {
       const {
@@ -5575,7 +5608,7 @@ var Carousel = ({
       animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
   }, [animationTime, autoLoopAnimationTime, util]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (animationState) {
       animationId.current = requestAnimationFrame(animation);
     }
@@ -5597,7 +5630,7 @@ var Carousel = ({
       isAutoLooping: true
     }
   }));
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!animationId.current && !animationState && !dragState && !timeOut.current) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -5729,7 +5762,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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "col items-center w-full gap-y-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-col-2 items-center w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_clsx17.default)(`relative w-full overflow-hidden`, heightClassName, className), children: [
       arrows && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -5753,8 +5786,8 @@ var Carousel = ({
           }
         )
       ] }),
-      hintNext ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_clsx17.default)(`relative row h-full`, heightClassName), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
+      hintNext ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_clsx17.default)(`flex-row-2 relative h-full`, heightClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
           item,
           index
         }, listIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -5785,7 +5818,7 @@ var Carousel = ({
     dots && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "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__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
@@ -5855,7 +5888,7 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx18.default)("flex flex-wrap gap-x-4 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx18.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Chip,
     {
       ...value,
@@ -5891,7 +5924,6 @@ var DividerInserter = ({
 
 // src/components/layout-and-navigation/FAQSection.tsx
 var import_clsx20 = __toESM(require("clsx"));
-var import_lucide_react6 = require("lucide-react");
 
 // src/components/layout-and-navigation/MarkdownInterpreter.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -6130,14 +6162,13 @@ var FAQSection = ({
   entries,
   expandableClassName
 }) => {
-  const chevronSize = 28;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     ExpandableUncontrolled,
     {
       ...restProps,
       label: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { id, className: "textstyle-title-md", children: title }),
       clickOnlyOnHeader: false,
-      icon: (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react6.ChevronUp, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react6.ChevronDown, { size: chevronSize, className: "text-primary" }),
+      icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
       className: (0, import_clsx20.default)("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
     },
@@ -6146,21 +6177,21 @@ var FAQSection = ({
 };
 
 // src/components/layout-and-navigation/Pagination.tsx
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_clsx23 = __toESM(require("clsx"));
 
 // src/components/user-action/Input.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_clsx22 = __toESM(require("clsx"));
 
 // src/hooks/useDelay.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var defaultOptions = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = (0, import_react12.useState)(void 0);
+  const [timer, setTimer] = (0, import_react13.useState)(void 0);
   const { delay, disabled } = {
     ...defaultOptions,
     ...options
@@ -6179,12 +6210,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -6212,9 +6243,9 @@ var Label = ({
 };
 
 // src/hooks/useFocusManagement.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useFocusManagement() {
-  const getFocusableElements = (0, import_react13.useCallback)(() => {
+  const getFocusableElements = (0, import_react14.useCallback)(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -6223,7 +6254,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = (0, import_react13.useCallback)(() => {
+  const getNextFocusElement = (0, import_react14.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -6235,11 +6266,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = (0, import_react13.useCallback)(() => {
+  const focusNext = (0, import_react14.useCallback)(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = (0, import_react13.useCallback)(() => {
+  const getPreviousFocusElement = (0, import_react14.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -6255,7 +6286,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = (0, import_react13.useCallback)(() => {
+  const focusPrevious = (0, import_react14.useCallback)(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -6269,10 +6300,10 @@ function useFocusManagement() {
 }
 
 // src/hooks/useFocusOnceVisible.ts
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react14.default.useState(false);
-  (0, import_react14.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react15.default.useState(false);
+  (0, import_react15.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -6308,7 +6339,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = (0, import_react15.forwardRef)(function Input2({
+var Input = (0, import_react16.forwardRef)(function Input2({
   id,
   type = "text",
   value,
@@ -6331,10 +6362,10 @@ var Input = (0, import_react15.forwardRef)(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = (0, import_react15.useRef)(null);
+  const innerRef = (0, import_react16.useRef)(null);
   const { focusNext } = useFocusManagement();
   useFocusOnceVisible(innerRef, !autoFocus);
-  (0, import_react15.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react16.useImperativeHandle)(forwardedRef, () => innerRef.current);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -6388,8 +6419,8 @@ var InputUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [usedValue, setUsedValue] = (0, import_react15.useState)(value);
-  (0, import_react15.useEffect)(() => {
+  const [usedValue, setUsedValue] = (0, import_react16.useState)(value);
+  (0, import_react16.useEffect)(() => {
     setUsedValue(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -6404,7 +6435,7 @@ var InputUncontrolled = ({
     }
   );
 };
-var FormInput = (0, import_react15.forwardRef)(function FormInput2({
+var FormInput = (0, import_react16.forwardRef)(function FormInput2({
   id,
   labelText,
   errorText,
@@ -6440,7 +6471,7 @@ var FormInput = (0, import_react15.forwardRef)(function FormInput2({
 });
 
 // src/components/layout-and-navigation/Pagination.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Pagination = ({
   overwriteTranslation,
@@ -6451,11 +6482,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const [value, setValue] = (0, import_react16.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react17.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -6465,10 +6496,10 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_clsx23.default)("row gap-x-1", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronFirst, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLeft, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "row min-w-56 gap-x-2 items-center justify-center mx-2 text-center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_clsx23.default)("flex-row-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.ChevronFirst, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.ChevronLeft, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Input,
         {
@@ -6498,27 +6529,30 @@ var Pagination = ({
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "span",
         {
-          className: "row flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
+          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
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronRight, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLast, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.ChevronRight, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.ChevronLast, {}) })
   ] });
 };
 
 // src/components/layout-and-navigation/SearchableList.tsx
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
 
 // src/hooks/useSearch.ts
-var import_react17 = require("react");
+var import_react18 = require("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())));
   });
 };
@@ -6542,22 +6576,51 @@ var SimpleSearch = (search, objects) => {
 var useSearch = ({
   list,
   initialSearch,
-  searchMapping
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
 }) => {
-  const [items, setItems] = (0, import_react17.useState)(list);
-  const [search, setSearch] = (0, import_react17.useState)(initialSearch);
-  (0, import_react17.useEffect)(() => {
-    setItems(list);
-  }, [list]);
-  const result = (0, import_react17.useMemo)(
-    () => MultiSearchWithMapping(search, items, searchMapping),
-    [search, items, searchMapping]
-  );
+  const [search, setSearch] = (0, import_react18.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react18.useState)(list);
+  const searchTags = (0, import_react18.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react18.useCallback)((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
+  (0, import_react18.useEffect)(() => {
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = (0, import_react18.useMemo)(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = (0, import_react18.useMemo)(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = (0, import_react18.useMemo)(() => {
+    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
   };
@@ -6585,9 +6648,9 @@ var SearchableList = ({
   resultListClassName
 }) => {
   const translation = useTranslation([defaultSearchableListTranslation, formTranslation], overwriteTranslation);
-  const { result, hasResult, search, setSearch } = useSearch({ list, initialSearch, searchMapping });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx24.default)("col gap-y-2", className), children: [
-    list.length > minimumItemsForSearch && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "row justify-between gap-x-4 items-center", children: [
+  const { result, hasResult, search, setSearch, updateSearch } = useSearch({ list, initialSearch, searchMapping });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx24.default)("flex-col-2", className), children: [
+    list.length > minimumItemsForSearch && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex-row-2 justify-between items-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Input,
         {
@@ -6598,16 +6661,16 @@ var SearchableList = ({
           className: "w-full"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { color: "neutral", disabled: search.length === 0, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.Search, { className: "w-full h-full" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { color: "neutral", onClick: () => updateSearch(), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.Search, { className: "w-full h-full" }) })
     ] }),
-    hasResult ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx24.default)("col gap-y-1", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "row text-description py-2 px-2", children: translation("nothingFound") })
+    hasResult ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx24.default)("flex-col-1 overflow-y-auto", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-row-2 text-description py-2 px-2", children: translation("nothingFound") })
   ] });
 };
 
 // src/components/layout-and-navigation/StepperBar.tsx
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react8 = require("lucide-react");
 var import_clsx25 = __toESM(require("clsx"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -6634,23 +6697,23 @@ var StepperBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
-      className: (0, import_clsx25.default)("row justify-between", className),
+      className: (0, import_clsx25.default)("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.ChevronLeft, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
           return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
@@ -6672,26 +6735,26 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           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"),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -6701,8 +6764,8 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = (0, import_react18.useState)(state ?? defaultState);
-  (0, import_react18.useEffect)(() => {
+  const [usedState, setUsedState] = (0, import_react19.useState)(state ?? defaultState);
+  (0, import_react19.useEffect)(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -6754,14 +6817,14 @@ var TextImage = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
-          className: (0, import_clsx26.default)(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx26.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
             badge && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "col gap-y-1 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "textstyle-title-xl", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "row mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
           ]
         }
       )
@@ -6823,7 +6886,7 @@ var VerticalDivider = ({
 };
 
 // src/components/loading-states/ErrorComponent.tsx
-var import_lucide_react10 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_clsx27 = __toESM(require("clsx"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var defaultErrorComponentTranslation = {
@@ -6840,14 +6903,14 @@ var ErrorComponent = ({
   classname
 }) => {
   const translation = useTranslation([defaultErrorComponentTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_clsx27.default)("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react10.AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react9.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/loading-states/LoadingAnimation.tsx
 var import_clsx28 = __toESM(require("clsx"));
@@ -6858,7 +6921,7 @@ var LoadingAnimation = ({
   classname
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx28.default)("col items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx28.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Helpwave, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
@@ -6874,8 +6937,8 @@ var LoadingAndErrorComponent = ({
   loadingProps,
   minimumLoadingDuration
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react19.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react19.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react20.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react20.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -6898,7 +6961,7 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_clsx29.default)("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_clsx29.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
   ] });
 };
@@ -6981,8 +7044,8 @@ var ConfirmModal = ({
     primary: "primary"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Modal, { ...restProps, onClose: onCancel, className: (0, import_clsx30.default)("justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "col grow", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-row-4 mt-3 justify-end", children: [
       onCancel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         SolidButton,
         {
@@ -7063,14 +7126,18 @@ var InputModal = ({
 };
 
 // src/components/user-action/Select.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_react21 = require("react");
+var import_react23 = require("react");
+var import_react24 = require("react");
+var import_clsx33 = __toESM(require("clsx"));
+
+// src/components/user-action/Menu.tsx
+var import_react22 = require("react");
 var import_clsx31 = __toESM(require("clsx"));
 
 // src/hooks/useOutsideClick.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -7087,83 +7154,305 @@ var useOutsideClick = (refs, handler) => {
   }, [refs, handler]);
 };
 
-// src/components/user-action/Select.tsx
+// 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
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var MenuItem = ({
+  children,
+  onClick,
+  alignment = "left",
+  isDisabled = false,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  "div",
+  {
+    className: (0, import_clsx31.default)("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 = (0, import_react22.useRef)(null);
+  const menuRef = (0, import_react22.useRef)(null);
+  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+  const [isHidden, setIsHidden] = (0, import_react22.useState)(true);
+  const bag = {
+    isOpen,
+    close: () => setIsOpen(false),
+    toggleOpen: () => setIsOpen((prevState) => !prevState),
+    disabled
+  };
+  const menuPosition = usePopoverPosition(
+    triggerRef.current?.getBoundingClientRect(),
+    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
+  );
+  (0, import_react22.useEffect)(() => {
+    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]);
+  (0, import_react22.useEffect)(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    trigger(bag, triggerRef),
+    (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: (0, import_clsx31.default)(
+          "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
+var import_lucide_react10 = require("lucide-react");
+var import_clsx32 = require("clsx");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SearchBar = ({
+  placeholder,
+  onSearch,
+  disableOnSearch,
+  containerClassName,
+  ...inputProps
+}) => {
+  const translation = useTranslation([formTranslation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx32.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      Input,
+      {
+        ...inputProps,
+        placeholder: placeholder ?? translation("search")
+      }
+    ),
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react10.Search, { className: "w-full h-full" }) })
+  ] });
+};
+
+// src/components/user-action/Select.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var SelectTile = ({
+  className,
+  disabledClassName,
+  title,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    Tile,
+    {
+      ...restProps,
+      className: (0, import_clsx33.default)("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 = (0, import_react21.useRef)(null);
-  const menuRef = (0, import_react21.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const selectedOption = options.find((option) => option.value === value);
   if (value !== void 0 && selectedOption === void 0 && selectedDisplayOverwrite === void 0) {
     console.warn("The selected value is not found in the options list. This might be an error on your part or default behavior if it is complex data type on which === does not work. In case of the latter use selectedDisplayOverwrite to set your selected text or component");
   }
   const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: (0, import_clsx31.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx31.default)("mb-1", label.className) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        "button",
-        {
-          ref: triggerRef,
-          className: (0, import_clsx31.default)(
-            "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__ */ (0, import_jsx_runtime40.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
-            isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "textstyle-description", children: hintText }),
-            isOpen ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react11.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react11.ChevronDown, {})
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        "div",
-        {
-          ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
-          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            SearchableList,
-            {
-              list: options,
-              minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
-              searchMapping: (item) => item.searchTags,
-              itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                Tile,
+  const { result, search, setSearch } = useSearch({
+    list: options,
+    searchMapping: (0, import_react23.useCallback)((item) => item.searchTags, []),
+    ...searchOptions
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx33.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx33.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Menu,
+      {
+        ...menuProps,
+        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          "button",
+          {
+            ref,
+            className: (0, import_clsx33.default)(
+              "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__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? selectedOption?.label }),
+              isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx33.default)("textstyle-description", hintTextClassName), children: hintText }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ExpansionIcon, { isExpanded: isOpen })
+            ]
+          }
+        ),
+        menuClassName: (0, import_clsx33.default)("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
+        children: (bag) => {
+          const { close } = bag;
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            !searchOptions?.disabled && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              SearchBar,
+              {
+                value: search,
+                onChangeText: setSearch,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
+              result.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                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 = ({
@@ -7173,13 +7462,13 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = (0, import_react21.useState)(value);
-  (0, import_react21.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react24.useState)(value);
+  (0, import_react24.useEffect)(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
   }, [options, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Select,
     {
       value: selected,
@@ -7195,7 +7484,7 @@ var SelectUncontrolled = ({
 };
 
 // src/components/modals/LanguageModal.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultLanguageModalTranslation = {
   en: {
     language: "Language",
@@ -7218,7 +7507,7 @@ var LanguageModal = ({
 }) => {
   const { language, setLanguage } = useLanguage();
   const translation = useTranslation([defaultLanguageModalTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Modal,
     {
       headerProps: {
@@ -7228,8 +7517,8 @@ var LanguageModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Select,
           {
             className: "mt-2",
@@ -7238,15 +7527,15 @@ var LanguageModal = ({
             onChange: (language2) => setLanguage(language2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/theming/useTheme.tsx
-var import_react22 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
   en: {
@@ -7270,27 +7559,27 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react22.createContext)({
+var ThemeContext = (0, import_react25.createContext)({
   theme: "light",
   setTheme: noop
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = (0, import_react22.useState)(initialTheme);
-  (0, import_react22.useEffect)(() => {
+  const [theme, setTheme] = (0, import_react25.useState)(initialTheme);
+  (0, import_react25.useEffect)(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
-var useTheme = () => (0, import_react22.useContext)(ThemeContext);
+var useTheme = () => (0, import_react25.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultConfirmDialogTranslation = {
   en: {
     chooseTheme: "Choose your preferred theme"
@@ -7307,7 +7596,7 @@ var ThemeModal = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useTranslation([defaultConfirmDialogTranslation, formTranslation, ThemeUtil.translation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Modal,
     {
       headerProps: {
@@ -7317,8 +7606,8 @@ var ThemeModal = ({
       },
       onClose,
       ...modalProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Select,
           {
             className: "mt-2",
@@ -7327,28 +7616,28 @@ var ThemeModal = ({
             onChange: (theme2) => setTheme(theme2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "row mt-3 gap-x-4 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
-var import_lucide_react12 = require("lucide-react");
-var import_clsx32 = __toESM(require("clsx"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_clsx34 = __toESM(require("clsx"));
+var import_jsx_runtime46 = require("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"
 };
@@ -7377,36 +7666,27 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx32.default)("row justify-center items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx34.default)("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       CheckboxPrimitive.Root,
       {
         onCheckedChange: propagateChange,
         checked,
         disabled,
         id,
-        className: (0, import_clsx32.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
+        className: (0, import_clsx34.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary": !disabled,
+          "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__ */ (0, import_jsx_runtime44.jsxs)(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.Minus, { className: innerIconSize })
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      Label,
-      {
-        ...label,
-        className: (0, import_clsx32.default)("cursor-pointer", label.className),
-        htmlFor: id,
-        onClick: changeValue
-      }
-    )
+    label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { ...label, className: (0, import_clsx34.default)(label.className), htmlFor: id })
   ] });
 };
 var CheckboxUncontrolled = ({
@@ -7415,7 +7695,7 @@ var CheckboxUncontrolled = ({
   defaultValue = false,
   ...props
 }) => {
-  const [checked, setChecked] = (0, import_react23.useState)(defaultValue);
+  const [checked, setChecked] = (0, import_react26.useState)(defaultValue);
   const handleChange = (checked2) => {
     if (onChangeTristate) {
       onChangeTristate(checked2);
@@ -7425,7 +7705,7 @@ var CheckboxUncontrolled = ({
     }
     setChecked(checked2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Checkbox,
     {
       ...props,
@@ -7436,9 +7716,9 @@ var CheckboxUncontrolled = ({
 };
 
 // src/components/properties/PropertyBase.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_clsx33 = __toESM(require("clsx"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_clsx35 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var PropertyBase = ({
   overwriteTranslation,
   name,
@@ -7452,36 +7732,44 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: (0, import_clsx33.default)("row gap-x-0 group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx35.default)("flex-row-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx33.default)("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
-          "bg-property-title-background property-title-text group-hover:border-primary": !requiredAndNoValue,
-          "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
-        }, className),
+        className: (0, import_clsx35.default)(
+          "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__ */ (0, import_jsx_runtime47.jsx)("div", { className: "max-w-6 min-w-6 text-text-default", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx33.default)("row gap-x-0 grow justify-between items-center rounded-r-xl border-2 border-l-0", {
-          "bg-surface group-hover:border-primary": !requiredAndNoValue,
-          "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
-        }, className),
+        className: (0, import_clsx35.default)(
+          "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__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-warning pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
-          onRemove && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.AlertTriangle, { size: 24 }) }),
+          onRemove && hasValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx33.default)("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              className: (0, import_clsx35.default)("items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
               children: translation("remove")
             }
@@ -7493,7 +7781,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   overwriteTranslation,
   value,
@@ -7502,30 +7790,31 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react14.Check, { size: 16 }),
-      input: () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react13.Check, { size: 24 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         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
-var import_lucide_react15 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onChange = noop,
@@ -7536,35 +7825,29 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.CalendarDays, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        "div",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        Input,
         {
-          className: (0, import_clsx34.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            Input,
-            {
-              className: (0, import_clsx34.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
-              value: dateText,
-              type: type === "dateTime" ? "datetime-local" : "date",
-              readOnly,
-              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: (0, import_clsx36.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          value: dateText,
+          type: type === "dateTime" ? "datetime-local" : "date",
+          readOnly,
+          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))
         }
       )
     }
@@ -7572,14 +7855,15 @@ var DateProperty = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
+var import_lucide_react16 = require("lucide-react");
+var import_clsx38 = __toESM(require("clsx"));
 
 // src/components/user-action/MultiSelect.tsx
-var import_react24 = require("react");
-var import_lucide_react16 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_react28 = require("react");
+var import_clsx37 = __toESM(require("clsx"));
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var defaultMultiSelectTranslation = {
   en: {
     selected: `{{amount}} selected`
@@ -7590,89 +7874,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 = (0, import_react24.useRef)(null);
-  const menuRef = (0, import_react24.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+  const { result, search, setSearch } = useSearch({
+    list: options,
+    searchMapping: (0, import_react27.useCallback)((item) => item.searchTags, []),
+    ...searchOptions
+  });
   const selectedItems = options.filter((value) => value.selected);
   const isShowingHint = !selectedDisplayOverwrite && selectedItems.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: (0, import_clsx35.default)(className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx37.default)(className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Label,
       {
         ...label,
         htmlFor: label.name,
-        className: (0, import_clsx35.default)(" mb-1", label.className),
+        className: (0, import_clsx37.default)(" mb-1", label.className),
         labelType: label.labelType ?? "labelBig"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-        "button",
-        {
-          ref: triggerRef,
-          className: (0, import_clsx35.default)(
-            "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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
-            isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
-            isOpen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronUp, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronDown, { className: "min-w-6" })
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-        "div",
-        {
-          ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              SearchableList,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Menu,
+      {
+        ...menuProps,
+        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "button",
+          {
+            ref,
+            className: (0, import_clsx37.default)(
+              "btn-md justify-between w-full border-2 h-auto",
+              {
+                "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__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: isShowingHint ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { disabled, size: "small", color: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react15.Plus, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+              !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
+              isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: (0, import_clsx37.default)("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ExpansionIcon, { isExpanded: isOpen })
+            ] })
+          }
+        ),
+        menuClassName: (0, import_clsx37.default)("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
+        children: (bag) => {
+          const { close } = bag;
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+            !searchOptions?.disabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              SearchBar,
               {
-                list: options,
-                minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
-                searchMapping: (item) => item.searchTags,
-                itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  Tile,
+                value: search,
+                onChangeText: setSearch,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("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__ */ (0, import_jsx_runtime50.jsx)(
+                  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__ */ (0, import_jsx_runtime50.jsx)(
+                      Checkbox,
+                      {
+                        checked: option.selected,
+                        onChange: update,
+                        size: "small",
+                        disabled: option.disabled
+                      }
+                    ),
+                    title: { value: option.label },
+                    onClick: update,
+                    disabled: option.disabled
                   },
                   index
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "row justify-between mt-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "row gap-x-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                );
+              }),
+              additionalItems && additionalItems({ ...bag, search })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-row-2 justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-row-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7687,7 +7989,7 @@ var MultiSelect = ({
                     children: translation("all")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   SolidButton,
                   {
                     color: "neutral",
@@ -7702,12 +8004,12 @@ var MultiSelect = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SolidButton, { size: "small", onClick: () => setIsOpen(false), children: "Done" })
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SolidButton, { size: "small", onClick: close, children: "Done" })
             ] })
-          ]
+          ] });
         }
-      )
-    ] })
+      }
+    )
   ] });
 };
 var MultiSelectUncontrolled = ({
@@ -7715,11 +8017,11 @@ var MultiSelectUncontrolled = ({
   onChange,
   ...props
 }) => {
-  const [usedOptions, setUsedOptions] = (0, import_react24.useState)(options);
-  (0, import_react24.useEffect)(() => {
+  const [usedOptions, setUsedOptions] = (0, import_react28.useState)(options);
+  (0, import_react28.useEffect)(() => {
     setUsedOptions(options);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     MultiSelect,
     {
       ...props,
@@ -7733,7 +8035,7 @@ var MultiSelectUncontrolled = ({
 };
 
 // src/components/properties/MultiSelectProperty.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   overwriteTranslation,
   options,
@@ -7741,11 +8043,12 @@ var MultiSelectProperty = ({
   readOnly = false,
   softRequired,
   onRemove,
+  onAddNew,
   ...multiSelectProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = options.some((value) => value.selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     PropertyBase,
     {
       name,
@@ -7753,20 +8056,42 @@ var MultiSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react17.List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        "div",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react16.List, { size: 24 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        MultiSelect,
         {
-          className: (0, import_clsx36.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            MultiSelect,
+          ...multiSelectProps,
+          className: (0, import_clsx38.default)("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__ */ (0, import_jsx_runtime51.jsx)(
+              SelectTile,
+              {
+                prefix: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react16.Plus, {}),
+                title: { value: `${translation("add")} ${search.trim()}` },
+                onClick: () => {
+                  onAddNew(search);
+                  close();
+                },
+                disabled: options.some((value) => value.value === search.trim())
+              }
+            );
+          },
+          triggerClassName: (0, import_clsx38.default)(
+            "!border-none !p-0 !min-h-10",
             {
-              ...multiSelectProps,
-              className: (0, import_clsx36.default)("w-full", { "bg-surface-warning": softRequired2 && !hasValue }),
-              options,
-              isDisabled: readOnly,
-              useChipDisplay: true,
-              hintText: `${translation("select")}...`
+              "!bg-warning !text-surface-warning": softRequired2 && !hasValue,
+              "": !softRequired2 || hasValue
             }
           )
         }
@@ -7776,9 +8101,9 @@ var MultiSelectProperty = ({
 };
 
 // src/components/properties/NumberProperty.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_clsx39 = __toESM(require("clsx"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var defaultNumberPropertyTranslation = {
   en: {
     value: "Value"
@@ -7799,23 +8124,23 @@ var NumberProperty = ({
 }) => {
   const translation = useTranslation([defaultNumberPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react18.Binary, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react17.Binary, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
-          className: (0, import_clsx37.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
+          className: (0, import_clsx39.default)("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Input,
               {
                 expanded: false,
-                className: (0, import_clsx37.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: (0, import_clsx39.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                 value: value?.toString() ?? "",
                 type: "number",
                 readOnly,
@@ -7838,7 +8163,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: (0, import_clsx37.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: (0, import_clsx39.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -7847,9 +8172,9 @@ var NumberProperty = ({
 };
 
 // src/components/properties/SelectProperty.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   overwriteTranslation,
   value,
@@ -7858,11 +8183,12 @@ var SingleSelectProperty = ({
   readOnly = false,
   softRequired,
   onRemove,
+  onAddNew,
   ...selectProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     PropertyBase,
     {
       name,
@@ -7870,22 +8196,45 @@ var SingleSelectProperty = ({
       readOnly,
       softRequired,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react19.List, { size: 16 }),
-      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        "div",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react18.List, { size: 24 }),
+      input: ({ softRequired: softRequired2 }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        Select,
         {
-          className: (0, import_clsx38.default)("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired2 && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            Select,
+          ...selectProps,
+          value,
+          options,
+          disabled: readOnly,
+          className: (0, import_clsx40.default)("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__ */ (0, import_jsx_runtime53.jsx)(
+              SelectTile,
+              {
+                prefix: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react18.Plus, {}),
+                title: { value: `${translation("add")} ${search.trim()}` },
+                onClick: () => {
+                  onAddNew(search);
+                  close();
+                },
+                disabled: options.some((value2) => value2.value === search.trim())
+              }
+            );
+          },
+          triggerClassName: (0, import_clsx40.default)(
+            "!border-none",
             {
-              ...selectProps,
-              value,
-              options,
-              isDisabled: readOnly,
-              className: (0, import_clsx38.default)("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
         }
       )
     }
@@ -7893,13 +8242,13 @@ var SingleSelectProperty = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
+var import_lucide_react19 = require("lucide-react");
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
-var import_react25 = require("react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Textarea = ({
   label,
   headline,
@@ -7912,39 +8261,48 @@ var Textarea = ({
   onEditCompleted = noop,
   saveDelayOptions,
   defaultStyle = true,
+  disabled = false,
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = (0, import_react25.useState)(false);
+  const [hasFocus, setHasFocus] = (0, import_react29.useState)(false);
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Label,
       {
         ...label,
         htmlFor: id,
-        className: (0, import_clsx39.default)("mb-1", label.className),
+        className: (0, import_clsx41.default)("mb-1", label.className),
         labelType: label.labelType ?? "labelSmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       "div",
       {
-        className: `${(0, import_clsx39.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: (0, import_clsx41.default)(
+          "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__ */ (0, import_jsx_runtime52.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          headline && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "textarea",
             {
               id,
-              className: (0, import_clsx39.default)("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", {
+              className: (0, import_clsx41.default)("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;
@@ -7962,13 +8320,14 @@ var Textarea = ({
                 onEditCompletedWrapper(event.target.value);
                 setHasFocus(false);
               },
+              disabled,
               ...props
             }
           )
         ]
       }
     ),
-    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { className: "text-negative", children: disclaimer })
+    hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var TextareaUncontrolled = ({
@@ -7976,11 +8335,11 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = (0, import_react25.useState)(value);
-  (0, import_react25.useEffect)(() => {
+  const [text, setText] = (0, import_react29.useState)(value);
+  (0, import_react29.useEffect)(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     Textarea,
     {
       ...props,
@@ -7994,7 +8353,7 @@ var TextareaUncontrolled = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var defaultTextPropertyTranslation = {
   en: {
     text: "Text"
@@ -8014,42 +8373,36 @@ var TextProperty = ({
 }) => {
   const translation = useTranslation([defaultTextPropertyTranslation], overwriteTranslation);
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Text, { size: 16 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        "div",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react19.Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        Textarea,
         {
-          className: (0, import_clsx40.default)("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            Textarea,
-            {
-              className: (0, import_clsx40.default)("ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
-              rows: 5,
-              defaultStyle: false,
-              value: value ?? "",
-              readOnly,
-              placeholder: `${translation("text")}...`,
-              onChangeText: (value2) => {
-                if (!value2) {
-                  onRemove();
-                } else {
-                  onChange(value2);
-                }
-              },
-              onEditCompleted: (value2) => {
-                if (!value2) {
-                  onRemove();
-                } else {
-                  onEditComplete(value2);
-                }
-              }
+          className: (0, import_clsx42.default)("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);
+            }
+          }
         }
       )
     }
@@ -8057,12 +8410,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx41 = require("clsx");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx43 = require("clsx");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: (0, import_clsx41.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: (0, import_clsx43.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -8080,97 +8433,15 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react29 = require("react");
-var import_clsx45 = __toESM(require("clsx"));
+var import_react32 = require("react");
+var import_clsx46 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/table/TableFilterButton.tsx
-var import_lucide_react21 = require("lucide-react");
-
-// src/components/user-action/Menu.tsx
-var import_react26 = require("react");
-var import_clsx42 = __toESM(require("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
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var MenuItem = ({
-  children,
-  onClick,
-  alignment = "left",
-  isDisabled = false,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-  "div",
-  {
-    className: (0, import_clsx42.default)("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
-      "text-right": alignment === "right",
-      "text-left": alignment === "left",
-      "text-disabled-text cursor-not-allowed": isDisabled,
-      "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 = (0, import_react26.useRef)(null);
-  const menuRef = (0, import_react26.useRef)(null);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          "div",
-          {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: (0, import_clsx42.default)(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
-              {
-                "top-0": alignment[0] === "t",
-                "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
-var import_react27 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_lucide_react20 = require("lucide-react");
+var import_react30 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var defaultTableFilterTranslation = {
   en: {
     filter: "Filter",
@@ -8195,17 +8466,17 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react27.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react30.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Menu,
     {
-      trigger: (onClick, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react21.FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -8213,9 +8484,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -8225,8 +8496,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "row gap-x-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -8239,8 +8510,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -8254,8 +8525,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -8268,7 +8539,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -8282,12 +8553,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "row justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SolidButton, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -8298,9 +8569,9 @@ var TableFilterButton = ({
 };
 
 // src/components/table/TableSortButton.tsx
-var import_lucide_react22 = require("lucide-react");
-var import_clsx43 = __toESM(require("clsx"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_lucide_react21 = require("lucide-react");
+var import_clsx44 = __toESM(require("clsx"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -8308,20 +8579,20 @@ var TableSortButton = ({
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react21.ChevronsUpDown, { className: "w-full h-full" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.ChevronDown, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react21.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react21.ChevronDown, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     IconButton,
     {
       size: "tiny",
       color,
-      className: (0, import_clsx43.default)(className),
+      className: (0, import_clsx44.default)(className),
       ...buttonProps,
       children: icon
     }
@@ -8329,9 +8600,9 @@ var TableSortButton = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react28 = require("react");
+var import_react31 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -8340,17 +8611,17 @@ var useResizeCallbackWrapper = (callback) => {
 };
 
 // src/components/table/TableCell.tsx
-var import_clsx44 = require("clsx");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_clsx45 = require("clsx");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: (0, import_clsx44.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/components/table/Table.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -8363,22 +8634,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react29.useRef)(null);
-  const tableRef = (0, import_react29.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react29.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react32.useRef)(null);
+  const tableRef = (0, import_react32.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react32.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react29.useState)();
-  const [pagination, setPagination] = (0, import_react29.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react32.useState)();
+  const [pagination, setPagination] = (0, import_react32.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react29.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react29.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react32.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react32.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -8387,7 +8658,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react29.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react32.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -8395,12 +8666,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react29.useMemo)(() => {
+  const tableMinWidth = (0, import_react32.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react29.useMemo)(() => {
+  const updateColumnSizes = (0, import_react32.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -8469,7 +8740,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -8517,18 +8788,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react29.useState)(false);
-  (0, import_react29.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react32.useState)(false);
+  (0, import_react32.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react29.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react32.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -8544,103 +8815,111 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react29.useMemo)(() => {
+  const columnSizeVars = (0, import_react32.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      colSizes[`--header-${header.id}-size`] = header.getSize();
-      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+      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__ */ (0, import_jsx_runtime59.jsxs)("div", { ref, className: (0, import_clsx45.default)("col gap-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_custom_scrollbars_23.Scrollbars, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-      "table",
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx46.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_react_custom_scrollbars_23.Scrollbars,
       {
-        ref: tableRef,
-        className: (0, import_clsx45.default)(tableClassName),
-        style: {
-          ...columnSizeVars,
-          width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
-        },
-        children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            "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__ */ (0, import_jsx_runtime60.jsxs)(
+          "table",
+          {
+            ref: tableRef,
+            className: (0, import_clsx46.default)(tableClassName),
+            style: {
+              ...columnSizeVars,
+              width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
-            header.id
-          )) }, headerGroup.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-              "th",
-              {
-                colSpan: header.colSpan,
-                className: (0, import_clsx45.default)("relative group", header.column.columnDef.meta?.className),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "row gap-x-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                      TableSortButton,
-                      {
-                        sortDirection: header.column.getIsSorted(),
-                        onClick: () => header.column.toggleSorting()
-                      }
-                    ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                      TableFilterButton,
-                      {
-                        column: header.column,
-                        filterType: header.column.columnDef.meta.filterType
-                      }
-                    ) : null,
-                    (0, import_react_table.flexRender)(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "div",
-                    {
-                      onMouseDown: header.getResizeHandler(),
-                      onTouchStart: header.getResizeHandler(),
-                      onDoubleClick: () => {
-                        header.column.resetSize();
-                      },
-                      className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
-                      style: {
-                        opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
-                      }
-                    }
-                  )
-                ]
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("tbody", { children: [
-            table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("td", { children: (0, import_react_table.flexRender)(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id);
-              }) }, row.id);
-            }),
-            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FillerRowElement, {}) }, column.id);
-              }) }, "filler-row-" + index);
-            })
-          ] })
-        ]
+            children: [
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                "col",
+                {
+                  style: {
+                    width: `calc(var(--header-${header?.id}-size) * 1px)`,
+                    minWidth: header.column.columnDef.minSize,
+                    maxWidth: header.column.columnDef.maxSize
+                  }
+                },
+                header.id
+              )) }, headerGroup.id)),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+                  "th",
+                  {
+                    colSpan: header.colSpan,
+                    className: (0, import_clsx46.default)("relative group", header.column.columnDef.meta?.className),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                          TableSortButton,
+                          {
+                            sortDirection: header.column.getIsSorted(),
+                            onClick: () => header.column.toggleSorting()
+                          }
+                        ),
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                          TableFilterButton,
+                          {
+                            column: header.column,
+                            filterType: header.column.columnDef.meta.filterType
+                          }
+                        ) : null,
+                        (0, import_react_table.flexRender)(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )
+                      ] }) }),
+                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                        "div",
+                        {
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          onDoubleClick: () => {
+                            header.column.resetSize();
+                          },
+                          className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
+                          style: {
+                            opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                          }
+                        }
+                      )
+                    ]
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
+                table.getRowModel().rows.map((row) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: (0, import_react_table.flexRender)(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id);
+                  }) }, row.id);
+                }),
+                range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {}) }, column.id);
+                  }) }, "filler-row-" + index);
+                })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "row justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -8651,11 +8930,11 @@ var Table = ({
   ] });
 };
 var TableUncontrolled = ({ data, ...props }) => {
-  const [usedDate, setUsedData] = (0, import_react29.useState)(data);
-  (0, import_react29.useEffect)(() => {
+  const [usedDate, setUsedData] = (0, import_react32.useState)(data);
+  (0, import_react32.useEffect)(() => {
     setUsedData(data);
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Table,
     {
       ...props,
@@ -8674,12 +8953,12 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react29.useMemo)(() => {
+  const columnsWithSelection = (0, import_react32.useMemo)(() => {
     return [
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Checkbox,
             {
               checked: table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected(),
@@ -8692,7 +8971,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -8711,15 +8990,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -8733,7 +9012,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx45.default)(
+        bodyRowClassName: (0, import_clsx46.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -8744,8 +9023,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react30 = require("react");
-var import_clsx46 = require("clsx");
+var import_react33 = require("react");
+var import_clsx47 = require("clsx");
 
 // src/util/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -8753,8 +9032,8 @@ var writeToClipboard = (text) => {
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_lucide_react23 = require("lucide-react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -8764,8 +9043,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useTranslation([formTranslation]);
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react30.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react30.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react33.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react33.useState)(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]`,
@@ -8785,10 +9064,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
-      className: (0, import_clsx46.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx47.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -8803,10 +9082,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "div",
           {
-            className: (0, import_clsx46.clsx)(
+            className: (0, import_clsx47.clsx)(
               `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",
@@ -8818,18 +9097,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "row gap-x-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react23.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "row gap-x-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react23.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx46.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx47.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -8842,8 +9121,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx47 = __toESM(require("clsx"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_clsx48 = __toESM(require("clsx"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -8862,7 +9141,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -8876,25 +9155,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx47.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx48.default)("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         SolidButton,
         {
           size: "medium",
@@ -8907,9 +9186,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react31 = require("react");
-var import_clsx48 = __toESM(require("clsx"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_clsx49 = __toESM(require("clsx"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8928,7 +9207,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react31.useState)({
+  }, setAnimation] = (0, import_react34.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -8944,7 +9223,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react31.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react34.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -8954,7 +9233,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react31.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react34.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -9027,7 +9306,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -9048,7 +9327,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -9058,27 +9337,27 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "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__ */ (0, import_jsx_runtime62.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "div",
               {
-                className: (0, import_clsx48.default)(
-                  `col items-center justify-center rounded-md`,
+                className: (0, import_clsx49.default)(
+                  `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
                     "text-on-background": currentIndex === index,
@@ -9104,10 +9383,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-var import_react32 = require("react");
-var import_lucide_react24 = require("lucide-react");
-var import_clsx49 = __toESM(require("clsx"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_lucide_react23 = require("lucide-react");
+var import_clsx50 = __toESM(require("clsx"));
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var ToggleableInput = ({
   type = "text",
   value,
@@ -9122,26 +9401,26 @@ var ToggleableInput = ({
   saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react32.useState)(initialState !== "display");
+  const [isEditing, setIsEditing] = (0, import_react35.useState)(initialState !== "display");
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
-  const ref = (0, import_react32.useRef)(null);
+  const ref = (0, import_react35.useRef)(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (isEditing) {
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
       "div",
       {
-        className: (0, import_clsx49.default)("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: (0, import_clsx50.default)("flex-row-2 items-center w-full overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx49.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: (0, import_clsx50.default)("flex-row-2 overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "input",
             {
               ref,
@@ -9169,16 +9448,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: (0, import_clsx49.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: (0, import_clsx50.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: (0, import_clsx49.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            import_lucide_react24.Pencil,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: (0, import_clsx50.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            import_lucide_react23.Pencil,
             {
-              className: (0, import_clsx49.default)(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: (0, import_clsx50.default)(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -9186,7 +9465,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -9194,11 +9473,11 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = (0, import_react32.useState)(initialValue);
-  (0, import_react32.useEffect)(() => {
+  const [value, setValue] = (0, import_react35.useState)(initialValue);
+  (0, import_react35.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     ToggleableInput,
     {
       value,
@@ -9212,9 +9491,9 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/hooks/useRerender.ts
-var import_react33 = require("react");
+var import_react36 = require("react");
 var useRerender = () => {
-  return (0, import_react33.useReducer)(() => ({}), {})[1];
+  return (0, import_react36.useReducer)(() => ({}), {})[1];
 };
 
 // src/util/builder.ts
@@ -9294,6 +9573,7 @@ function resolveSetState(action, prev) {
   ErrorComponent,
   Expandable,
   ExpandableUncontrolled,
+  ExpansionIcon,
   FAQSection,
   FillerRowElement,
   FormInput,
@@ -9334,8 +9614,10 @@ function resolveSetState(action, prev) {
   Ring,
   RingWave,
   ScrollPicker,
+  SearchBar,
   SearchableList,
   Select,
+  SelectTile,
   SelectUncontrolled,
   SessionStorageService,
   SimpleSearch,
@@ -9412,6 +9694,7 @@ function resolveSetState(action, prev) {
   useLocalStorage,
   useLocale,
   useOutsideClick,
+  usePopoverPosition,
   useRerender,
   useResizeCallbackWrapper,
   useSearch,