@helpwave/hightide 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -6489,10 +6489,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,
@@ -6602,6 +6598,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
 import clsx7 from "clsx";
@@ -6784,6 +6825,16 @@ var hightideTranslation = {
     "remove": `Entfernen`,
     "required": `Erforderlich`,
     "reset": `Zur\xFCcksetzen`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Angewendet `;
+      _out += 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`,
@@ -7020,6 +7071,16 @@ var hightideTranslation = {
     "remove": `Remove`,
     "required": `Required`,
     "reset": `Reset`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Applied `;
+      _out += 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`,
@@ -7306,7 +7367,7 @@ var ButtonUtil = {
     warning: "warning",
     negative: "negative",
     neutral: "neutral",
-    none: ""
+    none: "reset-coloring-variables"
   }
 };
 var Button = forwardRef(function SolidButton({
@@ -7318,6 +7379,7 @@ var Button = forwardRef(function SolidButton({
   startIcon,
   endIcon,
   disabled,
+  allowClickEventPropagation = false,
   className,
   ...restProps
 }, ref) {
@@ -7340,6 +7402,12 @@ var Button = forwardRef(function SolidButton({
         paddingMapping[layout][size],
         className
       ),
+      onClick: (event) => {
+        if (!allowClickEventPropagation) {
+          event.stopPropagation();
+        }
+        restProps?.onClick(event);
+      },
       disabled,
       children: [
         startIcon,
@@ -7368,8 +7436,8 @@ var DayPicker = ({
   return /* @__PURE__ */ jsxs4("div", { className: clsx4("flex-col-1 min-w-[220px] select-none", className), children: [
     /* @__PURE__ */ jsx4("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx4("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
     weeks.map((week, index) => /* @__PURE__ */ jsx4("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__ */ jsx4(
@@ -7569,8 +7637,9 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ jsx6("span", { className: clsx6({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx6("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__ */ jsx6("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);
@@ -7869,7 +7938,7 @@ var TimePicker = ({
     transformer(newDate);
     onChange?.(newDate);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: clsx8("flex-row-2 w-fit min-w-[150px] select-none overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: clsx8("flex-row-2 select-none overflow-hidden", className), children: [
     /* @__PURE__ */ jsx9("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__ */ jsx9(
@@ -8448,7 +8517,6 @@ var DiscardChangesDialog = ({
 
 // src/components/user-action/input/Input.tsx
 import { forwardRef as forwardRef3, useImperativeHandle, useRef as useRef5 } from "react";
-import clsx11 from "clsx";
 
 // src/hooks/useDelay.ts
 import { useEffect as useEffect12, useState as useState11 } from "react";
@@ -8563,8 +8631,6 @@ var Input = forwardRef3(function Input2({
   editCompleteOptions,
   disabled = false,
   invalid = false,
-  defaultStyle = true,
-  className,
   ...props
 }, forwardedRef) {
   const {
@@ -8587,15 +8653,6 @@ var Input = forwardRef3(function Input2({
       ref: innerRef,
       value,
       disabled,
-      className: defaultStyle ? clsx11(
-        "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) {
@@ -8624,6 +8681,10 @@ var Input = forwardRef3(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
     }
@@ -8675,7 +8736,7 @@ import {
   useRef as useRef6,
   useState as useState13
 } from "react";
-import clsx13 from "clsx";
+import clsx12 from "clsx";
 
 // src/utils/match.ts
 var match = (key, values) => {
@@ -8686,7 +8747,7 @@ var match = (key, values) => {
 import { CheckIcon, Plus, XIcon } from "lucide-react";
 
 // src/components/layout/Chip.tsx
-import clsx12 from "clsx";
+import clsx11 from "clsx";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var chipColors = ButtonUtil.colors;
 var ChipUtil = {
@@ -8706,7 +8767,7 @@ var Chip = ({
     "div",
     {
       ...restProps,
-      className: clsx12(
+      className: clsx11(
         `flex-row-0 w-fit font-semibold coloring-solid`,
         colorMapping,
         {
@@ -8731,7 +8792,7 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx15("div", { className: clsx12("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx15("div", { className: clsx11("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx15(
     Chip,
     {
       ...value,
@@ -9091,7 +9152,7 @@ var SelectOption = forwardRef4(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx13(
+        className: clsx12(
           "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",
@@ -9117,7 +9178,7 @@ var SelectOption = forwardRef4(
           iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx16(
             CheckIcon,
             {
-              className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: clsx12("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
@@ -9125,7 +9186,7 @@ var SelectOption = forwardRef4(
           iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx16(
             CheckIcon,
             {
-              className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: clsx12("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -9173,19 +9234,8 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
             break;
         }
       },
-      className: clsx13(
-        "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,
@@ -9194,21 +9244,11 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx16("div", { className: clsx13("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs11("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx16("div", { className: clsx12("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs11("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ jsx16("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ jsx16(
-          ExpansionIcon,
-          {
-            isExpanded: state.isOpen,
-            className: clsx13({
-              "text-input-text": !disabled && !invalid,
-              "text-negative": !disabled && invalid,
-              "text-disabled": disabled
-            })
-          }
-        )
+        /* @__PURE__ */ jsx16(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
@@ -9229,10 +9269,12 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
     {
       ...props,
       ref: innerRef,
-      className: clsx13(
-        "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,
@@ -9246,11 +9288,11 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
               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__ */ jsx16(XIcon, { className: "w-5 h-5" })
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ jsx16(XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
@@ -9258,7 +9300,10 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
           Button,
           {
             id: state.id,
-            onClick: () => toggleOpen(),
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
@@ -9276,6 +9321,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
             "aria-haspopup": "listbox",
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+            className: "size-9",
             children: /* @__PURE__ */ jsx16(Plus, {})
           }
         )
@@ -9309,7 +9355,7 @@ var SelectContent = forwardRef4(
         "div",
         {
           id: `select-container-${state.id}`,
-          className: clsx13("fixed inset-0 w-screen h-screen", containerClassName),
+          className: clsx12("fixed inset-0 w-screen h-screen", containerClassName),
           style: { zIndex },
           hidden: !state.isOpen,
           children: [
@@ -9318,7 +9364,7 @@ var SelectContent = forwardRef4(
               {
                 id: `select-background-${state.id}`,
                 onClick: () => trigger.toggleOpen(false),
-                className: clsx13("fixed inset-0 w-screen h-screen")
+                className: clsx12("fixed inset-0 w-screen h-screen")
               }
             ),
             /* @__PURE__ */ jsx16(
@@ -9367,7 +9413,7 @@ var SelectContent = forwardRef4(
                       break;
                   }
                 },
-                className: clsx13("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                className: clsx12("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",
@@ -9517,7 +9563,7 @@ var LanguageDialog = ({
 
 // src/components/dialog/ThemeDialog.tsx
 import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
-import clsx14 from "clsx";
+import clsx13 from "clsx";
 
 // src/theming/useTheme.tsx
 import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect15, useMemo as useMemo4, useState as useState14 } from "react";
@@ -9607,11 +9653,11 @@ var useTheme = () => {
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx19(MoonIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(MoonIcon, { className: clsx13("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ jsx19(SunIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(SunIcon, { className: clsx13("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ jsx19(MonitorCog, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(MonitorCog, { className: clsx13("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -9657,10 +9703,10 @@ var ThemeDialog = ({
 
 // src/components/form/FormElementWrapper.tsx
 import { useId as useId5 } from "react";
-import { clsx as clsx16 } from "clsx";
+import { clsx as clsx15 } from "clsx";
 
 // src/components/user-action/Label.tsx
-import clsx15 from "clsx";
+import clsx14 from "clsx";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var styleMapping = {
   md: "typography-label-md color-label-text",
@@ -9672,7 +9718,7 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx20("label", { ...props, className: clsx15(styleMapping[size], className), children });
+  return /* @__PURE__ */ jsx20("label", { ...props, className: clsx14(styleMapping[size], className), children });
 };
 
 // src/components/form/FormElementWrapper.tsx
@@ -9723,7 +9769,7 @@ var FormElementWrapper = ({
     "aria-invalid": !!error,
     "aria-errormessage": error ? errorId : void 0
   };
-  return /* @__PURE__ */ jsxs14("div", { className: clsx16("relative flex flex-col gap-y-1", containerClassName), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: clsx15("relative flex flex-col gap-y-1", containerClassName), children: [
     label && /* @__PURE__ */ jsxs14(
       Label,
       {
@@ -9731,7 +9777,7 @@ var FormElementWrapper = ({
         id: labelId,
         htmlFor: usedId,
         size: "lg",
-        className: clsx16("flex-row-1 items-start", labelProps?.className),
+        className: clsx15("flex-row-1 items-start", labelProps?.className),
         children: [
           label,
           required && /* @__PURE__ */ jsx21("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
@@ -9743,7 +9789,7 @@ var FormElementWrapper = ({
       {
         ...descriptionProps,
         id: descriptionId,
-        className: clsx16("text-description text-sm", descriptionProps?.className),
+        className: clsx15("text-description text-sm", descriptionProps?.className),
         children: description
       }
     ),
@@ -9753,7 +9799,7 @@ var FormElementWrapper = ({
       {
         ...errorProps,
         id: errorId,
-        className: clsx16("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
+        className: clsx15("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
         role: "alert",
         "aria-hidden": !error,
         "aria-live": "polite",
@@ -9764,7 +9810,7 @@ var FormElementWrapper = ({
 };
 
 // src/components/icons-and-geometry/Avatar.tsx
-import clsx17 from "clsx";
+import clsx16 from "clsx";
 import { useMemo as useMemo5, useState as useState15 } from "react";
 import { UserIcon } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -9814,7 +9860,7 @@ var Avatar = ({
   return /* @__PURE__ */ jsxs15(
     "div",
     {
-      className: clsx17(
+      className: clsx16(
         `relative flex-row-0 items-center justify-center bg-primary text-on-primary`,
         rounding,
         className
@@ -9826,7 +9872,7 @@ var Avatar = ({
           {
             src: image?.avatarUrl,
             alt: image?.alt,
-            className: clsx17(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
+            className: clsx16(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
             onLoad: () => setIsLoaded(true),
             onError: () => setHasError(true)
           }
@@ -9860,7 +9906,7 @@ var AvatarGroup = ({
             ...avatar,
             size,
             fullyRounded,
-            className: clsx17("shadow-side shadow-r-4 shadow-hard", avatar.className)
+            className: clsx16("shadow-side shadow-r-4 shadow-hard", avatar.className)
           }
         )
       },
@@ -9869,7 +9915,7 @@ var AvatarGroup = ({
     showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx22(
       "div",
       {
-        className: clsx17(textClassNameMapping[size], "flex-row-2 truncate items-center"),
+        className: clsx16(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ jsxs15("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -9880,7 +9926,7 @@ var AvatarGroup = ({
 };
 
 // src/components/icons-and-geometry/Circle.tsx
-import clsx18 from "clsx";
+import clsx17 from "clsx";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Circle = ({
   radius = 20,
@@ -9892,7 +9938,7 @@ var Circle = ({
   return /* @__PURE__ */ jsx23(
     "div",
     {
-      className: clsx18(`rounded-full`, className),
+      className: clsx17(`rounded-full`, className),
       style: {
         width: `${size}px`,
         height: `${size}px`,
@@ -9905,7 +9951,7 @@ var Circle = ({
 
 // src/components/icons-and-geometry/Ring.tsx
 import { useCallback as useCallback8, useEffect as useEffect16, useState as useState16 } from "react";
-import clsx19 from "clsx";
+import clsx18 from "clsx";
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var Ring = ({
   innerSize = 20,
@@ -9915,7 +9961,7 @@ var Ring = ({
   return /* @__PURE__ */ jsx24(
     "div",
     {
-      className: clsx19(`bg-transparent rounded-full outline`, className),
+      className: clsx18(`bg-transparent rounded-full outline`, className),
       style: {
         width: `${innerSize}px`,
         height: `${innerSize}px`,
@@ -10054,7 +10100,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle1 / 2,
-            className: clsx19(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            className: clsx18(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`
@@ -10068,7 +10114,7 @@ var RadialRings = ({
             width: (sizeCircle2 - sizeCircle1) / 2,
             onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
             repeating: true,
-            className: clsx19(
+            className: clsx18(
               circle2ClassName,
               { "opacity-5": currentRing !== 0 }
             ),
@@ -10088,7 +10134,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle2,
             width: waveWidth,
             repeating: true,
-            className: clsx19(waveBaseColor, `opacity-5`),
+            className: clsx18(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10102,7 +10148,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle2 / 2,
-            className: clsx19(
+            className: clsx18(
               circle2ClassName,
               { "opacity-20": currentRing < 1 },
               `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
@@ -10120,7 +10166,7 @@ var RadialRings = ({
             width: (sizeCircle3 - sizeCircle2) / 2,
             onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
             repeating: true,
-            className: clsx19(circle3ClassName),
+            className: clsx18(circle3ClassName),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10137,7 +10183,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle3 - waveWidth,
             width: waveWidth,
             repeating: true,
-            className: clsx19(waveBaseColor, `opacity-5`),
+            className: clsx18(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10151,7 +10197,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle3 / 2,
-            className: clsx19(
+            className: clsx18(
               circle3ClassName,
               { "opacity-20": currentRing < 2 },
               `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
@@ -10199,7 +10245,7 @@ import {
   useRef as useRef7,
   useState as useState17
 } from "react";
-import clsx20 from "clsx";
+import clsx19 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var CarouselContext = createContext4(null);
@@ -10242,10 +10288,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: clsx20(
+            className: clsx19(
               "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,
@@ -10279,7 +10327,7 @@ var CarouselSlide = forwardRef5(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: clsx20("focus-style-none group/slide", props.className),
+        className: clsx19("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -10428,7 +10476,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: clsx20("flex-col-2 items-center w-full", props.className),
+      className: clsx19("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -10437,7 +10485,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: clsx20(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: clsx19(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ jsxs17(
                 "div",
@@ -10446,7 +10494,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: clsx20(`flex-row-2 relative h-full`, heightClassName),
+                  className: clsx19(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ jsx26("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -10459,7 +10507,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: clsx20(
+                          className: clsx19(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -10476,13 +10524,13 @@ var Carousel = ({
                     /* @__PURE__ */ jsx26(
                       "div",
                       {
-                        className: clsx20(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: clsx19(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ jsx26(
                       "div",
                       {
-                        className: clsx20(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: clsx19(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -10491,7 +10539,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: clsx20("px-16 h-full"),
+                  className: clsx19("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -10508,7 +10556,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: clsx20("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: clsx19("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ jsx26(ChevronLeft, { size: 24 })
@@ -10519,7 +10567,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: clsx20("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: clsx19("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ jsx26(ChevronRight, { size: 24 })
@@ -10536,7 +10584,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-import clsx21 from "clsx";
+import clsx20 from "clsx";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var DividerInserter = ({
   children,
@@ -10554,11 +10602,11 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ jsx27("div", { className: clsx21(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ jsx27("div", { className: clsx20(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
-import clsx22 from "clsx";
+import clsx21 from "clsx";
 
 // src/components/layout/MarkdownInterpreter.tsx
 import { Fragment as Fragment2, jsx as jsx28 } from "react/jsx-runtime";
@@ -10804,7 +10852,7 @@ var FAQSection = ({
       label: /* @__PURE__ */ jsx29("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ jsx29(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
-      className: clsx22("rounded-xl", expandableClassName),
+      className: clsx21("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ jsx29("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx29(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
@@ -10814,7 +10862,7 @@ var FAQSection = ({
 // src/components/layout/FloatingContainer.tsx
 import { forwardRef as forwardRef6, useImperativeHandle as useImperativeHandle3, useRef as useRef8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { clsx as clsx23 } from "clsx";
+import { clsx as clsx22 } from "clsx";
 import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var FloatingContainer = forwardRef6(function FloatingContainer2({
   children,
@@ -10859,7 +10907,7 @@ var FloatingContainer = forwardRef6(function FloatingContainer2({
             ...position,
             ...props.style
           },
-          className: clsx23("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          className: clsx22("motion-safe:duration-100 motion-reduce:duration-0", props.className),
           children
         }
       )
@@ -10870,7 +10918,7 @@ var FloatingContainer = forwardRef6(function FloatingContainer2({
 
 // src/components/layout/ListBox.tsx
 import React4, { createContext as createContext5, forwardRef as forwardRef7, useCallback as useCallback10, useContext as useContext5, useEffect as useEffect18, useRef as useRef9, useState as useState18 } from "react";
-import { clsx as clsx24 } from "clsx";
+import { clsx as clsx23 } from "clsx";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var ListBoxContext = createContext5(null);
 function useListBoxContext() {
@@ -10913,7 +10961,7 @@ var ListBoxItem = forwardRef7(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx24(
+        className: clsx23(
           "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",
@@ -11134,7 +11182,7 @@ var ListBoxUncontrolled = ({
 // src/components/layout/TabView.tsx
 import { useId as useId7 } from "react";
 import { createContext as createContext6, useContext as useContext6, useState as useState19, useEffect as useEffect19, useRef as useRef10 } from "react";
-import clsx25 from "clsx";
+import clsx24 from "clsx";
 import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var TabContext = createContext6(null);
 function useTabContext() {
@@ -11179,8 +11227,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
     buttonRefs.current[nextId]?.focus();
   };
   const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ jsx32(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs19("div", { ...outerDivProps, className: clsx25("w-full", props.className), children: [
-    /* @__PURE__ */ jsx32("div", { role: "tablist", ...props, className: clsx25("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx32(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs19("div", { ...outerDivProps, className: clsx24("w-full", props.className), children: [
+    /* @__PURE__ */ jsx32("div", { role: "tablist", ...props, className: clsx24("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx32(
       "button",
       {
         role: "tab",
@@ -11188,10 +11236,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: clsx25(
+        className: clsx24(
           "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"
         ),
@@ -11225,7 +11275,7 @@ function Tab({ id: customId, label, children, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-import clsx26 from "clsx";
+import clsx25 from "clsx";
 import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextImage = ({
   title,
@@ -11251,7 +11301,7 @@ var TextImage = ({
   return /* @__PURE__ */ jsx33(
     "div",
     {
-      className: clsx26("rounded-2xl w-full", className),
+      className: clsx25("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -11259,9 +11309,9 @@ var TextImage = ({
       children: /* @__PURE__ */ jsxs20(
         "div",
         {
-          className: clsx26(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: clsx25(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ jsx33("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx33("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ jsx33("div", { className: clsx25(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx33("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ jsxs20("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ jsx33("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ jsx33("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -11327,16 +11377,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
 import { AlertOctagon } from "lucide-react";
-import clsx27 from "clsx";
+import clsx26 from "clsx";
 import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs22("div", { className: clsx27("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs22("div", { className: clsx26("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx35(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -11346,14 +11404,14 @@ var ErrorComponent = ({
 import { useState as useState20 } from "react";
 
 // src/components/loading-states/LoadingContainer.tsx
-import { clsx as clsx28 } from "clsx";
+import { clsx as clsx27 } from "clsx";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx36("div", { className: clsx28("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ jsx36("div", { className: clsx27("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { clsx as clsx29 } from "clsx";
+import { clsx as clsx28 } from "clsx";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
@@ -11374,34 +11432,34 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx29(className) });
+    return loadingComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx28(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx29("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx28("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-import clsx30 from "clsx";
+import clsx29 from "clsx";
 import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs23("div", { className: clsx30("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs23("div", { className: clsx29("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx38(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-import clsx31 from "clsx";
+import clsx30 from "clsx";
 import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   return /* @__PURE__ */ jsxs24("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx39("div", { className: clsx31("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ jsx39(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    isLoading && /* @__PURE__ */ jsx39("div", { className: clsx30("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ jsx39(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ jsx39(Button, { ...rest, size, disabled: rest.disabled, onClick })
   ] });
 };
@@ -11464,18 +11522,18 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-import clsx32 from "clsx";
+import clsx31 from "clsx";
 import { Fragment as Fragment4 } from "react";
 import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  return /* @__PURE__ */ jsx41("div", { className: clsx32("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ jsx41("div", { className: clsx31("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return /* @__PURE__ */ jsxs26(Fragment4, { children: [
       /* @__PURE__ */ jsx41(
         import_link.default,
         {
           href: crumb.link,
-          className: clsx32(
+          className: clsx31(
             "btn-sm coloring-text-hover",
             {
               description: !isLast,
@@ -11486,7 +11544,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ jsx41("span", { className: clsx32(`px-1`, "text-description"), children: "/" })
+      !isLast && /* @__PURE__ */ jsx41("span", { className: clsx31(`px-1`, "text-description"), children: "/" })
     ] }, index);
   }) });
 };
@@ -11496,7 +11554,7 @@ var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
 import { useEffect as useEffect20 } from "react";
 import { useCallback as useCallback11, useId as useId8, useRef as useRef11, useState as useState21 } from "react";
-import clsx33 from "clsx";
+import clsx32 from "clsx";
 import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -11508,7 +11566,7 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = useState21(false);
-  const containerRef = useRef11();
+  const containerRef = useRef11(null);
   const triggerRef = useRef11(null);
   const id = useId8();
   const style = useFloatingElement({
@@ -11559,7 +11617,7 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: clsx33(
+        className: clsx32(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
@@ -11578,7 +11636,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx42("ul", { ...restProps, className: clsx33("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx42("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx42(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx42(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx42("ul", { ...restProps, className: clsx32("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx42("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx42(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx42(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = useState21(false);
@@ -11593,7 +11651,7 @@ var Navigation = ({ ...props }) => {
       NavigationItemList,
       {
         ...props,
-        className: clsx33("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: clsx32("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ jsx42(
@@ -11623,7 +11681,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: clsx33(
+        className: clsx32(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -11642,7 +11700,7 @@ var Navigation = ({ ...props }) => {
               children: /* @__PURE__ */ jsx42(XIcon2, {})
             }
           ),
-          /* @__PURE__ */ jsx42(NavigationItemList, { ...props, className: clsx33("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx42(NavigationItemList, { ...props, className: clsx32("flex-col-8", props.className) })
         ]
       }
     )
@@ -11651,7 +11709,7 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-import clsx34 from "clsx";
+import clsx33 from "clsx";
 import { useEffect as useEffect21, useState as useState22 } from "react";
 import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var Pagination = ({
@@ -11676,7 +11734,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: clsx34("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ jsxs28("div", { className: clsx33("flex-row-1", className), style, children: [
     /* @__PURE__ */ jsx43(
       Button,
       {
@@ -11704,7 +11762,7 @@ var Pagination = ({
         Input,
         {
           value,
-          className: clsx34(
+          className: clsx33(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -11760,7 +11818,7 @@ var Pagination = ({
 
 // src/components/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
-import clsx35 from "clsx";
+import clsx34 from "clsx";
 import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
@@ -11786,7 +11844,7 @@ var StepperBar = ({
   return /* @__PURE__ */ jsxs29(
     "div",
     {
-      className: clsx35("flex-row-2 justify-between", className),
+      className: clsx34("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ jsx44("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs29(
           Button,
@@ -11808,7 +11866,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: clsx35(
+              className: clsx34(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -11869,24 +11927,25 @@ import { Check as Check3 } from "lucide-react";
 
 // src/components/user-action/Checkbox.tsx
 import { Check as Check2, Minus } from "lucide-react";
-import clsx36 from "clsx";
+import clsx35 from "clsx";
 import { jsx as jsx45, jsxs as jsxs30 } from "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
 }) => {
@@ -11910,25 +11969,21 @@ var Checkbox = ({
           props.onKeyDown?.(event);
         }
       },
-      className: clsx36(
+      className: clsx35(
         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__ */ jsx45("div", { className: clsx36("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ jsx45(Check2, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ jsx45(Minus, { className: innerIconSize })
+        !indeterminate && /* @__PURE__ */ jsx45(Check2, { className: innerIconSize, "aria-hidden": true }),
+        indeterminate && /* @__PURE__ */ jsx45(Minus, { className: innerIconSize, "aria-hidden": true })
       ]
     }
   );
@@ -11951,7 +12006,7 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
-import clsx37 from "clsx";
+import clsx36 from "clsx";
 import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
@@ -11965,14 +12020,14 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ jsxs31("div", { className: clsx37("flex-row-0 group", className), children: [
+  return /* @__PURE__ */ jsxs31("div", { className: clsx36("flex-row-0 group", className), children: [
     /* @__PURE__ */ jsxs31(
       "div",
       {
-        className: clsx37(
+        className: clsx36(
           "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
@@ -11986,10 +12041,10 @@ var PropertyBase = ({
     /* @__PURE__ */ jsxs31(
       "div",
       {
-        className: clsx37(
+        className: clsx36(
           "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
@@ -12003,7 +12058,7 @@ var PropertyBase = ({
               onClick: onRemove,
               color: "negative",
               coloringStyle: "text",
-              className: clsx37("items-center"),
+              className: clsx36("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -12051,7 +12106,7 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import clsx38 from "clsx";
+import clsx37 from "clsx";
 import { jsx as jsx48 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
@@ -12072,7 +12127,7 @@ var DateProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ jsx48(
         Input,
         {
-          className: clsx38("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: clsx37("default-style-none focus-style-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -12094,7 +12149,7 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import clsx39 from "clsx";
+import clsx38 from "clsx";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
@@ -12116,14 +12171,15 @@ var MultiSelectProperty = ({
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: clsx39(
+            className: clsx38(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: clsx39({
-              "!bg-warning !text-surface-warning": softRequired && !hasValue
-            })
+            className: clsx38(
+              "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
         }
@@ -12134,7 +12190,7 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import clsx40 from "clsx";
+import clsx39 from "clsx";
 import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
@@ -12159,12 +12215,12 @@ var NumberProperty = ({
         /* @__PURE__ */ jsxs33(
           "div",
           {
-            className: clsx40("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
+            className: clsx39("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
             children: [
               /* @__PURE__ */ jsx50(
                 Input,
                 {
-                  className: clsx40("!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: clsx39("default-style-none focus-style-none w-full pr-8", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                   value: value?.toString() ?? "",
                   type: "number",
                   readOnly,
@@ -12190,7 +12246,7 @@ var NumberProperty = ({
               suffix && /* @__PURE__ */ jsx50(
                 "span",
                 {
-                  className: clsx40(
+                  className: clsx39(
                     "absolute top-1/2 -translate-y-1/2 right-2",
                     { "bg-surface-warning": softRequired && !hasValue }
                   ),
@@ -12207,7 +12263,7 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import clsx41 from "clsx";
+import clsx40 from "clsx";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
@@ -12230,8 +12286,8 @@ var SingleSelectProperty = ({
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: clsx41(
-              "border-none w-full",
+            className: clsx40(
+              "default-style-none focus-style-none flex-row-2 w-full items-center",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
               }
@@ -12247,11 +12303,11 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import clsx43 from "clsx";
+import clsx42 from "clsx";
 
 // src/components/user-action/Textarea.tsx
 import { forwardRef as forwardRef8, useId as useId10 } from "react";
-import clsx42 from "clsx";
+import clsx41 from "clsx";
 import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
 var Textarea = forwardRef8(function Textarea2({
   id,
@@ -12260,10 +12316,8 @@ var Textarea = forwardRef8(function Textarea2({
   onBlur,
   onEditCompleted,
   saveDelayOptions,
-  defaultStyle = true,
   invalid = false,
   disabled = false,
-  className,
   ...props
 }, ref) {
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
@@ -12274,18 +12328,10 @@ var Textarea = forwardRef8(function Textarea2({
   return /* @__PURE__ */ jsx52(
     "textarea",
     {
+      ...props,
       ref,
       id,
-      className: clsx42(
-        "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(() => {
@@ -12298,8 +12344,10 @@ var Textarea = forwardRef8(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
     }
   );
 });
@@ -12332,7 +12380,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ jsxs34(
     "div",
     {
-      className: clsx42(
+      className: clsx41(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -12347,11 +12395,10 @@ var TextareaWithHeadline = ({
           {
             ...props,
             id: usedId,
-            className: clsx42(
+            className: clsx41(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
-            ),
-            defaultStyle: false
+            )
           }
         )
       ]
@@ -12381,11 +12428,11 @@ var TextProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ jsx53(
         Textarea,
         {
-          className: clsx43({
-            "bg-surface-warning placeholder-warning": softRequired && !hasValue
-          }),
+          className: clsx42(
+            "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")}...`,
@@ -12410,12 +12457,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-import { clsx as clsx44 } from "clsx";
+import { clsx as clsx43 } from "clsx";
 import { jsx as jsx54 } from "react/jsx-runtime";
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: clsx44("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ jsx54("div", { className: clsx43("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -12433,7 +12480,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback12, useEffect as useEffect27, useMemo as useMemo7, useRef as useRef13, useState as useState26 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect27, useMemo as useMemo7, useRef as useRef14, useState as useState27 } from "react";
 import clsx48 from "clsx";
 import {
   flexRender,
@@ -12445,13 +12492,13 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/table/TableCell.tsx
-import { clsx as clsx45 } from "clsx";
+import { clsx as clsx44 } from "clsx";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx55("span", { className: clsx45("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx55("span", { className: clsx44("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
@@ -12468,41 +12515,179 @@ var useResizeCallbackWrapper = (callback) => {
 // src/components/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp } from "lucide-react";
 import clsx46 from "clsx";
-import { jsx as jsx56 } from "react/jsx-runtime";
+
+// src/components/user-action/Tooltip.tsx
+import { useRef as useRef12, useState as useState23 } from "react";
+import { clsx as clsx45 } from "clsx";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+var Tooltip = ({
+  tooltip,
+  children,
+  appearDelay = 400,
+  disappearDelay = 50,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  disabled = false
+}) => {
+  const [state, setState] = useState23({
+    isShown: false,
+    timer: null
+  });
+  const { isShown } = state;
+  const anchorRef = useRef12(null);
+  const containerRef = useRef12(null);
+  const triangleRef = useRef12(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__ */ jsxs35(
+    "div",
+    {
+      ref: anchorRef,
+      className: clsx45("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__ */ jsxs35(Visibility, { isVisible: isActive, children: [
+          createPortal4(
+            /* @__PURE__ */ jsx56(
+              "div",
+              {
+                ref: containerRef,
+                className: clsx45(
+                  `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
+          ),
+          createPortal4(
+            /* @__PURE__ */ jsx56(
+              "div",
+              {
+                ref: triangleRef,
+                className: clsx45(`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
+import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
   color = "neutral",
   size = "tiny",
   className,
-  ...buttonProps
+  sortingIndexDisplay,
+  ...props
 }) => {
-  let icon = /* @__PURE__ */ jsx56(ChevronsUpDown, { className: "w-full h-full" });
+  const translation = useHightideTranslation();
+  const { sortingsCount, index } = sortingIndexDisplay;
+  let icon = /* @__PURE__ */ jsx57(ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx56(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx56(ChevronDown3, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx57(ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsx57(ChevronDown3, { className: "size-4" });
   }
-  return /* @__PURE__ */ jsx56(
+  const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
+  return /* @__PURE__ */ jsx57(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs36(
     Button,
     {
-      layout: "icon",
+      layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: clsx46(className),
-      ...buttonProps,
-      children: icon
+      className: clsx46("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx57(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx57(
+          "div",
+          {
+            className: clsx46("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
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useEffect as useEffect25, useRef as useRef12, useState as useState24 } from "react";
+import { useEffect as useEffect25, useRef as useRef13, useState as useState25 } from "react";
 import clsx47 from "clsx";
 
 // src/utils/bagFunctions.ts
@@ -12517,7 +12702,7 @@ var BagFunctionUtil = {
 };
 
 // src/components/user-action/Menu.tsx
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 
 // src/hooks/usePopoverPosition.ts
 var defaultPopoverPositionOptions = {
@@ -12574,15 +12759,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect23, useState as useState23 } from "react";
+import { useEffect as useEffect23, useState as useState24 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState23(false);
-  const [timer, setTimer] = useState23();
+  const [isHovered, setIsHovered] = useState24(false);
+  const [timer, setTimer] = useState24();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12638,14 +12823,14 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx57(
+}) => /* @__PURE__ */ jsx58(
   "div",
   {
     className: clsx47("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
@@ -12678,10 +12863,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef12(null);
-  const menuRef = useRef12(null);
+  const triggerRef = useRef13(null);
+  const menuRef = useRef13(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState24(true);
+  const [isHidden, setIsHidden] = useState25(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12715,9 +12900,9 @@ var Menu = ({
     }
   }, [isOpen]);
   const zIndex = useZIndexRegister(isOpen);
-  return /* @__PURE__ */ jsxs35(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
     trigger(bag, triggerRef),
-    createPortal4(/* @__PURE__ */ jsx57(
+    createPortal5(/* @__PURE__ */ jsx58(
       "div",
       {
         ref: menuRef,
@@ -12747,34 +12932,34 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect26, useState as useState25 } from "react";
-import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useState as useState26 } from "react";
+import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState25(columnFilterValue);
+  const [filterValue, setFilterValue] = useState26(columnFilterValue);
   const hasFilter = !!filterValue;
   useEffect26(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx58(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx59(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "tiny",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ jsx58(FilterIcon, {})
+            children: /* @__PURE__ */ jsx59(FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ jsx58(
+        hasFilter && /* @__PURE__ */ jsx59(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12782,9 +12967,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ jsxs36("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx58("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx58(
+      children: ({ close }) => /* @__PURE__ */ jsxs38("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx59("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx59(
           Input,
           {
             value: filterValue ?? "",
@@ -12794,8 +12979,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ jsx58(
+        filterType === "range" && /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -12808,8 +12993,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx58("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -12823,8 +13008,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs36(Fragment7, { children: [
-          /* @__PURE__ */ jsx58(
+        filterType === "dateRange" && /* @__PURE__ */ jsxs38(Fragment7, { children: [
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12837,7 +13022,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12851,12 +13036,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx58(Button, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx59(Button, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx58(Button, { size: "small", onClick: () => {
+          /* @__PURE__ */ jsx59(Button, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -12867,7 +13052,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -12881,21 +13066,21 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = useRef13(null);
-  const tableRef = useRef13(null);
-  const [columnSizing, setColumnSizing] = useState26(columns.reduce((previousValue, currentValue) => {
+  const ref = useRef14(null);
+  const tableRef = useRef14(null);
+  const [columnSizing, setColumnSizing] = useState27(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState26();
-  const [pagination, setPagination] = useState26({
+  const [columnSizingInfo, setColumnSizingInfo] = useState27();
+  const [pagination, setPagination] = useState27({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState26(initialState?.columnFilters);
+  const [columnFilters, setColumnFilters] = useState27(initialState?.columnFilters);
   const computedColumnMinWidths = useMemo7(() => {
     return columns.reduce((previousValue, column) => {
       return {
@@ -12987,7 +13172,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx59(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx60(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13035,7 +13220,7 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState26(false);
+  const [hasInitializedSizing, setHasInitializedSizing] = useState27(false);
   useEffect27(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
@@ -13072,8 +13257,8 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx48("flex-col-4", className), children: [
-    /* @__PURE__ */ jsx59("div", { className: clsx48("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39("div", { ref, className: clsx48("flex-col-4", className), children: [
+    /* @__PURE__ */ jsx60("div", { className: clsx48("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs39(
       "table",
       {
         ref: tableRef,
@@ -13083,7 +13268,7 @@ var Table = ({
           width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
         },
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx59(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx60("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx60(
             "col",
             {
               style: {
@@ -13094,18 +13279,22 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx59("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ jsxs37(
+          /* @__PURE__ */ jsx60("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx60("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsxs39(
               "th",
               {
                 colSpan: header.colSpan,
                 className: clsx48("relative group", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ jsx59("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "flex-row-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ jsx59(
+                  /* @__PURE__ */ jsx60("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs39("div", { className: "flex-row-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ jsx60(
                       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();
@@ -13124,7 +13313,7 @@ var Table = ({
                         }
                       }
                     ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx59(
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx60(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13136,7 +13325,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ jsx59(
+                  header.column.getCanResize() && /* @__PURE__ */ jsx60(
                     "div",
                     {
                       onMouseDown: header.getResizeHandler(),
@@ -13155,15 +13344,15 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxs37("tbody", { children: [
+          /* @__PURE__ */ jsxs39("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx59(
+              return /* @__PURE__ */ jsx60(
                 "tr",
                 {
                   onClick: () => onRowClick?.(row, table),
                   className: table.options.meta?.bodyRowClassName,
                   children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ jsx59("td", { children: flexRender(
+                    return /* @__PURE__ */ jsx60("td", { children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13173,15 +13362,15 @@ var Table = ({
               );
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx59("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx59("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx59(FillerRowElement, {}) }, column.id);
+              return /* @__PURE__ */ jsx60("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx60("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx60(FillerRowElement, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx59("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx60(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13193,7 +13382,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Table,
     {
       ...props,
@@ -13217,7 +13406,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx59(
+          return /* @__PURE__ */ jsx60(
             Checkbox,
             {
               checked: table.getIsAllRowsSelected(),
@@ -13230,7 +13419,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx59(
+          return /* @__PURE__ */ jsx60(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13248,15 +13437,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx59(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx60(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx59(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx60(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -13281,7 +13470,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 import { clsx as clsx49 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -13291,7 +13480,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon2, Copy } from "lucide-react";
-import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13301,8 +13490,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = useState27(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState27(false);
+  const [isShowingIndication, setIsShowingIndication] = useState28(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState28(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]`,
@@ -13322,7 +13511,7 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       className: clsx49("relative inline-block cursor-copy", containerClassName),
@@ -13340,7 +13529,7 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs40(
           "div",
           {
             className: clsx49(
@@ -13355,15 +13544,15 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ jsxs38("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ jsx60(CheckIcon2, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ jsxs40("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ jsx61(CheckIcon2, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ jsxs38("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ jsx60(Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ jsxs40("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ jsx61(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsx61(
                 "div",
                 {
                   className: clsx49(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13380,29 +13569,26 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-action/DateAndTimePicker.tsx
 import clsx50 from "clsx";
-import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs41 } from "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__ */ jsx61(
+    dateDisplay = /* @__PURE__ */ jsx62(
       DatePicker,
       {
         ...datePickerProps,
-        className: "min-w-80 min-h-71 max-h-71",
+        className: "min-w-80",
         yearMonthPickerProps: { className: "h-full grow" },
         value,
         start,
@@ -13412,39 +13598,26 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx61(
+    timeDisplay = /* @__PURE__ */ jsx62(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx50("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
+        className: clsx50({ "justify-between": mode === "time" }),
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ jsxs39("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ jsxs39("div", { className: "flex-row-4", children: [
-      dateDisplay,
-      timeDisplay
-    ] }),
-    /* @__PURE__ */ jsx61("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ jsx61(Button, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx61(
-        Button,
-        {
-          size: "medium",
-          onClick: () => onFinish?.(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
+  return /* @__PURE__ */ jsxs41("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+    dateDisplay,
+    timeDisplay
   ] });
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback13, useEffect as useEffect28, useState as useState28 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect28, useState as useState29 } from "react";
 import clsx51 from "clsx";
-import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13463,7 +13636,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState28({
+  }, setAnimation] = useState29({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13583,7 +13756,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13594,15 +13767,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs40("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsxs42("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx63(
           "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__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13610,7 +13783,7 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx62(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx63(
               "div",
               {
                 className: clsx51(
@@ -13639,126 +13812,163 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/SearchBar.tsx
-import { Search } from "lucide-react";
-import { clsx as clsx52 } from "clsx";
-import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
-var SearchBar = ({
-  placeholder,
-  onSearch,
-  disableOnSearch,
-  containerClassName,
-  ...inputProps
+// src/components/user-action/input/DateTimeInput.tsx
+import { useEffect as useEffect29, useMemo as useMemo8, useRef as useRef15, useState as useState30 } from "react";
+import { CalendarIcon } from "lucide-react";
+import clsx52 from "clsx";
+import { Fragment as Fragment8, jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+var DateTimeInput = ({
+  date,
+  onValueChange,
+  onEditCompleted,
+  onRemove,
+  containerProps,
+  mode = "date",
+  pickerProps,
+  ...props
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs41("div", { className: clsx52("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx63(
-      Input,
-      {
-        ...inputProps,
-        placeholder: placeholder ?? translation("search")
-      }
-    ),
-    onSearch && /* @__PURE__ */ jsx63(
-      Button,
+  const { locale } = useLocale();
+  const [isOpen, setIsOpen] = useState30(false);
+  const containerRef = useRef15(null);
+  useOutsideClick([containerRef], () => {
+    setIsOpen(false);
+  });
+  const zIndex = useZIndexRegister(isOpen);
+  const isReadOnly = useMemo8(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
+  useEffect29(() => {
+    if (isReadOnly) {
+      setIsOpen(false);
+    }
+  }, [isReadOnly]);
+  const cleanInputProps = { ...props };
+  delete cleanInputProps["isShowingError"];
+  delete cleanInputProps["setIsShowingError"];
+  return /* @__PURE__ */ jsxs43(Fragment8, { children: [
+    /* @__PURE__ */ jsxs43("div", { ...containerProps, className: clsx52("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ jsx64(
+        Input,
+        {
+          ...cleanInputProps,
+          placeholder: translation("clickToAdd"),
+          value: date ? DateUtils.formatAbsolute(date, locale, mode === "dateTime") : "",
+          onClick: (event) => {
+            setIsOpen(true);
+            cleanInputProps.onClick?.(event);
+          },
+          readOnly: true,
+          className: clsx52(
+            "pr-10 w-full",
+            { "hover:cursor-pointer": !isReadOnly },
+            cleanInputProps.className
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx64(
+        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__ */ jsx64(CalendarIcon, { className: "size-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx64(Visibility, { isVisible: isOpen, children: /* @__PURE__ */ jsxs43(
+      "div",
       {
-        layout: "icon",
-        color: "neutral",
-        disabled: disableOnSearch,
-        onClick: onSearch,
-        children: /* @__PURE__ */ jsx63(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__ */ jsx64(
+            DateTimePicker,
+            {
+              ...pickerProps,
+              mode,
+              value: date,
+              onChange: (newDate) => {
+                onValueChange(newDate);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs43("div", { className: "flex-row-2 justify-end", children: [
+            /* @__PURE__ */ jsx64(Visibility, { isVisible: !!onRemove, children: /* @__PURE__ */ jsx64(
+              Button,
+              {
+                size: "medium",
+                color: "negative",
+                onClick: () => {
+                  onRemove?.();
+                  setIsOpen(false);
+                },
+                children: translation("clear")
+              }
+            ) }),
+            /* @__PURE__ */ jsx64(
+              Button,
+              {
+                size: "medium",
+                onClick: () => {
+                  onEditCompleted?.(date);
+                  setIsOpen(false);
+                },
+                children: translation("change")
+              }
+            )
+          ] })
+        ]
       }
-    )
+    ) })
   ] });
 };
-
-// src/components/user-action/Tooltip.tsx
-import { clsx as clsx53 } from "clsx";
-import { jsx as jsx64, jsxs as jsxs42 } from "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__ */ jsxs42(
-    "div",
+  const [date, setDate] = useOverwritableState(useMemo8(() => initialDate ?? /* @__PURE__ */ new Date(), [initialDate]));
+  return /* @__PURE__ */ jsx64(
+    DateTimeInput,
     {
-      className: clsx53("relative inline-block", containerClassName),
-      ...handlers,
-      children: [
-        children,
-        isHovered && /* @__PURE__ */ jsxs42(
-          "div",
-          {
-            className: clsx53(
-              `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__ */ jsx64(
-                "div",
-                {
-                  className: clsx53(`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
 import { useId as useId11 } from "react";
-import { forwardRef as forwardRef9, useState as useState29 } from "react";
-import clsx54 from "clsx";
-import { jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
+import { forwardRef as forwardRef9, useState as useState31 } from "react";
+import clsx53 from "clsx";
+import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef9(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = useState29(false);
+  const [isFocused, setIsFocused] = useState31(false);
   const generatedId = useId11();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs43("div", { className: clsx54("relative"), children: [
+  return /* @__PURE__ */ jsxs44("div", { className: clsx53("relative"), children: [
     /* @__PURE__ */ jsx65(
       Input,
       {
         ...props,
         id,
-        className: clsx54("h-14 px-4 pb-2 py-6.5", props.className),
+        className: clsx53("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -13777,7 +13987,7 @@ var InsideLabelInput = forwardRef9(function InsideLabelInput2({
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx54(
+        className: clsx53(
           // 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",
@@ -13803,27 +14013,63 @@ var InsideLabelInputUncontrolled = ({
   );
 };
 
+// src/components/user-action/input/SearchBar.tsx
+import { Search } from "lucide-react";
+import { clsx as clsx54 } from "clsx";
+import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
+var SearchBar = ({
+  onSearch,
+  searchButtonProps,
+  containerProps,
+  ...inputProps
+}) => {
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ jsxs45("div", { ...containerProps, className: clsx54("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx66(
+      InputUncontrolled,
+      {
+        ...inputProps,
+        placeholder: inputProps.placeholder ?? translation("search"),
+        className: clsx54("pr-10 w-full", inputProps.className)
+      }
+    ),
+    onSearch && /* @__PURE__ */ jsx66(
+      Button,
+      {
+        ...searchButtonProps,
+        size: "small",
+        layout: "icon",
+        color: "neutral",
+        coloringStyle: "text",
+        onClick: (event) => onSearch(event),
+        className: clsx54("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx66(Search, { className: "w-full h-full" })
+      }
+    )
+  ] });
+};
+
 // src/components/user-action/input/ToggleableInput.tsx
-import { forwardRef as forwardRef10, useEffect as useEffect29, useImperativeHandle as useImperativeHandle4, useRef as useRef14, useState as useState30 } from "react";
+import { forwardRef as forwardRef10, useEffect as useEffect30, useImperativeHandle as useImperativeHandle4, useRef as useRef16, useState as useState32 } from "react";
 import { Pencil } from "lucide-react";
 import clsx55 from "clsx";
-import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef10(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = useState30(initialState !== "display");
-  const innerRef = useRef14(null);
+  const [isEditing, setIsEditing] = useState32(initialState !== "display");
+  const innerRef = useRef16(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect29(() => {
+  useEffect30(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs44("div", { className: clsx55("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs46("div", { className: clsx55("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx67(
       Input,
       {
         ...props,
@@ -13842,16 +14088,16 @@ var ToggleableInput = forwardRef10(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: clsx55(`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: clsx55(`w-full rounded-md`, {
           "text-transparent": !isEditing
-        }),
-        defaultStyle: false
+        })
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs44("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx66("span", { className: clsx55(" truncate"), children: value }),
-      /* @__PURE__ */ jsx66(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs46("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx67("span", { className: clsx55(" truncate"), children: value }),
+      /* @__PURE__ */ jsx67(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -13861,7 +14107,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     ToggleableInput,
     {
       value,
@@ -13872,33 +14118,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef17 } from "react";
 import { useImperativeHandle as useImperativeHandle5 } from "react";
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var FocusTrap = forwardRef11(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = useRef15(null);
+  const innerRef = useRef17(null);
   useImperativeHandle5(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ jsx67("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx68("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect30, useState as useState31 } from "react";
+import { useEffect as useEffect31, useState as useState33 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState31(show);
-  const [isTransitioning, setIsTransitioning] = useState31(!isOpen);
+  const [isOpen, setIsOpen] = useState33(show);
+  const [isTransitioning, setIsTransitioning] = useState33(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect30(() => {
+  useEffect31(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -13923,7 +14169,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -13961,7 +14207,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect31(() => {
+  useEffect32(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -13970,10 +14216,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect32 } from "react";
+import React6, { useEffect as useEffect33 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect32(() => {
+  useEffect33(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -13999,7 +14245,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback14, useEffect as useEffect33, useMemo as useMemo8, useState as useState32 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect34, useMemo as useMemo9, useState as useState34 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -14038,9 +14284,9 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = useState32(initialSearch ?? "");
-  const [result, setResult] = useState32(list);
-  const searchTags = useMemo8(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const [search, setSearch] = useState34(initialSearch ?? "");
+  const [result, setResult] = useState34(list);
+  const searchTags = useMemo9(() => additionalSearchTags ?? [], [additionalSearchTags]);
   const updateSearch = useCallback14((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
@@ -14048,24 +14294,24 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo8(() => {
+  const filteredResult = useMemo9(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = useMemo8(() => {
+  const sortedAndFilteredResult = useMemo9(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo8(() => {
+  const usedResult = useMemo9(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -14175,6 +14421,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) {
@@ -14312,12 +14658,16 @@ export {
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
+  DateTimeInput,
+  DateTimeInputUncontrolled,
   DateTimePicker,
+  DateUtils,
   DayPicker,
   DayPickerUncontrolled,
   Dialog,
   DiscardChangesDialog,
   DividerInserter,
+  Duration,
   EaseFunctions,
   ErrorComponent,
   Expandable,
@@ -14415,6 +14765,7 @@ export {
   Transition,
   UseValidators,
   VerticalDivider,
+  Visibility,
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
@@ -14424,19 +14775,16 @@ export {
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
-  equalDate,
   equalSizeGroups,
   formatDate,
   formatDateTime,
   getBetweenDuration,
-  getDaysInMonth,
   getNeighbours,
   getWeeksForCalenderMonth,
   hightideTranslation,
   hightideTranslationLocales,
   isInTimeSpan,
   match,
-  monthsList,
   noop,
   range,
   resolveSetState,
@@ -14466,7 +14814,6 @@ export {
   useTranslatedValidators,
   useZIndexRegister,
   validateEmail,
-  weekDayList,
   writeToClipboard
 };
 //# sourceMappingURL=index.mjs.map