@helpwave/hightide 0.3.0 → 0.5.0

package/dist/index.js

@@ -6262,12 +6262,16 @@ __export(index_exports, {
   DatePicker: () => DatePicker,
   DatePickerUncontrolled: () => DatePickerUncontrolled,
   DateProperty: () => DateProperty,
+  DateTimeInput: () => DateTimeInput,
+  DateTimeInputUncontrolled: () => DateTimeInputUncontrolled,
   DateTimePicker: () => DateTimePicker,
+  DateUtils: () => DateUtils,
   DayPicker: () => DayPicker,
   DayPickerUncontrolled: () => DayPickerUncontrolled,
   Dialog: () => Dialog,
   DiscardChangesDialog: () => DiscardChangesDialog,
   DividerInserter: () => DividerInserter,
+  Duration: () => Duration,
   EaseFunctions: () => EaseFunctions,
   ErrorComponent: () => ErrorComponent,
   Expandable: () => Expandable,
@@ -6365,6 +6369,7 @@ __export(index_exports, {
   Transition: () => Transition,
   UseValidators: () => UseValidators,
   VerticalDivider: () => VerticalDivider,
+  Visibility: () => Visibility,
   YearMonthPicker: () => YearMonthPicker,
   YearMonthPickerUncontrolled: () => YearMonthPickerUncontrolled,
   addDuration: () => addDuration,
@@ -6374,19 +6379,16 @@ __export(index_exports, {
   closestMatch: () => closestMatch,
   createLoopingList: () => createLoopingList,
   createLoopingListWithIndex: () => createLoopingListWithIndex,
-  equalDate: () => equalDate,
   equalSizeGroups: () => equalSizeGroups,
   formatDate: () => formatDate,
   formatDateTime: () => formatDateTime,
   getBetweenDuration: () => getBetweenDuration,
-  getDaysInMonth: () => getDaysInMonth,
   getNeighbours: () => getNeighbours,
   getWeeksForCalenderMonth: () => getWeeksForCalenderMonth,
   hightideTranslation: () => hightideTranslation,
   hightideTranslationLocales: () => hightideTranslationLocales,
   isInTimeSpan: () => isInTimeSpan,
   match: () => match,
-  monthsList: () => monthsList,
   noop: () => noop,
   range: () => range,
   resolveSetState: () => resolveSetState,
@@ -6416,7 +6418,6 @@ __export(index_exports, {
   useTranslatedValidators: () => useTranslatedValidators,
   useZIndexRegister: () => useZIndexRegister,
   validateEmail: () => validateEmail,
-  weekDayList: () => weekDayList,
   writeToClipboard: () => writeToClipboard
 });
 module.exports = __toCommonJS(index_exports);
@@ -6674,10 +6675,6 @@ var formatDateTime = (date) => {
   const minutes = date.getMinutes().toString().padStart(2, "0");
   return `${dateString}T${hours}:${minutes}`;
 };
-var getDaysInMonth = (year, month) => {
-  const lastDayOfMonth = new Date(year, month + 1, 0);
-  return lastDayOfMonth.getDate();
-};
 var changeDuration = (date, duration, isAdding) => {
   const {
     years = 0,
@@ -6787,6 +6784,51 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
   }
   return equalSizeGroups(dayList, 7);
 };
+var formatGerman = (date, showTime) => {
+  const d = new Intl.DateTimeFormat("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(date);
+  if (!showTime) return d;
+  const t = new Intl.DateTimeFormat("de-DE", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+  return `${d} um ${t} Uhr`;
+};
+var formatAbsolute = (date, locale, showTime) => {
+  if (locale === "de-DE") {
+    return formatGerman(date, showTime);
+  }
+  const options = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  };
+  if (showTime) {
+    options.hour = "numeric";
+    options.minute = "numeric";
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+var formatRelative = (date, locale, showTime) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
+  if (Math.abs(diffInSeconds) < 60) return rtf.format(Math.round(diffInSeconds), "second");
+  if (Math.abs(diffInSeconds) < 3600) return rtf.format(Math.round(diffInSeconds / 60), "minute");
+  if (Math.abs(diffInSeconds) < 86400) return rtf.format(Math.round(diffInSeconds / 3600), "hour");
+  if (Math.abs(diffInSeconds) < 604800) return rtf.format(Math.round(diffInSeconds / 86400), "day");
+  return formatAbsolute(date, locale, showTime);
+};
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  formatAbsolute,
+  formatRelative
+};
 
 // src/components/date/DatePicker.tsx
 var import_clsx7 = __toESM(require("clsx"));
@@ -6969,6 +7011,16 @@ var hightideTranslation = {
     "remove": `Entfernen`,
     "required": `Erforderlich`,
     "reset": `Zur\xFCcksetzen`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Angewendet `;
+      _out += import_internationalization.TranslationGen.resolvePlural(otherSortings, {
+        "=0": `als prim\xE4re Sortierung`,
+        "=1": `nach ${otherSortings} anderen Sortierung`,
+        "other": `nach ${otherSortings} anderen Sortierungen`
+      });
+      return _out;
+    },
     "save": `Speichern`,
     "saved": `Gespeichert`,
     "search": `Suche`,
@@ -7205,6 +7257,16 @@ var hightideTranslation = {
     "remove": `Remove`,
     "required": `Required`,
     "reset": `Reset`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Applied `;
+      _out += import_internationalization.TranslationGen.resolvePlural(otherSortings, {
+        "=0": `as the first sorting`,
+        "=1": `after ${otherSortings} other sorting`,
+        "other": `after ${otherSortings} other sortings`
+      });
+      return _out;
+    },
     "save": `Save`,
     "saved": `Saved`,
     "search": `Search`,
@@ -7491,7 +7553,7 @@ var ButtonUtil = {
     warning: "warning",
     negative: "negative",
     neutral: "neutral",
-    none: ""
+    none: "reset-coloring-variables"
   }
 };
 var Button = (0, import_react4.forwardRef)(function SolidButton({
@@ -7503,6 +7565,7 @@ var Button = (0, import_react4.forwardRef)(function SolidButton({
   startIcon,
   endIcon,
   disabled,
+  allowClickEventPropagation = false,
   className,
   ...restProps
 }, ref) {
@@ -7525,6 +7588,12 @@ var Button = (0, import_react4.forwardRef)(function SolidButton({
         paddingMapping[layout][size],
         className
       ),
+      onClick: (event) => {
+        if (!allowClickEventPropagation) {
+          event.stopPropagation();
+        }
+        restProps?.onClick(event);
+      },
       disabled,
       children: [
         startIcon,
@@ -7553,8 +7622,8 @@ var DayPicker = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("flex-col-1 min-w-[220px] select-none", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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 isSelected = !!selected && DateUtils.equalDate(selected, date);
+      const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -7754,8 +7823,9 @@ 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: "flex-row-1", children: monthList.map((month) => {
-          const monthIndex = monthsList.indexOf(month);
+        contentExpandedClassName: "!p-2",
+        children: equalSizeGroups([...DateUtils.monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-row-1", children: monthList.map((month) => {
+          const monthIndex = DateUtils.monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
           const firstOfMonth = new Date(year, monthIndex, 1);
@@ -8054,7 +8124,7 @@ var TimePicker = ({
     transformer(newDate);
     onChange?.(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx8.default)("flex-row-2 w-fit min-w-[150px] select-none overflow-hidden", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx8.default)("flex-row-2 select-none overflow-hidden", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-col-1 h-full overflow-y-auto min-w-16", children: hours.map((hour) => {
       const isSelected = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -8633,7 +8703,6 @@ var DiscardChangesDialog = ({
 
 // src/components/user-action/input/Input.tsx
 var import_react18 = require("react");
-var import_clsx11 = __toESM(require("clsx"));
 
 // src/hooks/useDelay.ts
 var import_react16 = require("react");
@@ -8748,8 +8817,6 @@ var Input = (0, import_react18.forwardRef)(function Input2({
   editCompleteOptions,
   disabled = false,
   invalid = false,
-  defaultStyle = true,
-  className,
   ...props
 }, forwardedRef) {
   const {
@@ -8772,15 +8839,6 @@ var Input = (0, import_react18.forwardRef)(function Input2({
       ref: innerRef,
       value,
       disabled,
-      className: defaultStyle ? (0, import_clsx11.default)(
-        "px-3 py-2 rounded-md text-sm h-10 border-2 border-transparent focus-style-none",
-        {
-          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
-          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": !disabled && invalid,
-          "bg-disabled-background text-disabled border-disabled-border": disabled
-        },
-        className
-      ) : className,
       onKeyDown: (event) => {
         props.onKeyDown?.(event);
         if (!allowEnterComplete) {
@@ -8809,6 +8867,10 @@ var Input = (0, import_react18.forwardRef)(function Input2({
         });
         onChangeText?.(value2);
       },
+      "data-name": props["data-name"] ?? "input",
+      "data-value": value ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
       "aria-invalid": props["aria-invalid"] ?? invalid,
       "aria-disabled": props["aria-disabled"] ?? disabled
     }
@@ -8849,7 +8911,7 @@ var InputDialog = ({
 
 // src/components/user-action/Select.tsx
 var import_react20 = require("react");
-var import_clsx13 = __toESM(require("clsx"));
+var import_clsx12 = __toESM(require("clsx"));
 
 // src/utils/match.ts
 var match = (key, values) => {
@@ -8860,7 +8922,7 @@ var match = (key, values) => {
 var import_lucide_react4 = require("lucide-react");
 
 // src/components/layout/Chip.tsx
-var import_clsx12 = __toESM(require("clsx"));
+var import_clsx11 = __toESM(require("clsx"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var chipColors = ButtonUtil.colors;
 var ChipUtil = {
@@ -8880,7 +8942,7 @@ var Chip = ({
     "div",
     {
       ...restProps,
-      className: (0, import_clsx12.default)(
+      className: (0, import_clsx11.default)(
         `flex-row-0 w-fit font-semibold coloring-solid`,
         colorMapping,
         {
@@ -8905,7 +8967,7 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx12.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx11.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Chip,
     {
       ...value,
@@ -9265,7 +9327,7 @@ var SelectOption = (0, import_react20.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx13.default)(
+        className: (0, import_clsx12.default)(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -9291,7 +9353,7 @@ var SelectOption = (0, import_react20.forwardRef)(
           iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_lucide_react4.CheckIcon,
             {
-              className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx12.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
@@ -9299,7 +9361,7 @@ var SelectOption = (0, import_react20.forwardRef)(
           iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_lucide_react4.CheckIcon,
             {
-              className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx12.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -9347,19 +9409,8 @@ var SelectButton = (0, import_react20.forwardRef)(function SelectButton2({ place
             break;
         }
       },
-      className: (0, import_clsx13.default)(
-        "flex-row-2 items-center justify-between rounded-md px-3 py-2",
-        {
-          "bg-input-background text-placeholder": !hasValue && !disabled && !invalid,
-          "bg-input-background text-input-text": hasValue && !disabled && !invalid,
-          "bg-negative/20": !disabled && invalid,
-          "text-placeholder": !hasValue && !disabled,
-          "text-negative": hasValue && !disabled && invalid,
-          "bg-disabled-background text-disabled": disabled
-        },
-        props.className
-      ),
-      "data-placeholder": !hasValue ? "" : void 0,
+      "data-name": props["data-name"] ?? "select-button",
+      "data-value": hasValue ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
@@ -9368,21 +9419,11 @@ var SelectButton = (0, import_react20.forwardRef)(function SelectButton2({ place
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx13.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx12.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          ExpansionIcon,
-          {
-            isExpanded: state.isOpen,
-            className: (0, import_clsx13.default)({
-              "text-input-text": !disabled && !invalid,
-              "text-negative": !disabled && invalid,
-              "text-disabled": disabled
-            })
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
@@ -9403,10 +9444,12 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
     {
       ...props,
       ref: innerRef,
-      className: (0, import_clsx13.default)(
-        "flex flex-wrap flex-row gap-2 items-center bg-input-background text-input-text rounded-md px-2.5 py-2.5",
-        props.className
-      ),
+      onClick: (event) => {
+        toggleOpen();
+        props.onClick?.(event);
+      },
+      "data-name": props["data-name"] ?? "select-button-chips",
+      "data-value": state.value.length > 0 ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
@@ -9420,11 +9463,11 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
               onClick: () => {
                 item.toggleSelection(value, false);
               },
-              size: "none",
+              size: "tiny",
               color: "negative",
               coloringStyle: "text",
-              className: "flex-row-0 items-center px-0.5 py-0.5 w-6 h-6 rounded",
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.XIcon, { className: "w-5 h-5" })
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
@@ -9432,7 +9475,10 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
           Button,
           {
             id: state.id,
-            onClick: () => toggleOpen(),
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
@@ -9450,6 +9496,7 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
             "aria-haspopup": "listbox",
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+            className: "size-9",
             children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.Plus, {})
           }
         )
@@ -9483,7 +9530,7 @@ var SelectContent = (0, import_react20.forwardRef)(
         "div",
         {
           id: `select-container-${state.id}`,
-          className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen", containerClassName),
+          className: (0, import_clsx12.default)("fixed inset-0 w-screen h-screen", containerClassName),
           style: { zIndex },
           hidden: !state.isOpen,
           children: [
@@ -9492,7 +9539,7 @@ var SelectContent = (0, import_react20.forwardRef)(
               {
                 id: `select-background-${state.id}`,
                 onClick: () => trigger.toggleOpen(false),
-                className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen")
+                className: (0, import_clsx12.default)("fixed inset-0 w-screen h-screen")
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -9541,7 +9588,7 @@ var SelectContent = (0, import_react20.forwardRef)(
                       break;
                   }
                 },
-                className: (0, import_clsx13.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                className: (0, import_clsx12.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
                 style: {
                   opacity: position ? void 0 : 0,
                   position: "fixed",
@@ -9691,7 +9738,7 @@ var LanguageDialog = ({
 
 // src/components/dialog/ThemeDialog.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_clsx14 = __toESM(require("clsx"));
+var import_clsx13 = __toESM(require("clsx"));
 
 // src/theming/useTheme.tsx
 var import_react21 = require("react");
@@ -9781,11 +9828,11 @@ var useTheme = () => {
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MoonIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MoonIcon, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.SunIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.SunIcon, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MonitorCog, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MonitorCog, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -9831,10 +9878,10 @@ var ThemeDialog = ({
 
 // src/components/form/FormElementWrapper.tsx
 var import_react22 = require("react");
-var import_clsx16 = require("clsx");
+var import_clsx15 = require("clsx");
 
 // src/components/user-action/Label.tsx
-var import_clsx15 = __toESM(require("clsx"));
+var import_clsx14 = __toESM(require("clsx"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var styleMapping = {
   md: "typography-label-md color-label-text",
@@ -9846,7 +9893,7 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...props, className: (0, import_clsx15.default)(styleMapping[size], className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...props, className: (0, import_clsx14.default)(styleMapping[size], className), children });
 };
 
 // src/components/form/FormElementWrapper.tsx
@@ -9897,7 +9944,7 @@ var FormElementWrapper = ({
     "aria-invalid": !!error,
     "aria-errormessage": error ? errorId : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx16.clsx)("relative flex flex-col gap-y-1", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx15.clsx)("relative flex flex-col gap-y-1", containerClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       Label,
       {
@@ -9905,7 +9952,7 @@ var FormElementWrapper = ({
         id: labelId,
         htmlFor: usedId,
         size: "lg",
-        className: (0, import_clsx16.clsx)("flex-row-1 items-start", labelProps?.className),
+        className: (0, import_clsx15.clsx)("flex-row-1 items-start", labelProps?.className),
         children: [
           label,
           required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
@@ -9917,7 +9964,7 @@ var FormElementWrapper = ({
       {
         ...descriptionProps,
         id: descriptionId,
-        className: (0, import_clsx16.clsx)("text-description text-sm", descriptionProps?.className),
+        className: (0, import_clsx15.clsx)("text-description text-sm", descriptionProps?.className),
         children: description
       }
     ),
@@ -9927,7 +9974,7 @@ var FormElementWrapper = ({
       {
         ...errorProps,
         id: errorId,
-        className: (0, import_clsx16.clsx)("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
+        className: (0, import_clsx15.clsx)("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
         role: "alert",
         "aria-hidden": !error,
         "aria-live": "polite",
@@ -9938,7 +9985,7 @@ var FormElementWrapper = ({
 };
 
 // src/components/icons-and-geometry/Avatar.tsx
-var import_clsx17 = __toESM(require("clsx"));
+var import_clsx16 = __toESM(require("clsx"));
 var import_react23 = require("react");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -9988,7 +10035,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
-      className: (0, import_clsx17.default)(
+      className: (0, import_clsx16.default)(
         `relative flex-row-0 items-center justify-center bg-primary text-on-primary`,
         rounding,
         className
@@ -10000,7 +10047,7 @@ var Avatar = ({
           {
             src: image?.avatarUrl,
             alt: image?.alt,
-            className: (0, import_clsx17.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
+            className: (0, import_clsx16.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
             onLoad: () => setIsLoaded(true),
             onError: () => setHasError(true)
           }
@@ -10034,7 +10081,7 @@ var AvatarGroup = ({
             ...avatar,
             size,
             fullyRounded,
-            className: (0, import_clsx17.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
+            className: (0, import_clsx16.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
           }
         )
       },
@@ -10043,7 +10090,7 @@ var AvatarGroup = ({
     showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
-        className: (0, import_clsx17.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
+        className: (0, import_clsx16.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -10054,7 +10101,7 @@ var AvatarGroup = ({
 };
 
 // src/components/icons-and-geometry/Circle.tsx
-var import_clsx18 = __toESM(require("clsx"));
+var import_clsx17 = __toESM(require("clsx"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Circle = ({
   radius = 20,
@@ -10066,7 +10113,7 @@ var Circle = ({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
-      className: (0, import_clsx18.default)(`rounded-full`, className),
+      className: (0, import_clsx17.default)(`rounded-full`, className),
       style: {
         width: `${size}px`,
         height: `${size}px`,
@@ -10079,7 +10126,7 @@ var Circle = ({
 
 // src/components/icons-and-geometry/Ring.tsx
 var import_react24 = require("react");
-var import_clsx19 = __toESM(require("clsx"));
+var import_clsx18 = __toESM(require("clsx"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Ring = ({
   innerSize = 20,
@@ -10089,7 +10136,7 @@ var Ring = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
-      className: (0, import_clsx19.default)(`bg-transparent rounded-full outline`, className),
+      className: (0, import_clsx18.default)(`bg-transparent rounded-full outline`, className),
       style: {
         width: `${innerSize}px`,
         height: `${innerSize}px`,
@@ -10228,7 +10275,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle1 / 2,
-            className: (0, import_clsx19.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            className: (0, import_clsx18.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`
@@ -10242,7 +10289,7 @@ var RadialRings = ({
             width: (sizeCircle2 - sizeCircle1) / 2,
             onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
             repeating: true,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle2ClassName,
               { "opacity-5": currentRing !== 0 }
             ),
@@ -10262,7 +10309,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle2,
             width: waveWidth,
             repeating: true,
-            className: (0, import_clsx19.default)(waveBaseColor, `opacity-5`),
+            className: (0, import_clsx18.default)(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10276,7 +10323,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle2 / 2,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle2ClassName,
               { "opacity-20": currentRing < 1 },
               `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
@@ -10294,7 +10341,7 @@ var RadialRings = ({
             width: (sizeCircle3 - sizeCircle2) / 2,
             onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
             repeating: true,
-            className: (0, import_clsx19.default)(circle3ClassName),
+            className: (0, import_clsx18.default)(circle3ClassName),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10311,7 +10358,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle3 - waveWidth,
             width: waveWidth,
             repeating: true,
-            className: (0, import_clsx19.default)(waveBaseColor, `opacity-5`),
+            className: (0, import_clsx18.default)(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10325,7 +10372,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle3 / 2,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle3ClassName,
               { "opacity-20": currentRing < 2 },
               `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
@@ -10363,7 +10410,7 @@ var TagIcon = ({
 
 // src/components/layout/Carousel.tsx
 var import_react25 = require("react");
-var import_clsx20 = __toESM(require("clsx"));
+var import_clsx19 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CarouselContext = (0, import_react25.createContext)(null);
@@ -10406,10 +10453,12 @@ function CarouselTabs({
           "button",
           {
             id: `${id}-tab-${index}`,
-            ref: (el) => tabRefs.current[index] = el,
+            ref: (el) => {
+              tabRefs.current[index] = el;
+            },
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
-            className: (0, import_clsx20.default)(
+            className: (0, import_clsx19.default)(
               "w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md",
               {
                 "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
@@ -10443,7 +10492,7 @@ var CarouselSlide = (0, import_react25.forwardRef)(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: (0, import_clsx20.default)("focus-style-none group/slide", props.className),
+        className: (0, import_clsx19.default)("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -10592,7 +10641,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: (0, import_clsx20.default)("flex-col-2 items-center w-full", props.className),
+      className: (0, import_clsx19.default)("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -10601,7 +10650,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: (0, import_clsx20.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: (0, import_clsx19.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                 "div",
@@ -10610,7 +10659,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: (0, import_clsx20.default)(`flex-row-2 relative h-full`, heightClassName),
+                  className: (0, import_clsx19.default)(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -10623,7 +10672,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: (0, import_clsx20.default)(
+                          className: (0, import_clsx19.default)(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -10640,13 +10689,13 @@ var Carousel = ({
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: (0, import_clsx19.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: (0, import_clsx19.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -10655,7 +10704,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: (0, import_clsx20.default)("px-16 h-full"),
+                  className: (0, import_clsx19.default)("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -10672,7 +10721,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx20.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: (0, import_clsx19.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLeft, { size: 24 })
@@ -10683,7 +10732,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx20.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: (0, import_clsx19.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronRight, { size: 24 })
@@ -10700,7 +10749,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-var import_clsx21 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var DividerInserter = ({
   children,
@@ -10718,11 +10767,11 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx21.default)(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx20.default)(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
-var import_clsx22 = __toESM(require("clsx"));
+var import_clsx21 = __toESM(require("clsx"));
 
 // src/components/layout/MarkdownInterpreter.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -10968,7 +11017,7 @@ var FAQSection = ({
       label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
-      className: (0, import_clsx22.default)("rounded-xl", expandableClassName),
+      className: (0, import_clsx21.default)("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
@@ -10978,7 +11027,7 @@ var FAQSection = ({
 // src/components/layout/FloatingContainer.tsx
 var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_clsx23 = require("clsx");
+var import_clsx22 = require("clsx");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContainer2({
   children,
@@ -11023,7 +11072,7 @@ var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContaine
             ...position,
             ...props.style
           },
-          className: (0, import_clsx23.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          className: (0, import_clsx22.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
           children
         }
       )
@@ -11034,7 +11083,7 @@ var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContaine
 
 // src/components/layout/ListBox.tsx
 var import_react27 = __toESM(require("react"));
-var import_clsx24 = require("clsx");
+var import_clsx23 = require("clsx");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ListBoxContext = (0, import_react27.createContext)(null);
 function useListBoxContext() {
@@ -11077,7 +11126,7 @@ var ListBoxItem = (0, import_react27.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx24.clsx)(
+        className: (0, import_clsx23.clsx)(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -11298,7 +11347,7 @@ var ListBoxUncontrolled = ({
 // src/components/layout/TabView.tsx
 var import_react28 = require("react");
 var import_react29 = require("react");
-var import_clsx25 = __toESM(require("clsx"));
+var import_clsx24 = __toESM(require("clsx"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TabContext = (0, import_react29.createContext)(null);
 function useTabContext() {
@@ -11343,8 +11392,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
     buttonRefs.current[nextId]?.focus();
   };
   const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx25.default)("w-full", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx25.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx24.default)("w-full", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx24.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         role: "tab",
@@ -11352,10 +11401,12 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
         "aria-controls": `${t.id}-panel`,
         id: `${t.id}-tab`,
         tabIndex: active === t.id ? 0 : -1,
-        ref: (el) => buttonRefs.current[t.id] = el,
+        ref: (el) => {
+          buttonRefs.current[t.id] = el;
+        },
         onClick: () => setActive(t.id),
         onKeyDown: (e) => onKeyDown(e, t.id),
-        className: (0, import_clsx25.default)(
+        className: (0, import_clsx24.default)(
           "flex-row-0 grow justify-center px-3 pb-2.25 typography-label-md font-bold border-b-2",
           active === t.id ? "border-primary" : "text-description hover:text-on-background"
         ),
@@ -11389,7 +11440,7 @@ function Tab({ id: customId, label, children, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-var import_clsx26 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TextImage = ({
   title,
@@ -11415,7 +11466,7 @@ var TextImage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
-      className: (0, import_clsx26.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx25.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -11423,9 +11474,9 @@ var TextImage = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
-          className: (0, import_clsx26.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx25.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx25.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -11491,16 +11542,24 @@ var VerticalDivider = ({
   ) });
 };
 
+// src/components/layout/Visibility.tsx
+function Visibility({ children, isVisible }) {
+  if (isVisible) {
+    return children;
+  }
+  return void 0;
+}
+
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx26.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -11510,14 +11569,14 @@ var ErrorComponent = ({
 var import_react30 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
-var import_clsx28 = require("clsx");
+var import_clsx27 = require("clsx");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx28.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx27.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_clsx29 = require("clsx");
+var import_clsx28 = require("clsx");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
@@ -11538,34 +11597,34 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)(className) });
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx28.clsx)(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx28.clsx)("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx31.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx30.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { ...rest, size, disabled: rest.disabled, onClick })
   ] });
 };
@@ -11628,18 +11687,18 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-var import_clsx32 = __toESM(require("clsx"));
+var import_clsx31 = __toESM(require("clsx"));
 var import_react31 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx32.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx31.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react31.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_link.default,
         {
           href: crumb.link,
-          className: (0, import_clsx32.default)(
+          className: (0, import_clsx31.default)(
             "btn-sm coloring-text-hover",
             {
               description: !isLast,
@@ -11650,7 +11709,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx32.default)(`px-1`, "text-description"), children: "/" })
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx31.default)(`px-1`, "text-description"), children: "/" })
     ] }, index);
   }) });
 };
@@ -11660,7 +11719,7 @@ var import_lucide_react9 = require("lucide-react");
 var import_react32 = require("react");
 var import_react33 = require("react");
 var import_link2 = __toESM(require_link2());
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -11672,7 +11731,7 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = (0, import_react33.useState)(false);
-  const containerRef = (0, import_react33.useRef)();
+  const containerRef = (0, import_react33.useRef)(null);
   const triggerRef = (0, import_react33.useRef)(null);
   const id = (0, import_react33.useId)();
   const style = useFloatingElement({
@@ -11723,7 +11782,7 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx32.default)(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
@@ -11742,7 +11801,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx33.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx32.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = (0, import_react33.useState)(false);
@@ -11757,7 +11816,7 @@ var Navigation = ({ ...props }) => {
       NavigationItemList,
       {
         ...props,
-        className: (0, import_clsx33.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: (0, import_clsx32.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -11787,7 +11846,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx32.default)(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -11806,7 +11865,7 @@ var Navigation = ({ ...props }) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.XIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx33.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx32.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -11815,7 +11874,7 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 var import_react34 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var Pagination = ({
@@ -11840,7 +11899,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx34.default)("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx33.default)("flex-row-1", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
@@ -11868,7 +11927,7 @@ var Pagination = ({
         Input,
         {
           value,
-          className: (0, import_clsx34.default)(
+          className: (0, import_clsx33.default)(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -11924,7 +11983,7 @@ var Pagination = ({
 
 // src/components/navigation/StepperBar.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -11950,7 +12009,7 @@ var StepperBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: (0, import_clsx35.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx34.default)("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           Button,
@@ -11972,7 +12031,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx35.default)(
+              className: (0, import_clsx34.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -12033,24 +12092,25 @@ var import_lucide_react14 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
-  sm: "size-5 border-1",
-  md: "size-6 border-1",
-  lg: "size-8 border-2"
+  small: "size-5 border-2",
+  medium: "size-6 border-2",
+  large: "size-8 border-2"
 };
 var checkboxIconSizeMapping = {
-  sm: "size-4 stroke-3",
-  md: "size-5 stroke-3",
-  lg: "size-7 stroke-3"
+  small: "size-3.5 stroke-3",
+  medium: "size-4.5 stroke-3",
+  large: "size-6 stroke-3"
 };
 var Checkbox = ({
   disabled,
   checked = false,
   indeterminate = false,
+  invalid = false,
   onCheckedChange,
-  size = "md",
+  size = "medium",
   className = "",
   ...props
 }) => {
@@ -12074,25 +12134,21 @@ var Checkbox = ({
           props.onKeyDown?.(event);
         }
       },
-      className: (0, import_clsx36.default)(
+      className: (0, import_clsx35.default)(
         usedSizeClass,
-        `flex-col-0 items-center justify-center rounded`,
-        {
-          "text-disabled border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "hover:border-primary": !disabled,
-          "bg-input-background": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && (checked || indeterminate)
-        },
         className
       ),
+      "data-name": props["data-name"] ?? "checkbox",
+      "data-value": !indeterminate ? checked : "indeterminate",
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
       role: "checkbox",
       "aria-checked": indeterminate ? "mixed" : checked,
       "aria-disabled": disabled,
       tabIndex: disabled ? -1 : 0,
       children: [
-        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_clsx36.default)("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+        !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize, "aria-hidden": true }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize, "aria-hidden": true })
       ]
     }
   );
@@ -12115,7 +12171,7 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
@@ -12129,14 +12185,14 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx37.default)("flex-row-0 group", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx36.default)("flex-row-0 group", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx36.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-property-title-background text-property-title-text group-hover:border-primary group-focus-within:border-primary": !requiredAndNoValue,
             "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -12150,10 +12206,10 @@ var PropertyBase = ({
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx36.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-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
+            "bg-input-background text-input-text group-hover:border-primary group-focus-within:border-primary": !requiredAndNoValue,
             "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -12167,7 +12223,7 @@ var PropertyBase = ({
               onClick: onRemove,
               color: "negative",
               coloringStyle: "text",
-              className: (0, import_clsx37.default)("items-center"),
+              className: (0, import_clsx36.default)("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -12215,7 +12271,7 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
@@ -12236,7 +12292,7 @@ var DateProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Input,
         {
-          className: (0, import_clsx38.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: (0, import_clsx37.default)("default-style-none focus-style-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -12258,7 +12314,7 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
@@ -12280,14 +12336,15 @@ var MultiSelectProperty = ({
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: (0, import_clsx39.default)(
+            className: (0, import_clsx38.default)(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: (0, import_clsx39.default)({
-              "!bg-warning !text-surface-warning": softRequired && !hasValue
-            })
+            className: (0, import_clsx38.default)(
+              "default-style-none flex flex-wrap gap-x-2 gap-y-2 items-center hover:cursor-pointer",
+              { "!bg-warning text-surface-warning": softRequired && !hasValue }
+            )
           },
           children
         }
@@ -12298,7 +12355,7 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
@@ -12323,12 +12380,12 @@ var NumberProperty = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "div",
           {
-            className: (0, import_clsx40.default)("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
+            className: (0, import_clsx39.default)("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 Input,
                 {
-                  className: (0, import_clsx40.default)("!ring-0 !border-0 !outline-0 !py-0 pl-0 pr-8 !m-0 !shadow-none !rounded-none w-full", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                  className: (0, import_clsx39.default)("default-style-none focus-style-none w-full pr-8", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                   value: value?.toString() ?? "",
                   type: "number",
                   readOnly,
@@ -12354,7 +12411,7 @@ var NumberProperty = ({
               suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "span",
                 {
-                  className: (0, import_clsx40.default)(
+                  className: (0, import_clsx39.default)(
                     "absolute top-1/2 -translate-y-1/2 right-2",
                     { "bg-surface-warning": softRequired && !hasValue }
                   ),
@@ -12371,7 +12428,7 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
@@ -12394,8 +12451,8 @@ var SingleSelectProperty = ({
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: (0, import_clsx41.default)(
-              "border-none w-full",
+            className: (0, import_clsx40.default)(
+              "default-style-none focus-style-none flex-row-2 w-full items-center",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
               }
@@ -12411,11 +12468,11 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
 var import_react36 = require("react");
-var import_clsx42 = __toESM(require("clsx"));
+var import_clsx41 = __toESM(require("clsx"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   id,
@@ -12424,10 +12481,8 @@ var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   onBlur,
   onEditCompleted,
   saveDelayOptions,
-  defaultStyle = true,
   invalid = false,
   disabled = false,
-  className,
   ...props
 }, ref) {
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
@@ -12438,18 +12493,10 @@ var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "textarea",
     {
+      ...props,
       ref,
       id,
-      className: (0, import_clsx42.default)(
-        "resize-none w-full h-32 overflow-y-scroll",
-        "py-2 px-3 rounded-md border-2 border-transparent focus-style-none",
-        {
-          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
-          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": invalid && !disabled && defaultStyle,
-          "text-disabled bg-disabled-background border-disabled-border": disabled && defaultStyle
-        },
-        className
-      ),
+      disabled,
       onChange: (event) => {
         const value = event.target.value;
         restartTimer(() => {
@@ -12462,8 +12509,10 @@ var Textarea = (0, import_react36.forwardRef)(function Textarea2({
         onBlur?.(event);
         onEditCompletedWrapper(event.target.value);
       },
-      disabled,
-      ...props
+      "data-name": props["data-name"] ?? "textarea",
+      "data-value": props.value ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0
     }
   );
 });
@@ -12496,7 +12545,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
-      className: (0, import_clsx42.default)(
+      className: (0, import_clsx41.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -12511,11 +12560,10 @@ var TextareaWithHeadline = ({
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx42.default)(
+            className: (0, import_clsx41.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
-            ),
-            defaultStyle: false
+            )
           }
         )
       ]
@@ -12545,11 +12593,11 @@ var TextProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Textarea,
         {
-          className: (0, import_clsx43.default)({
-            "bg-surface-warning placeholder-warning": softRequired && !hasValue
-          }),
+          className: (0, import_clsx42.default)(
+            "default-style-none focus-style-none w-full",
+            { "bg-surface-warning placeholder-warning": softRequired && !hasValue }
+          ),
           rows: 5,
-          defaultStyle: false,
           value: value ?? "",
           readOnly,
           placeholder: `${translation("text")}...`,
@@ -12574,12 +12622,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx44 = require("clsx");
+var import_clsx43 = require("clsx");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx44.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx43.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -12597,18 +12645,18 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_clsx48 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/table/TableCell.tsx
-var import_clsx45 = require("clsx");
+var import_clsx44 = require("clsx");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx44.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
@@ -12625,41 +12673,179 @@ var useResizeCallbackWrapper = (callback) => {
 // src/components/table/TableSortButton.tsx
 var import_lucide_react20 = require("lucide-react");
 var import_clsx46 = __toESM(require("clsx"));
+
+// src/components/user-action/Tooltip.tsx
+var import_react38 = require("react");
+var import_clsx45 = require("clsx");
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime57 = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  appearDelay = 400,
+  disappearDelay = 50,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  disabled = false
+}) => {
+  const [state, setState] = (0, import_react38.useState)({
+    isShown: false,
+    timer: null
+  });
+  const { isShown } = state;
+  const anchorRef = (0, import_react38.useRef)(null);
+  const containerRef = (0, import_react38.useRef)(null);
+  const triangleRef = (0, import_react38.useRef)(null);
+  const triangleSize = 0.375;
+  const triangleClasses = {
+    top: `border-t-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `border-r-tooltip-background border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}rem ${triangleSize}rem 0 ${triangleSize}rem`, transform: `translate(0,${triangleSize}rem)` },
+    bottom: { borderWidth: `0 ${triangleSize}rem ${triangleSize}rem ${triangleSize}rem`, transform: `translate(0,-${triangleSize}rem)` },
+    left: { borderWidth: `${triangleSize}rem 0 ${triangleSize}rem ${triangleSize}rem`, transform: `translate(${triangleSize}rem,0)` },
+    right: { borderWidth: `${triangleSize}rem ${triangleSize}rem ${triangleSize}rem 0`, transform: `translate(-${triangleSize}rem,0)` }
+  };
+  const isActive = !disabled && isShown;
+  const css = useFloatingElement({
+    active: isActive,
+    anchorRef,
+    containerRef,
+    horizontalAlignment: position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    verticalAlignment: position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center"
+  });
+  const cssTriangle = useFloatingElement({
+    active: isActive,
+    anchorRef,
+    containerRef: triangleRef,
+    horizontalAlignment: position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    verticalAlignment: position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center"
+  });
+  const zIndex = useZIndexRegister(isActive);
+  const zIndexTriangle = useZIndexRegister(isActive);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    "div",
+    {
+      ref: anchorRef,
+      className: (0, import_clsx45.clsx)("relative inline-block", containerClassName),
+      onMouseEnter: () => setState((prevState) => {
+        clearTimeout(prevState.timer);
+        return {
+          ...prevState,
+          timer: setTimeout(() => {
+            setState((prevState2) => {
+              clearTimeout(prevState2.timer);
+              return { isShown: true, timer: null };
+            });
+          }, appearDelay)
+        };
+      }),
+      onMouseLeave: () => setState((prevState) => {
+        clearTimeout(prevState.timer);
+        return {
+          ...prevState,
+          timer: setTimeout(() => {
+            setState((prevState2) => {
+              clearTimeout(prevState2.timer);
+              return { isShown: false, timer: null };
+            });
+          }, disappearDelay)
+        };
+      }),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Visibility, { isVisible: isActive, children: [
+          (0, import_react_dom4.createPortal)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                ref: containerRef,
+                className: (0, import_clsx45.clsx)(
+                  `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded
+           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
+                  tooltipClassName
+                ),
+                style: { ...css, zIndex, animationDelay: appearDelay + "ms" },
+                children: tooltip
+              }
+            ),
+            document.body
+          ),
+          (0, import_react_dom4.createPortal)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                ref: triangleRef,
+                className: (0, import_clsx45.clsx)(`absolute w-0 h-0 opacity-0 animate-tooltip-fade-in`, triangleClasses[position]),
+                style: {
+                  ...cssTriangle,
+                  ...triangleStyle[position],
+                  zIndex: zIndexTriangle,
+                  animationDelay: appearDelay + "ms"
+                }
+              }
+            ),
+            document.body
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/table/TableSortButton.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
   color = "neutral",
   size = "tiny",
   className,
-  ...buttonProps
+  sortingIndexDisplay,
+  ...props
 }) => {
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronsUpDown, { className: "w-full h-full" });
+  const translation = useHightideTranslation();
+  const { sortingsCount, index } = sortingIndexDisplay;
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.ChevronDown, { className: "size-4" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     Button,
     {
-      layout: "icon",
+      layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: (0, import_clsx46.default)(className),
-      ...buttonProps,
-      children: icon
+      className: (0, import_clsx46.default)("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "div",
+          {
+            className: (0, import_clsx46.default)("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
+            children: `${index}.`
+          }
+        ) }),
+        icon
+      ]
     }
-  );
+  ) });
 };
 
 // src/components/table/TableFilterButton.tsx
 var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_clsx47 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
@@ -12674,7 +12860,7 @@ var BagFunctionUtil = {
 };
 
 // src/components/user-action/Menu.tsx
-var import_react_dom4 = require("react-dom");
+var import_react_dom5 = require("react-dom");
 
 // src/hooks/usePopoverPosition.ts
 var defaultPopoverPositionOptions = {
@@ -12731,15 +12917,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react38.useState)(false);
-  const [timer, setTimer] = (0, import_react38.useState)();
+  const [isHovered, setIsHovered] = (0, import_react39.useState)(false);
+  const [timer, setTimer] = (0, import_react39.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12755,14 +12941,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -12775,9 +12961,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -12795,14 +12981,14 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
   "div",
   {
     className: (0, import_clsx47.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
@@ -12835,10 +13021,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react40.useRef)(null);
-  const menuRef = (0, import_react40.useRef)(null);
+  const triggerRef = (0, import_react41.useRef)(null);
+  const menuRef = (0, import_react41.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react40.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react41.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12849,7 +13035,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -12866,15 +13052,15 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
   }, [isOpen]);
   const zIndex = useZIndexRegister(isOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
     trigger(bag, triggerRef),
-    (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         ref: menuRef,
@@ -12904,34 +13090,34 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-var import_react41 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react41.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react42.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "tiny",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.FilterIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react21.FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12939,9 +13125,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -12951,8 +13137,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -12965,8 +13151,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -12980,8 +13166,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12994,7 +13180,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -13008,12 +13194,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -13024,7 +13210,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -13038,22 +13224,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react42.useRef)(null);
-  const tableRef = (0, import_react42.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react42.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react43.useRef)(null);
+  const tableRef = (0, import_react43.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react43.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react42.useState)();
-  const [pagination, setPagination] = (0, import_react42.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react43.useState)();
+  const [pagination, setPagination] = (0, import_react43.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react42.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react42.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react43.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react43.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13062,7 +13248,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react42.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react43.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13070,12 +13256,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react42.useMemo)(() => {
+  const tableMinWidth = (0, import_react43.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react42.useMemo)(() => {
+  const updateColumnSizes = (0, import_react43.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -13144,7 +13330,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13192,18 +13378,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react42.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react43.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -13219,7 +13405,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react42.useMemo)(() => {
+  const columnSizeVars = (0, import_react43.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -13229,8 +13415,8 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx48.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx48.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "table",
       {
         ref: tableRef,
@@ -13240,7 +13426,7 @@ var Table = ({
           width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
         },
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "col",
             {
               style: {
@@ -13251,18 +13437,22 @@ var Table = ({
             },
             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)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
               "th",
               {
                 colSpan: header.colSpan,
                 className: (0, import_clsx48.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)(
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
+                        sortingIndexDisplay: {
+                          index: header.column.getIsSorted() ? header.column.getSortIndex() + 1 : -1,
+                          sortingsCount: table.getState().sorting.length
+                        },
                         onClick: () => {
                           const sorted = header.column.getIsSorted();
                           const isMulti = header.column.getCanMultiSort();
@@ -13281,7 +13471,7 @@ var Table = ({
                         }
                       }
                     ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13293,7 +13483,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                     "div",
                     {
                       onMouseDown: header.getResizeHandler(),
@@ -13312,15 +13502,15 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime61.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)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { children: (0, import_react_table.flexRender)(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13330,15 +13520,15 @@ var Table = ({
               );
             }),
             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);
+              return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FillerRowElement, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13350,7 +13540,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Table,
     {
       ...props,
@@ -13369,12 +13559,12 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react42.useMemo)(() => {
+  const columnsWithSelection = (0, import_react43.useMemo)(() => {
     return [
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Checkbox,
             {
               checked: table.getIsAllRowsSelected(),
@@ -13387,7 +13577,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13405,15 +13595,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -13438,7 +13628,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_clsx49 = require("clsx");
 
 // src/utils/writeToClipboard.ts
@@ -13448,7 +13638,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13458,8 +13648,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react43.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react43.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react44.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react44.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]`,
@@ -13479,7 +13669,7 @@ 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_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
       className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
@@ -13497,7 +13687,7 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
           "div",
           {
             className: (0, import_clsx49.clsx)(
@@ -13512,15 +13702,15 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              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" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              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 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react22.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 "div",
                 {
                   className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13537,29 +13727,26 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-action/DateAndTimePicker.tsx
 var import_clsx50 = __toESM(require("clsx"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   mode = "dateTime",
-  onFinish,
   onChange,
-  onRemove,
   timePickerProps,
   datePickerProps
 }) => {
-  const translation = useHightideTranslation();
   const useDate = mode === "dateTime" || mode === "date";
   const useTime = mode === "dateTime" || mode === "time";
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       DatePicker,
       {
         ...datePickerProps,
-        className: "min-w-80 min-h-71 max-h-71",
+        className: "min-w-80",
         yearMonthPickerProps: { className: "h-full grow" },
         value,
         start,
@@ -13569,39 +13756,26 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx50.default)("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx50.default)({ "justify-between": mode === "time" }),
         time: value,
         onChange
       }
     );
   }
-  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_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)(Button, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        Button,
-        {
-          size: "medium",
-          onClick: () => onFinish?.(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+    dateDisplay,
+    timeDisplay
   ] });
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_clsx51 = __toESM(require("clsx"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13620,7 +13794,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react44.useState)({
+  }, setAnimation] = (0, import_react45.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13636,7 +13810,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react44.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react45.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -13646,7 +13820,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react44.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react45.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -13719,7 +13893,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -13740,7 +13914,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13751,15 +13925,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.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/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13767,7 +13941,7 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               "div",
               {
                 className: (0, import_clsx51.default)(
@@ -13796,126 +13970,163 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/SearchBar.tsx
+// src/components/user-action/input/DateTimeInput.tsx
+var import_react46 = require("react");
 var import_lucide_react23 = require("lucide-react");
-var import_clsx52 = require("clsx");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var SearchBar = ({
-  placeholder,
-  onSearch,
-  disableOnSearch,
-  containerClassName,
-  ...inputProps
+var import_clsx52 = __toESM(require("clsx"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var DateTimeInput = ({
+  date,
+  onValueChange,
+  onEditCompleted,
+  onRemove,
+  containerProps,
+  mode = "date",
+  pickerProps,
+  ...props
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: (0, import_clsx52.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Input,
-      {
-        ...inputProps,
-        placeholder: placeholder ?? translation("search")
-      }
-    ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Button,
+  const { locale } = useLocale();
+  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
+  const containerRef = (0, import_react46.useRef)(null);
+  useOutsideClick([containerRef], () => {
+    setIsOpen(false);
+  });
+  const zIndex = useZIndexRegister(isOpen);
+  const isReadOnly = (0, import_react46.useMemo)(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
+  (0, import_react46.useEffect)(() => {
+    if (isReadOnly) {
+      setIsOpen(false);
+    }
+  }, [isReadOnly]);
+  const cleanInputProps = { ...props };
+  delete cleanInputProps["isShowingError"];
+  delete cleanInputProps["setIsShowingError"];
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...containerProps, className: (0, import_clsx52.default)("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        Input,
+        {
+          ...cleanInputProps,
+          placeholder: translation("clickToAdd"),
+          value: date ? DateUtils.formatAbsolute(date, locale, mode === "dateTime") : "",
+          onClick: (event) => {
+            setIsOpen(true);
+            cleanInputProps.onClick?.(event);
+          },
+          readOnly: true,
+          className: (0, import_clsx52.default)(
+            "pr-10 w-full",
+            { "hover:cursor-pointer": !isReadOnly },
+            cleanInputProps.className
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        Button,
+        {
+          coloringStyle: "text",
+          layout: "icon",
+          color: "neutral",
+          size: "small",
+          className: "absolute right-1 top-1/2 -translate-y-1/2",
+          disabled: isReadOnly,
+          onClick: () => setIsOpen((prevState) => !prevState),
+          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react23.CalendarIcon, { className: "size-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "div",
       {
-        layout: "icon",
-        color: "neutral",
-        disabled: disableOnSearch,
-        onClick: onSearch,
-        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react23.Search, { className: "w-full h-full" })
+        ref: containerRef,
+        className: "absolute left-0 flex-col-3 rounded-lg shadow-xl border bg-surface-variant text-on-surface border-divider p-2",
+        style: { zIndex },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            DateTimePicker,
+            {
+              ...pickerProps,
+              mode,
+              value: date,
+              onChange: (newDate) => {
+                onValueChange(newDate);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: !!onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              Button,
+              {
+                size: "medium",
+                color: "negative",
+                onClick: () => {
+                  onRemove?.();
+                  setIsOpen(false);
+                },
+                children: translation("clear")
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              Button,
+              {
+                size: "medium",
+                onClick: () => {
+                  onEditCompleted?.(date);
+                  setIsOpen(false);
+                },
+                children: translation("change")
+              }
+            )
+          ] })
+        ]
       }
-    )
+    ) })
   ] });
 };
-
-// src/components/user-action/Tooltip.tsx
-var import_clsx53 = require("clsx");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var Tooltip = ({
-  tooltip,
-  children,
-  animationDelay = 650,
-  tooltipClassName = "",
-  containerClassName = "",
-  position = "bottom"
+var DateTimeInputUncontrolled = ({
+  date: initialDate,
+  ...props
 }) => {
-  const { isHovered, handlers } = useHoverState();
-  const positionClasses = {
-    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
-    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
-    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
-    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
-  };
-  const triangleSize = 6;
-  const triangleClasses = {
-    top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
-    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
-    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
-    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
-  };
-  const triangleStyle = {
-    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
-    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
-    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
-    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
-  };
-  const zIndex = useZIndexRegister(isHovered);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-    "div",
+  const [date, setDate] = useOverwritableState((0, import_react46.useMemo)(() => initialDate ?? /* @__PURE__ */ new Date(), [initialDate]));
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    DateTimeInput,
     {
-      className: (0, import_clsx53.clsx)("relative inline-block", containerClassName),
-      ...handlers,
-      children: [
-        children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx53.clsx)(
-              `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
-           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
-              positionClasses[position],
-              tooltipClassName
-            ),
-            style: { zIndex, animationDelay: animationDelay + "ms" },
-            children: [
-              tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                "div",
-                {
-                  className: (0, import_clsx53.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
-                }
-              )
-            ]
-          }
-        )
-      ]
+      ...props,
+      date,
+      onValueChange: (newDate) => {
+        setDate(newDate);
+        props.onValueChange?.(newDate);
+      },
+      onRemove: () => {
+        setDate(/* @__PURE__ */ new Date());
+        props.onRemove?.();
+      }
     }
   );
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-var import_react45 = require("react");
-var import_react46 = require("react");
-var import_clsx54 = __toESM(require("clsx"));
+var import_react47 = require("react");
+var import_react48 = require("react");
+var import_clsx53 = __toESM(require("clsx"));
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2({
+var InsideLabelInput = (0, import_react48.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = (0, import_react46.useState)(false);
-  const generatedId = (0, import_react45.useId)();
+  const [isFocused, setIsFocused] = (0, import_react48.useState)(false);
+  const generatedId = (0, import_react47.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx54.default)("relative"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx53.default)("relative"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx54.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx53.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -13934,7 +14145,7 @@ var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx54.default)(
+        className: (0, import_clsx53.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -13960,27 +14171,63 @@ var InsideLabelInputUncontrolled = ({
   );
 };
 
-// src/components/user-action/input/ToggleableInput.tsx
-var import_react47 = require("react");
+// src/components/user-action/input/SearchBar.tsx
 var import_lucide_react24 = require("lucide-react");
-var import_clsx55 = __toESM(require("clsx"));
+var import_clsx54 = require("clsx");
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
+var SearchBar = ({
+  onSearch,
+  searchButtonProps,
+  containerProps,
+  ...inputProps
+}) => {
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ...containerProps, className: (0, import_clsx54.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      InputUncontrolled,
+      {
+        ...inputProps,
+        placeholder: inputProps.placeholder ?? translation("search"),
+        className: (0, import_clsx54.clsx)("pr-10 w-full", inputProps.className)
+      }
+    ),
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      Button,
+      {
+        ...searchButtonProps,
+        size: "small",
+        layout: "icon",
+        color: "neutral",
+        coloringStyle: "text",
+        onClick: (event) => onSearch(event),
+        className: (0, import_clsx54.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Search, { className: "w-full h-full" })
+      }
+    )
+  ] });
+};
+
+// src/components/user-action/input/ToggleableInput.tsx
+var import_react49 = require("react");
+var import_lucide_react25 = require("lucide-react");
+var import_clsx55 = __toESM(require("clsx"));
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react49.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = (0, import_react47.useState)(initialState !== "display");
-  const innerRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react47.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react49.useState)(initialState !== "display");
+  const innerRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react49.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Input,
       {
         ...props,
@@ -13999,16 +14246,16 @@ var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: (0, import_clsx55.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
-          "underline": isEditing,
+        "data-name": props["data-name"] ?? "togglable-input",
+        "data-isEditing": isEditing ? "" : void 0,
+        className: (0, import_clsx55.default)(`w-full rounded-md`, {
           "text-transparent": !isEditing
-        }),
-        defaultStyle: false
+        })
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react25.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -14018,7 +14265,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     ToggleableInput,
     {
       value,
@@ -14029,33 +14276,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-var import_react48 = require("react");
-var import_react49 = require("react");
 var import_react50 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var FocusTrap = (0, import_react50.forwardRef)(function FocusTrap2({
+var import_react51 = require("react");
+var import_react52 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var FocusTrap = (0, import_react52.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = (0, import_react48.useRef)(null);
-  (0, import_react49.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react50.useRef)(null);
+  (0, import_react51.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-var import_react51 = require("react");
+var import_react53 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react51.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react51.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react53.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react53.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -14080,7 +14327,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react52 = require("react");
+var import_react54 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -14118,7 +14365,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -14127,10 +14374,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react53.default.useState(false);
-  (0, import_react53.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react55.default.useState(false);
+  (0, import_react55.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -14150,13 +14397,13 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react54 = require("react");
+var import_react56 = require("react");
 var useRerender = () => {
-  return (0, import_react54.useReducer)(() => ({}), {})[1];
+  return (0, import_react56.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react55 = require("react");
+var import_react57 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -14195,34 +14442,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react55.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react55.useState)(list);
-  const searchTags = (0, import_react55.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react55.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react57.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react57.useState)(list);
+  const searchTags = (0, import_react57.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react57.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react55.useMemo)(() => {
+  const filteredResult = (0, import_react57.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react55.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react57.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react55.useMemo)(() => {
+  const usedResult = (0, import_react57.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -14332,6 +14579,106 @@ var builder = (value, update) => {
   return value;
 };
 
+// src/utils/duration.ts
+var Duration = class _Duration {
+  constructor({
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = {}) {
+    this.assertRanges({ years, months, days, hours, minutes, seconds, milliseconds });
+    this.years = years;
+    this.months = months;
+    this.days = days;
+    this.hours = hours;
+    this.minutes = minutes;
+    this.seconds = seconds;
+    this.milliseconds = milliseconds;
+  }
+  /** Date arithmetic */
+  addTo(date) {
+    return this.applyTo(date, 1);
+  }
+  subtractFrom(date) {
+    return this.applyTo(date, -1);
+  }
+  /** Duration arithmetic */
+  add(other) {
+    return new _Duration({
+      years: this.years + other.years,
+      months: this.months + other.months,
+      days: this.days + other.days,
+      hours: this.hours + other.hours,
+      minutes: this.minutes + other.minutes,
+      seconds: this.seconds + other.seconds,
+      milliseconds: this.milliseconds + other.milliseconds
+    });
+  }
+  subtract(other) {
+    return new _Duration({
+      years: this.years - other.years,
+      months: this.months - other.months,
+      days: this.days - other.days,
+      hours: this.hours - other.hours,
+      minutes: this.minutes - other.minutes,
+      seconds: this.seconds - other.seconds,
+      milliseconds: this.milliseconds - other.milliseconds
+    });
+  }
+  equals(other) {
+    return this.years === other.years && this.months === other.months && this.days === other.days && this.hours === other.hours && this.minutes === other.minutes && this.seconds === other.seconds && this.milliseconds === other.milliseconds;
+  }
+  toJSON() {
+    return { ...this };
+  }
+  /** Static difference */
+  static difference(start, end) {
+    const diff = end.getTime() - start.getTime();
+    const ms = 1e3;
+    const min = 60 * ms;
+    const hr = 60 * min;
+    const day = 24 * hr;
+    const month = 30 * day;
+    const year = 365.25 * day;
+    return new _Duration({
+      years: Math.floor(diff / year),
+      months: Math.floor(diff / month),
+      days: Math.floor(diff / day),
+      hours: Math.floor(diff % day / hr),
+      minutes: Math.floor(diff % hr / min),
+      seconds: Math.floor(diff % min / ms),
+      milliseconds: diff % ms
+    });
+  }
+  applyTo(date, multiplier) {
+    const d = new Date(date);
+    d.setFullYear(d.getFullYear() + multiplier * this.years);
+    d.setMonth(d.getMonth() + multiplier * this.months);
+    d.setDate(d.getDate() + multiplier * this.days);
+    d.setHours(d.getHours() + multiplier * this.hours);
+    d.setMinutes(d.getMinutes() + multiplier * this.minutes);
+    d.setSeconds(d.getSeconds() + multiplier * this.seconds);
+    d.setMilliseconds(d.getMilliseconds() + multiplier * this.milliseconds);
+    return d;
+  }
+  assertRanges(d) {
+    if (d.years < 0) throw new RangeError("years >= 0");
+    if (d.months < 0 || d.months > 11) throw new RangeError("months: 0\u201311");
+    if (d.days < 0) throw new RangeError("days >= 0");
+    if (d.hours < 0 || d.hours > 23) throw new RangeError("hours: 0\u201323");
+    if (d.minutes < 0 || d.minutes > 59) throw new RangeError("minutes: 0\u201359");
+    if (d.seconds < 0 || d.seconds > 59) throw new RangeError("seconds: 0\u201359");
+    if (d.milliseconds < 0) throw new RangeError("milliseconds >= 0");
+  }
+  valueOf() {
+    return this.milliseconds + this.seconds * 1e3 + this.minutes * 6e4 + this.hours * 36e5 + this.days * 864e5;
+  }
+};
+
 // src/utils/easeFunctions.ts
 var EaseFunctions = class _EaseFunctions {
   static cubicBezierGeneric(x1, y1, x2, y2) {
@@ -14470,12 +14817,16 @@ var PromiseUtils = {
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
+  DateTimeInput,
+  DateTimeInputUncontrolled,
   DateTimePicker,
+  DateUtils,
   DayPicker,
   DayPickerUncontrolled,
   Dialog,
   DiscardChangesDialog,
   DividerInserter,
+  Duration,
   EaseFunctions,
   ErrorComponent,
   Expandable,
@@ -14573,6 +14924,7 @@ var PromiseUtils = {
   Transition,
   UseValidators,
   VerticalDivider,
+  Visibility,
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
@@ -14582,19 +14934,16 @@ var PromiseUtils = {
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
-  equalDate,
   equalSizeGroups,
   formatDate,
   formatDateTime,
   getBetweenDuration,
-  getDaysInMonth,
   getNeighbours,
   getWeeksForCalenderMonth,
   hightideTranslation,
   hightideTranslationLocales,
   isInTimeSpan,
   match,
-  monthsList,
   noop,
   range,
   resolveSetState,
@@ -14624,7 +14973,6 @@ var PromiseUtils = {
   useTranslatedValidators,
   useZIndexRegister,
   validateEmail,
-  weekDayList,
   writeToClipboard
 });
 //# sourceMappingURL=index.js.map